HTML HSL 与 HSLA 颜色

HSL 颜色值

在 HTML 中，可以使用以下形式的色相、饱和度和亮度（HSL）来指定颜色：

hsl(hue, saturation, lightness)

色相是色环上的度数，范围从 0 到 360。0 是红色，120 是绿色，240 是蓝色。

饱和度是一个百分比值。0% 表示灰色调，100% 是全彩。

亮度也是一个百分比值。0% 是黑色，100% 是白色。

通过混合下面的 HSL 值进行实验：

实例

亲自试一试

饱和度

饱和度可以描述为颜色的强度。

100% 是纯色，无灰色调。

50% 是 50% 灰色，但你仍能看到颜色。

0% 是完全灰色；你无法再看到颜色。

实例

亲自试一试

亮度

颜色的亮度可以描述为你想给颜色多少光照，其中 0% 表示无光照（黑色），50% 表示 50% 光照（既不暗也不亮），100% 表示完全亮度（白色）。

实例

亲自试一试

灰色阴影

灰色阴影通常通过将色相和饱和度设置为 0，然后调整亮度从 0% 到 100% 以获得更暗/更亮的阴影来定义：

实例

亲自试一试

HSLA 颜色值

HSLA 颜色值是 HSL 颜色值的扩展，增加了 Alpha 通道 - 用于指定颜色的不透明度。

HSLA 颜色值指定方式为：

hsla(hue, saturation, lightness, alpha)

alpha 参数是一个介于 0.0（完全透明）和 1.0（完全不透明）之间的数字：

通过混合下面的 HSLA 值进行实验：

实例

亲自试一试