hsl()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
hsl()
函数标记根据其色相、饱和度和明度来表达 sRGB 颜色。可选的 alpha 成分代表了颜色的透明度。
备注:
旧版的 hsla()
语法是 hsl()
的别称,接收相同的参数,行为也是相同的。
尝试一下
使用 hsl()
来定义互补色可以用一个公式来完成,因为它们位于色环中同一直径上。如果一个颜色的色相度是 θ
,那么其互补色的色相角就是 180deg - θ
。
语法
css
hsl(120deg 75% 25%)
hsl(120deg 75% 25% / 0.6)
此函数也接受旧版的语法,即所有的值都是用逗号分隔的。
值
函数标记:hsl(H S L[ / A])
H
S
-
<percentage>
或者关键字none
,代表饱和度。在这里,100%
是完全饱和,而0%
是完全不饱和(灰色)。 L
-
<percentage>
或者关键字none
,代表明度。在这里,100%
是白色,0%
是黑色,50%
是“正常”。 A
可选-
<alpha-value>
或者关键字none
,其中数字1
代表100%
(完全不透明)。
备注:
参见缺失颜色成分 以了解 none
的效果。
形式语法
<hsl()> =
<legacy-hsl-syntax> |
<modern-hsl-syntax>
<legacy-hsl-syntax> =
hsl( <hue> , <percentage> , <percentage> , <alpha-value>? )
<modern-hsl-syntax> =
hsl( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<hue> =
<number> |
<angle>
<alpha-value> =
<number> |
<percentage>
示例
使用 hsl() 和 conic-gradient()
hsl()
函数和 conic-gradient()
可以很好地配合使用,因为这两个都处理角度。
CSS
css
div {
width: 100px;
height: 100px;
background: conic-gradient(
hsl(360 100% 50%),
hsl(315 100% 50%),
hsl(270 100% 50%),
hsl(225 100% 50%),
hsl(180 100% 50%),
hsl(135 100% 50%),
hsl(90 100% 50%),
hsl(45 100% 50%),
hsl(0 100% 50%)
);
clip-path: circle(closest-side);
}
结果
旧版语法:逗号分隔值
由于历史原因,hsl()
函数接受所有值用逗号分隔的形式。
HTML
html
<div class="space-separated"></div>
<div class="comma-separated"></div>
CSS
css
div {
width: 100px;
height: 50px;
margin: 1rem;
}
div.space-separated {
background-color: hsl(0 100% 50% / 50%);
}
div.comma-separated {
background-color: hsl(0, 100%, 50%, 50%);
}
结果
旧版语法:hsla()
旧版的 hsla()
语法是 hsl()
的别称。
HTML
html
<div class="hsl"></div>
<div class="hsla"></div>
CSS
css
div {
width: 100px;
height: 50px;
margin: 1rem;
}
div.hsl {
background-color: hsl(0 100% 50% / 50%);
}
div.hsla {
background-color: hsla(0, 100%, 50%, 50%);
}
结果
规范
Specification |
---|
CSS Color Module Level 5 # relative-HSL |
CSS Color Module Level 4 # the-hsl-notation |
浏览器兼容性
BCD tables only load in the browser