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