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ブラウザでは 上の配色がすべて白に見えています。