CSSHSLカラー
HSLは、色相、彩度、明度の略です。
HSL値
CSSでは、色相、彩度、明度（HSL）を次の形式で使用して色を指定できます。
hsl（色相、彩度、明るさ）
色相は、0から360までのカラーホイールの次数です。0は赤、120は緑、240は青です。
彩度はパーセンテージ値、0％はグレーの陰影、100％はフルカラーを意味します。
明度もパーセンテージ、0％は黒、50％は明暗なし、100％は白
以下のHSL値を組み合わせて実験してください。
hsl（0、100％、50％）
HUE
0
飽和
100％
軽さ
50％
例
hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)
飽和
彩度は、色の強さとして説明できます。
100％は純粋な色で、グレーの色合いはありません
50％は50％グレーですが、それでも色を確認できます。
0％は完全に灰色で、色が見えなくなります。
例
hsl(0, 100%, 50%)
hsl(0, 80%, 50%)
hsl(0, 60%, 50%)
hsl(0, 40%, 50%)
hsl(0, 20%, 50%)
hsl(0, 0%, 50%)
軽さ
色の明度は、色に与える光の量として説明できます。ここで、0％は光がない（黒）、50％は50％の光（暗いものでも明るいものでもない）、100％は完全な光（白）を意味します。
例
hsl(0, 100%, 0%)
hsl(0, 100%, 25%)
hsl(0, 100%, 50%)
hsl(0, 100%, 75%)
hsl(0, 100%, 90%)
hsl(0, 100%, 100%)
灰色の色合い
グレーの色合いは、多くの場合、色相と彩度を0に設定し、明度を0％から100％に調整して、より暗い/より明るい色合いにすることで定義されます。
例
hsl(0, 0%, 0%)
hsl(0, 0%, 24%)
hsl(0, 0%, 47%)
hsl(0, 0%, 71%)
hsl(0, 0%, 94%)
hsl(0, 0%, 100%)
HSLA値
HSLA色値は、色の不透明度を指定するアルファチャネルを使用したHSL色値の拡張です。
HSLAカラー値は次のように指定されます。
hsla（色相、 彩度、明るさ、アルファ）
alphaパラメータは、0.0（完全に透過的）から1.0（まったく透過的ではない）までの数値です。
以下のHSLA値を組み合わせて実験してください。
hsla（0、100％、50％、0.5）
HUE
0
飽和
100％
軽さ
50％
アルファ
0.5
例
hsla(9, 100%, 64%, 0)
hsla(9, 100%, 64%, 0.2)
hsla(9, 100%, 64%, 0.4)
hsla(9, 100%, 64%, 0.6)
hsla(9, 100%, 64%, 0.8)
hsla(9, 100%, 64%, 1)