HTMLHSLおよびHSLAカラー
HSLは、色相、彩度、明度の略です。
HSLAカラー値は、アルファチャネル(不透明度)を使用したHSLの拡張です。
HSLカラー値
HTMLでは、色相、彩度、明度(HSL)を次の形式で使用して色を指定できます。
hsl(色相、彩度、明るさ)
色相は、0から360までのカラーホイールの次数です。0は赤、120は緑、240は青です。
彩度はパーセンテージ値、0%はグレーの陰影、100%はフルカラーを意味します。
明度もパーセンテージ値であり、0%は黒、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%, 20%)
hsl(0, 0%, 30%)
hsl(0, 0%, 40%)
hsl(0, 0%, 60%)
hsl(0, 0%, 70%)
hsl(0, 0%, 90%)
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)