CSS

A function that lets you define colors intuitively using hue, saturation, and lightness.

hsl()

hsl()は、色を 色相(Hue)・彩度(Saturation)・明度(Lightness) の3つの値で指定できる関数です。

たとえば hsl(0, 100%, 50%) は「鮮やかな赤」、hsl(120, 100%, 50%) は「鮮やかな緑」、hsl(240, 100%, 50%) は「鮮やかな青」を意味します。

色相(Hue)
0〜360 の数値で、色の種類を角度で指定(例:0=赤, 120=緑, 240=青)
彩度(Saturation)
色の鮮やかさを%で指定。100%で最も鮮やか、0%でグレースケール
明度(Lightness)
色の明るさを%で指定。50%が標準の明るさ、100%に近づくほど白に近づく

RGBに比べて色味の調整が直感的で、デザインの微調整やテーマカラーの管理がしやすくなります。