hsl()

hsl() 函数表示法根据其色相、饱和度和亮度分量，在 sRGB 颜色空间中表达颜色。可选的alpha分量表示颜色的透明度。

试一试

使用hsl()定义互补色可以通过在色相值上加或减 180 度来实现，因为它们位于色轮的同一直径上。例如，如果颜色的色相角为10deg，则其互补色的色相角为190deg。

语法

css

/* Absolute values */
hsl(120deg 75% 25%)
hsl(120 75 25) /* deg and % units are optional */
hsl(120deg 75% 25% / 60%)
hsl(none 75% 25%)

/* Relative values */
hsl(from green h s l / 0.5)
hsl(from #0000FF h s calc(l + 20))
hsl(from rgb(200 0 0) calc(h + 30) s calc(l + 30))

hsla()函数也可以用来表达 sRGB 颜色。这是hsl()的别名，接受相同的参数。

注意：hsl()/hsla()也可以使用旧版形式编写，其中所有值都用逗号分隔，例如hsl(120, 75%, 25%)或hsla(120deg, 75%, 25%, 0.8)。在逗号分隔的旧版语法中不允许使用none值，色相值上的deg是可选的，饱和度和亮度值的%单位是必需的。

值

以下是绝对颜色和相对颜色允许值的描述。

绝对值语法

hsl(H S L[ / A])

参数如下

H: 一个 <number>、一个 <angle>或关键字none（在这种情况下等效于0deg），表示颜色的 <hue>角。

注意：对应于特定色相的角度在 sRGB（hsl()和 hwb()使用）、CIELAB（ lch()使用）和 Oklab（ oklch()使用）颜色空间中有所不同。有关更多详细信息和示例，请参阅 <hue>参考页面。
S: 一个 <percentage>或关键字none（在这种情况下等效于0%）。此值表示颜色的饱和度。这里100%是完全饱和的，而0%是完全不饱和的（灰色）。
L: 一个 <percentage>或关键字none（在这种情况下等效于0%）。此值表示颜色的亮度。这里100%是白色，0%是黑色，50%是“正常”。
A 可选: 一个表示颜色 alpha 通道值的<alpha-value>，其中数字 0 对应于 0%（完全透明），1 对应于 100%（完全不透明）。此外，可以使用关键字 none 明确指定没有 alpha 通道。如果未明确指定 A 通道值，则默认为 100%。如果包含，则值前面带有斜杠 (/)。

注意：有关 none 的影响，请参阅缺少颜色组件。

注意：绝对 hsl() 颜色被序列化为rgb() 值。红色、绿色和蓝色组件的值在序列化过程中可能会被四舍五入。

相对值语法

hsl(from <color> H S L[ / A])

参数如下

from <color>: 在定义相对颜色时，始终包含关键字 from，后跟一个表示原色的<color> 值。这是相对颜色所基于的原始颜色。原色可以是任何有效的<color> 语法，包括另一个相对颜色。
H: 一个<number>、一个<angle> 或关键字 none（在本例中相当于 0deg），表示输出颜色的<hue> 角。
S: 一个<percentage> 或关键字 none（在本例中相当于 0%）。这表示输出颜色的饱和度。这里 100% 是完全饱和的，而 0% 是完全不饱和的（灰色）。
L: 一个<percentage> 或关键字 none（在本例中相当于 0%）。这表示输出颜色的亮度。这里 100% 是白色，0% 是黑色，50% 是“正常”。
A 可选: 一个表示输出颜色 alpha 通道值的<alpha-value>，其中数字 0 对应于 0%（完全透明），1 对应于 100%（完全不透明）。此外，可以使用关键字 none 明确指定没有 alpha 通道。如果未明确指定 A 通道值，则默认为原色的 alpha 通道值。如果包含，则值前面带有斜杠 (/)。

注意：hsla() 别名也可用于输出相对颜色和指定原色。当使用 hsla() 输出相对颜色时，必须使用无逗号的现代语法。

注意：为了完全启用对可见颜色全光谱的表示，相对 hsl() 颜色函数的输出被序列化为 color(srgb)。这意味着通过HTMLElement.style 属性或CSSStyleDeclaration.getPropertyValue() 方法查询输出颜色值会将输出颜色作为color(srgb ...) 值返回。

定义相对颜色输出通道组件

在 hsl() 函数内部使用相对颜色语法时，浏览器会将原色转换为等效的 HSL 颜色（如果尚未将其指定为 HSL 颜色）。颜色定义为三个不同的颜色通道值——h（色相）、s（饱和度）和 l（亮度）——加上一个 alpha 通道值 (alpha)。这些通道值在函数内部可用，用于定义输出颜色通道值。

h 值解析为介于 0 和 360（含）之间的<number>，表示原色的<hue> 度数值。
s 和 l 值分别解析为介于 0 和 100（含）之间的 <number>，其中 100 等于 100%。
alpha 值解析为介于 0 和 1（含）之间的 <number>。

在定义相对颜色时，输出颜色的不同通道可以用几种不同的方式表示。下面，我们将研究一些示例来说明这些。

在下面的前两个示例中，我们正在使用相对颜色语法。但是，第一个输出的颜色与原色相同，第二个输出的颜色根本不基于原色。它们并没有真正创建相对颜色！您不太可能在实际代码库中使用这些，并且可能会使用绝对颜色值代替。我们包含这些示例作为学习相对 hsl() 语法的起点。

让我们从原色 rgb(255 0 0)（相当于 hsl(0 100% 50%)）开始。以下函数输出的颜色与原色相同——它使用原色的 h、s 和 l 通道值 (0、100% 和 50%) 作为输出通道值。

css

hsl(from rgb(255 0 0) h s l)

此函数的输出颜色是 hsl(0 100% 50%) 的 sRGB color() 等效项：color(srgb 1 0 0)。

下一个函数对输出颜色的通道值使用绝对值，输出一个与原色无关的完全不同的颜色。

css

hsl(from rgb(255 0 0) 240 60% 70%)

在上述情况下，输出颜色是 hsl(240 60% 70%) 的 sRGB color() 等效项：color(srgb 0.52 0.52 0.88)。

以下函数创建了一个基于原色的相对颜色。

css

hsl(from rgb(255 0 0) h 30% 60%)

此示例

将原色 (rgb(255 0 0)) 转换为 hsl() 等效项 (hsl(0 100% 50%))。
将输出颜色的 H 通道值设置为原色 hsl() 等效项的 H 通道值——0。
将输出颜色的 S 和 L 通道值设置为不基于原色的新值：分别为 30% 和 60%。

最终输出颜色等效于 sRGB 颜色空间中的 hsl(0 30% 60%)——color(srgb 0.72 0.48 0.48)。

注意：如上所述，如果输出颜色使用与原色不同的颜色模型，则原色会在后台转换为与输出颜色相同的模型，以便能够以兼容的方式表示（即使用相同的通道）。

在本节中我们迄今看到的示例中，原色或输出颜色的 alpha 通道均未明确指定。当未指定输出颜色 alpha 通道时，它默认为与原色 alpha 通道相同的值。当原色 alpha 通道未指定（并且它不是相对颜色）时，它默认为 1。因此，上述示例的原色和输出 alpha 通道值均为 1。

让我们来看一些指定原色和输出 alpha 通道值的示例。第一个将输出 alpha 通道值指定为与原色 alpha 通道值相同，而第二个指定了一个不同的输出 alpha 通道值，与原色 alpha 通道值无关。

css

hsl(from rgb(255 0 0 / 0.8) h s l / alpha)
/* Computed output color: color(srgb 1 0 0 / 0.8) */

hsl(from rgb(255 0 0 / 0.8) h s l / 0.5)
/* Computed output color: color(srgb 1 0 0 / 0.5) */

在以下示例中，rgb() 原色再次转换为 hsl() 表示——hsl(0 100% 50% / 0.8)。calc() 计算应用于 H、S、L 和 A 值，最终输出颜色等效于 sRGB 颜色空间中的 hsl(60 80% 30% / 0.7)：color(srgb 0.72 0.72 0.08 / 0.7)。

css

hsl(from rgb(255 0 0 / 0.8) calc(h + 60) calc(s - 20) calc(l - 10) / calc(alpha - 0.1))

注意：因为原色通道值被解析为 <number> 值，所以在计算中使用它们时必须向它们添加数字，即使在通道通常接受 <percentage>、<angle> 或其他值类型的情况下也是如此。例如，将 <percentage> 添加到 <number> 不起作用。

正式语法

<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() 配合使用效果很好，因为两者都处理角度。

<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() 结合使用

此示例使用不同的背景颜色为三个<div> 元素设置样式。中间一个使用未修改的 --base-color，而左右两个分别使用该 --base-color 的亮化和暗化变体。

这些变体使用相对颜色定义——--base-color自定义属性传递到 hsl() 函数中，输出颜色的亮度通道通过 calc() 函数修改以达到所需的效果，而色相和饱和度保持不变。亮化颜色在亮度通道中添加了 20%，暗化颜色从中减去了 20%。

<div id="container">
  <div class="item" id="one"></div>
  <div class="item" id="two"></div>
  <div class="item" id="three"></div>
</div>

CSS

#container {
  display: flex;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
}

.item {
  flex: 1;
  margin: 20px;
}

css

:root {
  --base-color: orange;
}

/* As per the spec, s and l values should resolve to a number between 0-100
   However, Chrome 121+ incorrectly resolves them to numbers between 0-1
   hence currently using calculations like l + 0.2 instead of l + 20 */

#one {
  background-color: hsl(from var(--base-color) h s calc(l + 0.2));
}

#two {
  background-color: var(--base-color);
}

#three {
  background-color: hsl(from var(--base-color) h s calc(l - 0.2));
}

/* Use @supports to add in support for old syntax that requires % units to
   be specified in lightness calculations. This is required for
   Safari 16.4+ */
@supports (color: hsl(from red h s calc(l - 20%))) {
  #one {
    background-color: hsl(from var(--base-color) h s calc(l + 20%));
  }

  #three {
    background-color: hsl(from var(--base-color) h s calc(l - 20%));
  }
}

结果

输出如下

旧版语法：逗号分隔值

出于向后兼容性考虑，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%, 0.5);
}

结果

旧版语法与现代语法

此示例演示了 hsla() 语法是如何 hsl() 的别名；两者都支持使用现代语法和旧版（逗号分隔）语法。

HTML

html

<div class="modern">HSL</div>
<div class="legacy">HSL</div>
<div class="modernWithAlpha">HSL</div>
<div class="modernHSLA">HSLA</div>
<div class="legacyHSLA">HSLA</div>

CSS

css

div {
  width: 100px;
  min-height: 50px;
  font-family: sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}
body {
  display: flex;
  gap: 20px;
}

css

div.modern {
  background-color: hsl(90 80% 50%);
}

div.legacy {
  background-color: hsl(90, 80%, 50%);
}

div.modernWithAlpha {
  background-color: hsl(90 80% 50% / 50%);
}

div.modernHSLA {
  background-color: hsla(90 80% 50% / 50%);
}

div.legacyHSLA {
  background-color: hsla(90, 80%, 50%, 0.5);
}

结果

规范

规范
CSS 颜色模块级别 5 # relative-HSL
CSS 颜色模块级别 4 # the-hsl-notation

浏览器兼容性

BCD 表格仅在浏览器中加载