顏色 HSL 和 HSLA

HSL 顏色

Edge、Chrome、Firefox、Safari、Opera 10+ 以及 IE9+ 支援 HSL 顏色值。

HSL 代表色相 (Hue)、飽和度 (Saturation) 和亮度 (Lightness)。

HSL 顏色值使用以下格式指定：

hsl(色相, 飽和度, 亮度)

色相

色相是色輪上的度數，範圍從 0 到 360。0（或 360）是紅色，120 是綠色，240 是藍色。

飽和度

飽和度可以描述為顏色的強度。它是從 0% 到 100% 的百分比值。

100% 是全色，沒有灰色調。

50% 是 50% 的灰色，但你仍然可以看到顏色。

0% 是完全的灰色；你再也看不到顏色了。

亮度

顏色的亮度可以描述為您想為顏色賦予多少光，其中 0% 表示沒有光（暗），50% 表示 50% 光（既不暗也不亮），100% 表示全光。

親自嘗試

所有主流瀏覽器都支援 HSL 顏色值。

HSLA 顏色值

HSLA 顏色值是 HSL 顏色值的擴充套件，增加了一個 Alpha 通道，用於指定顏色的不透明度。

HSLA 顏色值指定如下：

hsla(色相, 飽和度, 亮度, alpha)

alpha 引數是一個介於 0.0（完全透明）和 1.0（完全不透明）之間的數字。