CSS HSL 色彩
- 前のページ CSS HEX 色彩
- 次のページ CSS 背景色
HSL 値
CSS では、色相、サチュレーション、明度（HSL）を使用して色を指定できます。以下の形式で指定されます：
hsla(hue, saturation, lightness)
色相（hue）は色輪上の 0 から 360 度の角度です。0 は赤、120 は緑、240 は青です。
サチュレーション（saturation）は百分比值であり、0％はグレーの影、100％は全色です。
明るさ（lightness）も百分比值であり、0％は黒、50％は明るくも暗くもない、100％は白です。
以下の HSL 値をミックスして実験してください：
HUE
0
SATURATION
100%
LIGHTNESS
50%
例
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(hue, saturation, lightness, alpha)
alpha パラメータは 0.0（完全に透明）から 1.0（完全不透明）までの数です：
以下の HSLA 値をミックスして実験してください：
HUE
0
SATURATION
100%
LIGHTNESS
50%
ALPHA
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)
- 前のページ CSS HEX 色彩
- 次のページ CSS 背景色
