CSS HSL 顏色

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 顏色值是帶有 Alpha 通道的 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)

親自試一試