CSS3 で追加された HSL の使い方
CSS3 から色指定に HSL 色空間が追加されました. ここ最近は, ほぼ色指定には RGB ではなく HSL を多用するようになったので ざっくりとまとめました.
視認性を意識した色指定を直感的にできるのでぜひ使ってみてください.
Example
実際に HSL を使ったサンプルです.
Code
<style> .example-wrap { display: -webkit-box; display: -moz-box; margin: 5px; padding: 5px; border: 1px solid black; } div[class^="box"] { margin: 10px; width: 100px; height: 100px; border: 1px solid black; } .box-00 { background-color: hsl(0,50%,50%); } .box-01 { background-color: hsl(120,50%,50%); } .box-02 { background-color: hsl(240,50%,50%); } .box-03 { background-color: hsl(240,80%,50%); } .box-04 { background-color: hsl(240,50%,80%); } </style> <div class="example-wrap"> <div class="box-00"></div> <div class="box-01"></div> <div class="box-02"></div> <div class="box-03"></div> <div class="box-04"></div> </div>
Result
最初の値を 0~120~240と変化させることで赤→緑→青といった流れで色が変化してきます.
それぞれの値をいじって確認できるプログラムも書いてみました. スライドを動かして, HSL を変えることでどのように色が変わるのか感じてみてください.
HSL とは
HSL とは, 色相(Hue), 彩度(Saturation), 輝度(Lightness) の3つの成分からなる色空間のことです.
- 色相…色味を 0~360度の角度で表す. 0度は赤で120度は緑, 240度は青です.
- 彩度…色相で指定した色の鮮やかさです. 0%に近づくほど灰色に近づいていきます.
- 輝度…明るさです. 0%で黒, 100%で白になり, 50% で純色となります.
HSL は RGB の欠点である
- ハードウェアに依存する
- 直感性に欠ける
を解決してくれます.
例えば少し赤みがかった青にしたいというときは, Hue の値を 250~280 程度にすることで表現することができます.
色を濃くしたいというときに, RGB の場合それぞれの値のバランスを考えて調整する必要がありましたが, HSL の場合 Saturation の値を大きくするだけで色を濃くすることができます.
文字をクッキリ見せたいというときも, 文字色と背景色の Lightness の値に差をつけることで簡単に実現するこができます.
参考サイト
Chrome, Firefox はもちろんですが, あの IE でも9あたりから対応しているみたいなので今後はバリバリ使っていって問題ないと思います.
ちなみに CSS3 からは rgb に rgba というアルファ値(0.0~1.0)を指定できる形式が追加されましたが hsl にも同様 hsla という指定が可能です.
[…] CSS3 で追加された HSL の使い方 […]
★を付けた。 CSSでHSL指定が使えるらしい。検索結果のキーワードを色分けするときなど、色相だけをずらすと便利なんだよね。例えば0° 160 320 120 280 80 240 40 20… http://t.co/YHbg16PR (Google Reader)
[…] hsl について詳しく知りたい方は 『CSS3 で追加された HSL の使い方』をどうぞ .entry-links { margin: 40px 0px; padding: 20px 5px; border-top: double 4px black; border-bottom: double 4px black; } .entry-links .left-entr […]
[…] きます. hsl について詳しく知りたいという方はこちらへ. […]