HSL 値
CSS では、色相、彩度、明度 (HSL) を使用して色を指定できます。形式は次のとおりです。
hsla(色相、彩度、明度)
色相 (色相) は、カラー ホイール上の 0 ～ 360 の度数です。 0 は赤、120 は緑、240 は青です。
彩度 (彩度) はパーセント値で、0% はグレーの色合い、100% はフルカラーです。
明度 (明度) もパーセントであり、0% は黒、50% は明るくも暗くもなく、100% は白です。
次の HSL 値を組み合わせて実験してください。
实例
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(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)
自分で試してみてください