hwb()

hwb() 函数表示法根据色相、白色度和黑色度在 sRGB 颜色空间中表达颜色。可选的 alpha 分量表示颜色的透明度。

试一试

语法

css

/* Absolute values */
hwb(194 0% 0%)
hwb(194 0% 0% / .5)

/* Relative values */
hwb(from green h w b / 0.5)
hwb(from #0000FF h calc(w + 30) b)
hwb(from lch(40% 70 240deg) h w calc(b - 30))

描述

此 sRGB 颜色空间中的颜色函数由一个 <hue> 角值、一个白色度值、一个黑色度值以及可选的表示颜色透明度的 alpha 值定义。

对应于特定色相的角度在 sRGB（由 hsl() 和 hwb() 使用）、CIELAB（由 lch() 使用）和 Oklab（由 oklch() 使用）颜色空间中有所不同。hwb() 与 hsl() 位于相同的颜色空间，因此具有相同的色相颜色角。有关更多详细信息和示例，请参阅 <hue> 参考页面，或者尝试更改颜色拾取器上的色相以查看其实际效果。

当其白色度 (W) 和黑色度 (B) 值均为 0 时，hwb() 颜色是完全饱和的。对于任何色相值 H，hwb(H 0% 0%) 与 hsl(H 100% 50%) 是相同的颜色。增加白色度值会使颜色变亮。增加黑色度会使颜色变暗。

当黑色度和白色度都大于 0 时，颜色会变得柔和，趋向于灰色。当添加的白色度和黑色度之和等于或大于 100% 时——换句话说，如果 W + B >= 100%，则颜色函数定义了一种灰度阴影。当这两个值的总和大于 100%（W + B > 100%）时，灰色的白色度和黑色度值将有效地归一化为 W / (W + B) 和 B / (W + B)。

值

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

绝对值语法

hwb(H W B[ / A])

参数如下

H: 一个 <number>、一个 <angle> 或关键字 none（在此情况下等效于 0deg），表示颜色的 <hue> 角。
W: 一个 <percentage>，表示颜色的白色程度，或关键字 none（在此情况下等效于 0%）。0% 表示没有白色。如果 B 为 0，则 100% 表示完全白色，否则 W 和 B 值都会被标准化。
B: 一个 <percentage>，表示颜色的黑色程度，或关键字 none（在此情况下等效于 0%）。0% 表示没有黑色。如果 W 为 0，则 100% 表示完全黑色，否则 W 和 B 值都会被标准化。
A 可选: 一个 <alpha-value>，表示颜色的 alpha 通道值，其中数字 0 对应于 0%（完全透明），1 对应于 100%（完全不透明）。此外，关键字 none 可用于显式指定没有 alpha 通道。如果未显式指定 A 通道值，则默认为 100%。如果包含，则该值前面带有斜杠 (/)。

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

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

相对值语法

hwb(from <color> H W B[ / A])

参数如下

from <color>: 在定义相对颜色时，始终包含关键字 from，后跟一个 <color> 值，表示**原色**。这是相对颜色所基于的原始颜色。原色可以是任何有效的 <color> 语法，包括另一个相对颜色。
H: 一个 <number>、一个 <angle> 或关键字 none（在此情况下等效于 0deg），表示输出颜色的 <hue> 角。
W: 一个 <percentage>，表示颜色的白色程度，或关键字 none（在此情况下等效于 0%）。0% 表示没有白色。如果 B 为 0，则 100% 表示完全白色，否则 W 和 B 值都会被标准化。
B: 一个 <percentage>，表示颜色的黑色程度，或关键字 none（在此情况下等效于 0%）。0% 表示没有黑色。如果 W 为 0，则 100% 表示完全黑色，否则 W 和 B 值都会被标准化。
A 可选: 一个 <alpha-value>，表示输出颜色的 alpha 通道值，其中数字 0 对应于 0%（完全透明），1 对应于 100%（完全不透明）。此外，关键字 none 可用于显式指定没有 alpha 通道。如果未显式指定 A 通道值，则默认为原色的 alpha 通道值。如果包含，则该值前面带有斜杠 (/)。

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

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

在 hwb() 函数中使用相对颜色语法时，浏览器会将原色转换为等效的 HWB 颜色（如果尚未指定为 HWB 颜色）。颜色定义为三个不同的颜色通道值——h（色调）、w（白色）和 b（黑色）——以及一个 alpha 通道值 (alpha)。这些通道值在函数内部可用，可在定义输出颜色通道值时使用。

h 通道值解析为介于 0 和 360（含）之间的 <number>。
w 和 b 通道分别解析为介于 0 和 100（含）之间的 <number>。
alpha 通道解析为介于 0 和 1（含）之间的 <number>。

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

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

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

css

hwb(from hsl(0 100% 50%) h w b)

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

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

css

hwb(from hsl(0 100% 50%) 240 52% 12%)

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

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

css

hwb(from hsl(0 100% 50%) h 30% b)

此示例

将原色 (hsl(0 100% 50%)) 转换为 hwb() 等效项 (hwb(0 0% 0%))。
将输出颜色的 H 和 B 通道值设置为原色 hwb() 等效项的 H 和 B 通道值——这些值分别为 0 和 0%。
将输出颜色的 W 通道值设置为一个不基于原色的新值：30%。

最终输出颜色等效于 sRGB 色彩空间中的 hwb(0 30% 0%)——color(srgb 1 0.3 0.3)。

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

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

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

css

hwb(from hsl(0 100% 50% / 0.8) h w b / alpha)
/* Computed output color: color(srgb 1 0 0 / 0.8) */

hwb(from hsl(0 100% 50% / 0.8) h w b / 0.5)
/* Computed output color: color(srgb 1 0 0 / 0.5) */

在以下示例中，hsl() 原色再次转换为 hwb() 表示形式——hwb(0 0% 0%)。将 calc() 计算应用于 H、W、B 和 A 值，最终输出颜色等效于 sRGB 色彩空间中的 hwb(120 25% 10% / 0.9：color(srgb 0.25 0.9 0.25 / 0.9)。

css

hwb(from hsl(0 100% 50%) calc(h + 120) calc(w + 25) calc(b + 10) / calc(alpha - 0.1))

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

正式语法

<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<hue> = 
  <number>  |
  <angle>   

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

示例

在 hwb() 中使用相对颜色

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

这些变体使用相对颜色定义——将 --base-color 自定义属性传递到 hwb() 函数中，并且输出颜色的白色和黑色通道通过 calc() 函数修改以实现所需的效果。浅色变体向白色通道添加了 30%，深色变体向黑色通道添加了 30%。

<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, w and b 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 w + 0.3 instead of w + 30 */

#one {
  background-color: hwb(from var(--base-color) h calc(w + 0.3) b);
}

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

#three {
  background-color: hwb(from var(--base-color) h w calc(b + 0.3));
}

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

  #three {
    background-color: hwb(from var(--base-color) h w calc(b + 30%));
  }
}

结果

输出如下所示。

规范

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

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅

<color>：所有颜色表示法的列表
颜色选择器和转换工具
使用相对颜色
CSS 颜色模块
<hue>：表示颜色色调角的数据类型