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() 函数