gorogoronyan FC2

CSS 色の指定(2) - HSL で指定

CSS 色の指定 からの続きです。

HSL 色空間

HSL 色空間 は、色を色相(H:hue)、彩度(S:saturation)、 輝度(L:luminance)で表します。 RGB に比べて感覚的にわかりやすいです。

色相を変える

色を角度(0から360度)で表します。

hsl(0, 100%, 50%)
hsl(30, 100%, 50%)
hsl(60, 100%, 50%)
hsl(90, 100%, 50%)
hsl(120, 100%, 50%)
hsl(150, 100%, 50%)
hsl(180, 100%, 50%)
hsl(210, 100%, 50%)
hsl(240, 100%, 50%)
hsl(270, 100%, 50%)
hsl(300, 100%, 50%)
hsl(330, 100%, 50%)
hsl(360, 100%, 50%)

彩度を変える

彩度が高いほど鮮やかな色になり、低いほど灰色に近づきます。 彩度 0%で #808080 の灰色になります。

hsl(0, 100%, 50%)
hsl(0, 80%, 50%)
hsl(0, 60%, 50%)
hsl(0, 40%, 50%)
hsl(0, 20%, 50%)
hsl(0, 0%, 50%)

明度を変える

明度が高いほど白(#fff)に、低いほど黒(#000)に近づきます。 50%のときに白味も黒味もない色になります。

hsl(0, 100%, 100%)
hsl(0, 100%, 80%)
hsl(0, 100%, 60%)
hsl(0, 100%, 50%)
hsl(0, 100%, 40%)
hsl(0, 100%, 20%)
hsl(0, 100%, 0%)

補足

HSL 指定は IE8 など古いWebブラウザでは使えませんでした。 現在は気にする必要ありません。HSL に対応しないWebブラウザでは 上の配色がすべて白に見えています。

サンプル

関連

inserted by FC2 system