HSL は、色相、彩度、明度の略です。

HSL値

CSS では、次の形式で色相、彩度、明度 (HSL) を使用して色を指定できます。

hsl(*色相*、*飽和*、*軽さ*)

色相は、0 から 360 までのカラー ホイール上の次数です。0 は赤、120 は緑、240 は青です。

彩度はパーセント値です。 0% は灰色の色合いを意味し、100% はフルカラーです。

明度もパーセンテージです。 0% は黒、50% は明暗のどちらでもない、100% は白

以下の HSL 値を混合して実験します。

飽和

彩度は、色の強度として説明できます。

100% は純粋な色で、グレーの陰影はありません。

50% は 50% グレーですが、まだ色が見えます。

0% は完全にグレーです。色が見えなくなります。

明度

色の明度は、その色に与える光の量として表すことができます。0% は光がない (黒)、50% は 50% の光 (暗くも明るくもない)、100% は完全な明るさ (白) を意味します。 .

グレーの色合い

多くの場合、グレーの色合いは、色相と彩度を 0 に設定することによって定義され、明度を 0% から 100% まで調整して、より暗い/より明るい色合いを取得します。

HSLA値

HSLA カラー値は、色の不透明度を指定するアルファ チャネルを使用して HSL カラー値を拡張したものです。

HSLA カラー値は、次のように指定されます。

hsla(*色相、* *飽和*、*明度、アルファ*)

alpha パラメーターは、0.0 (完全に透明) から 1.0 (まったく透明ではない) までの数値です。

以下の HSLA 値を混合して実験します。