CSS HSL カラー
HSL は、色相、彩度、明度の略です。
HSL値
CSS では、次の形式で色相、彩度、明度 (HSL) を使用して色を指定できます。
hsl(*色相*、*飽和*、*軽さ*)
色相は、0 から 360 までのカラー ホイール上の次数です。0 は赤、120 は緑、240 は青です。
彩度はパーセント値です。 0% は灰色の色合いを意味し、100% はフルカラーです。
明度もパーセンテージです。 0% は黒、50% は明暗のどちらでもない、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)
色相
飽和
軽さ
アルファ
例
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。