HTML HSLおよびHSLAの色
HSLは、色相、彩度、明度の略です。
HSLAカラー値は、HSLをアルファチャネル(不透明度)で拡張したものです。
HSLカラー値
HTMLでは、次の形式で色相、彩度、明度(HSL)を使用して色を指定できます。
hsl(色相、飽和、明るさ)
色相は、0から360までのカラーホイール上の次数です。0は赤、120は緑、240は青です。
彩度はパーセント値です。 0%は灰色の色合いを意味し、100%はフルカラーです。
明度もパーセント値です。 0%は黒、100%は白です。
以下のHSL値を混合して実験します。
hsl(0, 100%, 50%)
色相
飽和
明るさ
例
飽和
彩度は、色の強度として説明できます。
100%は純粋な色で、グレーの色合いはありません。
50%は50%グレーですが、まだ色が見えます。
0%は完全にグレーです。色が見えなくなります。
明度
色の明るさは、色に与えたい明るさの量として表すことができます。ここで、0%は明るさがない(黒)のことを意味し、50%は50%の明るさ(暗くも明るくもない)を意味し、100%は完全な明るさ(白)を意味します。
例
グレーの色合い
多くの場合、グレーの色合いは、色相と彩度を0に設定し、明度を0%から100%に調整して、より暗い/より明るい色合いにすることによって定義されます。
HSLAカラー値
HSLAカラー値は、色の不透明度を指定するアルファチャネルを使用して、HSLカラー値を拡張したものです。
HSLAカラー値は、次のように指定されます。
hsla(*色相*、*飽和*、*明度*、*アルファ*)
alphaパラメーターは、0.0(完全に透明)から1.0(まったく透明ではない)までの数値です。
以下のHSLA値を混合して実験します。
hsla(0, 100%, 50%, 0.5)
色相
飽和
明度
アルファ
例
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。