CSS hsl() 函数

实例

定义不同的 HSL 颜色：

#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%);} /* 柔绿色 */

亲自试一试

定义和用法

hsl() 函数使用 Hue-saturation-lightness 模型（HSL）定义颜色。

HSL 指的是色相（hue）、饱和度（saturation）和亮度（lightness）- 代表颜色的圆柱坐标表示。

版本： CSS3

浏览器支持

表格中的数字注明了完全支持该功能的首个浏览器版本。

函数
hsl() 1.0 9.0 1.0 3.1 9.5

CSS 语法

hsl(hue, saturation, lightness)
值 描述
hue 定义色轮上的度数（从 0 到 360）- 0（或 360）为红色，120 为绿色，240 为蓝色。
saturation 定义饱和度 - 0％ 是灰度，而 100％ 是全彩色（完全饱和）。
lightness 定义亮度 - 0％ 是黑色、50％ 为正常、100％ 是白色。