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 の値に差をつけることで簡単に実現するこができます.

参考サイト

• HLS色空間-wiki
• CSS Color Module Level 3