[CSS3 を使ってみる：第五回] 色を色相・彩度・輝度で指定する(hsl)

background や color、border などに hsl 指定をすると、色相・彩度・輝度で色を指定できる。

◆background で hsl を使用した場合のプロパティ

background: hsl(色相, 彩度, 輝度);
※色相は 0〜360 の整数値で指定する。0 もしくは 360 が赤、120 が緑、240 が青となる。% 指定はできない。
※彩度は 0%〜100% の整数値で指定する。
※輝度も 0%〜100% の整数値で指定する。Photoshop で言う「明度」なので、0% が黒、100% が白となる。

以下は左の div (id: hsl1) に background で青、真ん中の div (id: hsl2) に background-color で白、右の div (id: hsl3) には background-color で黒を指定してある。また、全ての div に文字色である color で赤と枠の border で緑を指定している。

#hsl1, #hsl2, #hsl3 {
  color: hsl(0, 100%, 50%);
  border: 3px solid hsl(120, 100%, 50%);
}
#hsl1 {background: hsl(240, 100%, 50%);}
#hsl2 {background-color: hsl(240, 100%, 100%);}
#hsl3 {background-color: hsl(240, 100%, 0%);}

するとこうなる。


確認環境：
Safari 5.0、Firefox 3.6.3、Chrome 5.0.375.70、Opera 10.53

W3C：
CSS Color Module Level 3