CSS3で追加されたHSLカラーについて

CSS3では16進数で表現するRGBよりも直感的な数値を指定できるHSLカラーが追加されました。

もう勧告になってるので、使い方を覚えておくためにちょっと調べてみました。

HSL色空間とはなんぞや

Wikipediaで調べてみた所、こんな感じで書いてました。

HLS色空間(エイチエルエスいろくうかん)とは、色相(Hue)、彩度(Saturation)、輝度(Lightness/Luminance または Intensity)の3つの成分からなる色空間。HSV色空間によく似ている。 HSLHSIと呼ばれることもある。

HLSのカラーモデル
色相:色味を0~360度の範囲の角度で表す。0度は赤で、その反対側に位置する180度は赤の反対色にあたる青緑。すなわち、反対色を見つけるのも容易。色相についてはHSVと同じ。
彩度:HSVとは違い、純色から彩度が落ちるということは、すなわち灰色になっていくという考え方に基づいている。
輝度:明度100%を純色とし、そこからどれだけ明るさが失われるかを示すHSVとは違い、輝度0%を黒、100%を白とし、その中間(50%)を純色とする。50%以下はHSVの明度を示し、50%以上はHSVの彩度を示すと考えると分かりやすいだろう。
HLS色空間を使う代表的なアプリケーションとしては Microsoft Windows (ペイントを含む)、CSS3、Paint Shop Pro など。 引用:HSL色空間 - Wikipedia

つまり、色相を角度、彩度、輝度を%で指定する。そっから色相の値を替えずに、彩度と輝度をいじっていけば、同じ色合いの色を直感的に指定できますね。

CSS3でのHSL(A)カラー指定方法

/* Green */
.hoge {
    color: hsl(120, 50%, 50%);
}
/* アルファを加えたもの */
.huga {
    color: hsla(120, 50% 50%,.3);
}

色相環イメージ

色相環イメージ

こんな感じで、赤から段々色がかわって、一周してまた赤に戻るイメージです。

画像にフィルターをかけてみる

HTML

<figure class="sample">
    <img src="dog.png" alt="実家の犬" />
<figure>

CSS

.sample {
    position:relative;
    display:inline-block;
}

.sample:before {
    content: '';
    display:block;
    position:absolute;
    width:100%;
    height:100%;
    background: hsla(270,100%,50%,0.1);
    /* SASS(Compass)を使ってるとコンパイル時にRGBAに変換されます */
    background: rgba(127, 0, 255, 0.1);
}

結果

Before

実家の犬

After

実家の犬

ブラウザのサポートはFirefox 3.0+, Safari 3+, Chrome 6+, Opera 10+, IE9+となってます。

最近はSASSやらLESSやらが流行ってるから、変換してくれる機能使ってHSLからRGBに出力する事にしといて、HSLに慣れとく方がいいかもしれません。

参考サイト

comments powered by Disqus
« Newer Older »