View in EnglishAlways switch to English

hsl()

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.

* Some parts of this feature may have varying levels of support.

hsl() 函数标记根据其色相、饱和度和明度来表达sRGB 颜色。可选的alpha 成分代表了颜色的透明度。

备注：旧版的hsla() 语法是hsl() 的别称，接收相同的参数，行为也是相同的。

尝试一下

background: hsl(50 80% 40%);

background: hsl(150deg 30% 60%);

background: hsl(0.3turn 60% 45% / 0.7);

background: hsl(0 80% 50% / 25%);

<section>  <div></div></section>

#example-element {  min-width: 100%;  min-height: 100%;  padding: 10%;}

使用hsl() 来定义互补色可以用一个公式来完成，因为它们位于色环中同一直径上。如果一个颜色的色相度是θ，那么其互补色的色相角就是180deg - θ。

语法

css

hsl(120deg 75% 25%)hsl(120deg 75% 25% / 0.6)

此函数也接受旧版的语法，即所有的值都是用逗号分隔的。

值

函数标记：hsl(H S L[ / A])

H: <number>、<angle> 或者关键字none，代表色相角。关于此类型的更多细节可以参见<hue> 文档。
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([from<color>]?[<hue>|none][<percentage>|<number>|none][<percentage>|<number>|none][ /[<alpha-value>|none]]?)

<hue> =
<number>|
<angle>

<alpha-value> =
<number>|
<percentage>

示例

使用 hsl() 和 conic-gradient()

hsl() 函数和conic-gradient() 可以很好地配合使用，因为这两个都处理角度。

<div></div>

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></div><div></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></div><div></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%);}