HSL色空間

HSL色空間とは?

HSLは色を「色相(Hue)」「彩度(Saturation)」「輝度(Lightness)」の3要素で表現する方式です。
HLS色空間とも呼ばれています。

HSLとHSVの違い

HSLと似た色の表現方法に、色相(Hue)・彩度(Saturation)・明度(Value・Brightness)の3要素で色を表現した「HSV色空間」があります。
ぱっと見よく似ていますが、彩度を低下させた時にHSLは赤緑青のうち最も強い色と最も弱い色の中間に収束していくのに対してHSVは最も強い色に収束していくという明確な違いがあります。
両者を混同すると、まったく別の色になってしまったりするので注意してください。

[関連項目] HSV色空間とは

HSLの利点

色の表現方法としてよく使われているRGBは「原色の組み合わせ」で色を表現していますが、この方法だと各要素を変動させた場合に色がどう変化するかがイメージしにくく、細かな色の調整をしたい場合などには不向きです。
一方、HSV・HSLでは色を「鮮やかさ」「明るさ」といった直感的にわかりやすい方法で表現しているため、「この色を明るくしたい・暗くしたい」「色を薄くしたい・濃くしたい」といった感覚的な調整が簡単にできます。

しかし、HSV色空間では原色が明度100%となっているため、原色をさらに明るくしたい場合に若干操作に迷ってしまうという欠点があります。
この欠点を克服するため、HSL色空間では原色を輝度50%として、高ければ明るく、低ければ暗くといった感じで、より直感的な調整をすることができるようになっています。

HSLを構成する要素の解説

色相

色相は、赤や緑といった具体的な色を定義する要素です。
色が環状に並んでいるため、0°~360°の範囲の値で表されることが多いです。

色相の値が何色になるかは下記のとおりです。
色相
0° ← → 360°
色相 RGBで色を表現した場合
R:255 G:0 B:0
0~60 R:255 B:0 で固定、Gが0から255へ増加していく
60° R:255 G:255 B:0
60~120 G:255 B:0で固定、Rが255から0へ減少していく
120° R:0 G:255 B:0
120~180 R:0 G:255で固定、Bが0から255へ増加していく
180° R:0 G:255 B:255
180~240 R:0 B:255で固定、Gが255から0へ減少していく
240° R:0 G:0 B:255
240~300 G:0 B:255で固定、Rが0から255へ増加していく
300° R:255 G:0 B:255
300~360 R:255 G:0で固定、Bが255から0へ減少していく
360° R:255 G:0 B:0

彩度

色相で定義された色の鮮やかさ・濃さを表す要素で、0%~100%の範囲で表されることが多いです。
100%が最も鮮やかで、彩度の減少に合わせて色が薄くなっていき、0%になると灰色になってしまいます。
彩度
0% ← → 100%
「鮮やか」とは赤緑青の成分の差が大きいということであり、彩度が低下するということは成分の差が縮まることであり、0%で赤緑青が同じ値になる(=灰色になる)ということです。

HSL色空間の場合、彩度が低下すると赤緑青のうち最も強い成分と最も弱い成分の中間に向かって収束していきます。

輝度

色相で定義された色の明るさ・暗さを表す要素で、0%~100%の範囲で表されることが多いです。
50%が通常の色で、50%から高くしていくと明るくなっていき100%で白色になります。
逆に50%より低くしていくと暗くなっていき0%で黒色になります。
明度
0% ← → 100%
輝度は赤緑青のうち最も大きな値と最も小さな値の中間で定義されます。

関連コンテンツ

RGBとHSLの相互変換ツール
色の表現法である「RGB」と「HSL」を相互変換するツールと変換計算式の解説。
RGBと16進数カラーコードの相互変換ツール
色の表現法である「RGB」と6桁の16進数で表される「カラーコード」を相互変換するツール。
WEBカラーチャート
HTML・CSSで使える色の見本一覧。各色のRGBと16進数カラーコードを簡単に取得できます。
CSSアイコン
HTMLやCSSで使用できる147色のカラーネーム・カラーコードの一覧。