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に比べて色味の調整が直感的で、デザインの微調整やテーマカラーの管理がしやすくなります。