CSS HSLカラー
HSLは、色相、彩度、明度の略です。
HSL値
CSSでは、次の形式で色相、彩度、明度(HSL)を使用して色を指定できます。
hsl(色相、彩度、明度)
色相は、0から360までのカラー ホイール上の次数です。0は赤、120は緑、240は青です。
彩度はパーセント値です。 0%は灰色の色合いを意味し、100%はフルカラーです。
明度もパーセンテージです。 0%は黒、50%は明暗のどちらでもない、100%は白
以下のHSL値を混合して実験します。
hsl(0, 100%, 50%)
色相
0
100%
明度
50%
例
hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(3, 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%まで調整して、より暗い/より明るい色合いを取得します。
HSLA値
HSLAカラー値は、色の不透明度を指定するアルファチャネルを使用してHSLカラー値を拡張したものです。
HSLAカラー値は、次のように指定されます。
hsla(色相、飽和、彩度、アルファ)
alphaパラメーターは、0.0(完全に透明)から1.0(まったく透明ではない)までの数値です。
以下のHSLA値を混合して実験します。
hsla(0, 100%, 50%, 0.5)
色相
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)
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。