いままで
body { background: #000; }
body { background: rgb(0, 0, 0); }
body { background: rgba(0, 0, 0, 1); }
body { background: black; }
などなど、
カラーコードやRGB(RGBa)、キーワードでの色指定は行ってきたことがあったのですが、
body { background: hsl(0, 0%, 0%); }
body { background: hsla(0, 0%, 0%, 1); }
と、HSL(HSLa)でのしてはしたことがありませんでした。
HSLについては、
HLS色空間 - Wikipedia とか
HSV色空間 - Wikipedia とかを読んだだでではなんとなくわかったようなわからないようななので、簡単に試せるサンプルをつくってみました。
DEMO
以外にも(?) IE9から対応 していまるようです。
http://caniuse.com/#search=HSL
とてもわかりやすいですが、文字が読みにくいときがありますね。裏目にでました。
今回は以上です。