颜色 HSL 和 HSLA

HSL 颜色

Edge、Chrome、Firefox、Safari、Opera 10+ 和 IE9+ 支持 HSL 颜色值。

HSL 代表色相、饱和度和亮度。

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