CSS 函数 - hwb()_CSS 菜鸟教程

CSS 中的 hwb（） 函数用于根据这些颜色通道的色调、白度和黑度分量，使用红色、绿色和蓝色通道定义颜色。它允许您通过指定这三种原色中每一种的强度来指定颜色。

要添加颜色透明度，可以将可选的 alpha 组件传递给 hwb（） 函数。

可能的值

hwb（） 函数表示法是 hwb（H W B[ / A]）。

H：可以包含表示色相角度的任一格式：
- a <number>：0 到 255 之间的任何数字。
- <angle>：0 度到 360 度之间的任何值。
- 关键词 none
W：可以包含代表白度的任一格式：
- <percentage>：指定要混合的白色量。可以具有 0%（无白度）和 100%（全白度）之间的任何值。
- 关键词 none
B：可以包含代表黑色的任一格式：
- <percentage>：指定要混合的黑色量。可以具有介于 0%（无黑）和 100%（全黑）之间的任何值。
- 关键词 none
A：代表颜色的透明度。它是一个可选值。
- <alpha-value>：0 到 1 之间的任何数字，其中 1 对应于完全不透明度，0 对应于完全透明。
- 关键词 none

红色、绿色和蓝色分量的值在序列化中四舍五入，因为函数表示法将其序列化为 sRGB。

语法

hwb(154 25% 50%) | hwb(154deg, 25%, 50%) | hwb(154 25% 50% / 0.5)

CSS hwb（） - 使用 conic-gradient（）

以下示例显示了 conic-gradient（）函数中 hwb（）函数的用法：

<html>
<head>
<style>
	 	div {
	 	 	 width: 100px;
	 	 	 height: 100px;
	 	 	 border: 2px solid black;
	 	 	 margin-bottom: 10px;
	 	}
	 	.hwb-conic{
	 	 	 background: conic-gradient(hwb(270 100% 50%),
	 	 	 	 	hwb(80 20% 20%),
	 	 	 	 	hwb(0 30% 10% / 0.7),
	 	 	 	 	hwb(194 0% 0%));
	 	}
	 	</style>
</head>
<body>
	 	<p>hwb() with conic-gradient()</p>
	 	<div class="hwb-conic"></div>
</body>
</html>

CSS hwb（） - 带或不带 alpha 值

以下示例显示了 hwb（）函数的用法，其中所有三个值都带有和不带有 alpha 值（数字值）：

<html>
<head>
<style>
	 	 	 div {
	 	 	 width: 100px;
	 	 	 height: 100px;
	 	 	 border: 2px solid black;
	 	 	 margin-bottom: 10px;
	 	}
	 	.color-hwb-1{
	 	 	 background-color: hwb(70deg 60% 80%);
	 	}
	 	.color-hwb-2{
	 	 	 background-color: hwb(80 20% 20%);
	 	}
	 	.color-hwb-alpha-number{
	 	 	 background-color: hwb(0 30% 10% / 0.7);
	 	}
	 	.color-hwb-alpha-percent{
	 	 	 background-color: hwb(194 0% 0% / 100%);
	 	}
	 	</style>
</head>
<body>
	 	<div class="color-hwb-1">hwb(70deg 60% 80%)</div>
	 	<div class="color-hwb-2">hwb(80 ,20%, 20%)</div>
	 	<div class="color-hwb-alpha-number">hwb(0 30% 10% / 0.7)</div>
	 	<div class="color-hwb-alpha-percent">hwb(194 0% 0% / 100%)</div>
</body>
</html>

<< CSS 函数 - lch() CSS 函数 - hsl() >>