颜色 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（完全不透明）之间的数字。