HSLとは？色相・彩度・明度で表すカラーコードの仕組み

HSLは、色をHue（色相）・Saturation（彩度）・Lightness（明度）の3要素で表す方法です。CSSでは hsl() を使い、色相を角度、彩度と明度をパーセントで指定します。

HSLとは？

HSLは Hue / Saturation / Lightness の略です。MDNでは hsl() をsRGB色空間の色を色相・彩度・明度で表す関数として説明しています。citeturn612865search6

色相Hは0〜360°の色相環

CSSのHSLでは0°から赤が始まり、黄・緑・シアン・青・マゼンタを通って360°で再び赤へ戻ります。MDNもこの循環を説明しています。citeturn612865search10

• 0°：赤
• 60°：黄
• 120°：緑
• 180°：シアン
• 240°：青
• 300°：マゼンタ

彩度Sは鮮やかさの割合

0%では色相の違いが見えなくなりグレーになります。100%に近づくほど、そのHSLモデル内では鮮やかな色になります。ただし、HSLの彩度はCIELABやOKLChの彩度・クロマと同じ尺度ではありません。

明度Lは「知覚的な明るさ」そのものではない

HSLのLightnessは0%で黒、100%で白、50%で最も色みが出やすい値です。しかし、同じL=50%でも黄色と青が人間に同じ明るさに見えるわけではありません。HSLは編集しやすい表現であり、知覚均等な色空間ではありません。

HSLとHEX・RGBの違い

補色は色相を180°ずらす目安にできる

MDNではHSL色相環上の反対側を求める方法として、色相値に180°を足し引きする例を示しています。citeturn612865search6 ただし、補色だから必ず見やすい・美しいとは限りません。彩度・明度・面積比も調整が必要です。

透明度はスラッシュで指定できる

color: hsl(210 80% 50% / 0.5);

最後の値はアルファ値です。0が完全透明、1が完全不透明です。現在は hsla() も hsl() の別名として扱われ、MDNは hsl() の使用を案内しています。citeturn612865search6

HSLが便利な場面

• 同じ色相で明るい色・暗い色を作る
• 彩度だけを下げてくすませる
• テーマカラーから段階色を作る
• 色相を一定角度ずらして配色候補を作る

よくある質問

参考資料

• MDN hsl()
• MDN CSS color values