CSS3 で追加された HSL の使い方

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

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 とは

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 という指定が可能です.

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT