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)

相对值语法

hsl(from color hue saturation lightness / A)

技术细节

浏览器支持

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

相关页面

教程：CSS HSL 颜色

参考：CSS 颜色

参考：CSS hwb() 函数

参考：CSS lab() 函数

参考：CSS lch() 函数

参考：CSS oklab() 函数

参考：CSS oklch() 函数