CSS hsl() 函数

定义和用法

CSS 的 hsl() 函数使用色相-饱和度-亮度模型(HSL)来指定颜色。还可以添加一个可选的 alpha 分量(表示颜色的透明度)。

提示:HSL 代表色相(Hue)、饱和度(Saturation)和亮度(Lightness),它表示颜色的圆柱坐标表示法。

注意:hsla() 函数是 hsl() 函数的别名。建议使用 hsl() 函数。

实例

例子 1

定义不同的 HSL(A) 颜色:

#p1 {background-color:hsl(120 100% 50%);} /* 绿色 */
#p2 {background-color:hsl(120 100% 75%);} /* 浅绿色 */
#p3 {background-color:hsl(120 100% 25%);} /* 深绿色 */
#p4 {background-color:hsl(120 100% 25% / 20%);} /* 带透明度的深绿色 */
#p5 {background-color:hsl(120 60% 70%);} /* 柔和的绿色 */
#p6 {background-color:hsl(290 100% 50%);} /* 紫色 */
#p7 {background-color:hsl(290 60% 70%);} /* 柔和的紫色 */
#p8 {background-color:hsl(290 60% 70% / 0.3);} /* 带透明度的柔和紫色 */

亲自试一试

例子 2

使用逗号分隔值的旧语法:

#p1 {background-color:hsl(120, 100%, 50%);} /* 绿色 */
#p2 {background-color:hsl(120, 100%, 75%);} /* 浅绿色 */
#p3 {background-color:hsl(120, 100%, 25%);} /* 深绿色 */
#p4 {background-color:hsl(120, 60%, 70%);} /* 柔和的绿色 */
#p5 {background-color:hsl(290, 100%, 50%);} /* 紫色 */
#p6 {background-color:hsl(290, 60%, 70%);} /* 柔和的紫色 */

亲自试一试

CSS 语法

绝对值语法

hsl(hue saturation lightness / A)
描述
hue 必需。定义色轮上的度数(从 0 到 360)- 0(或 360)是红色,120 是绿色,240 是蓝色。
saturation

必需。定义颜色的饱和度;0% 是灰色,100% 是全色(全饱和度)。

也可以使用 None(与 0% 相同)。

lightness

必需。定义颜色的亮度;0% 是黑色,50% 是正常,100% 是白色。

也可以使用 None(与 0% 相同)。

/ A

可选。表示颜色的 alpha 通道值(从 0%(或 0)- 完全透明到 100%(或 100)- 完全不透明)。

也可以使用 None(表示没有 alpha 通道)。

默认值是 100%。

相对值语法

hsl(from color hue saturation lightness / A)
描述
from color

以关键字 from 开头,后跟一个表示原始颜色的颜色值。

这是相对颜色所基于的原始颜色。

hue 必需。定义色轮上的度数(从 0 到 360)- 0(或 360)是红色,120 是绿色,240 是蓝色。
saturation

必需。定义颜色的饱和度;0% 是灰色,100% 是全色(全饱和度)。

也可以使用 None(与 0% 相同)。

lightness

必需。定义颜色的亮度;0% 是黑色,50% 是正常,100% 是白色。

也可以使用 None(与 0% 相同)。

/ A

可选。表示颜色的 alpha 通道值(从 0%(或 0)- 完全透明到 100%(或 100)- 完全不透明)。

也可以使用 None(表示没有 alpha 通道)。

默认值是 100%。

技术细节

版本: CSS3

浏览器支持

表格中的数字表示首个完全支持该函数的浏览器版本。

Chrome Edge Firefox Safari Opera
hsl()
1 9 1 3.1 9.5
alpha 参数的 hsl()
65 79 52 12.1 52
空格分隔的参数
65 79 52 12.1 52

相关页面

教程:CSS HSL 颜色

参考:CSS 颜色

参考:CSS hwb() 函数

参考:CSS lab() 函数

参考:CSS lch() 函数

参考:CSS oklab() 函数

参考:CSS oklch() 函数