CSS 中的 hwb() 函数用于使用红、绿、蓝颜色通道定义颜色,根据这些颜色通道的色调、白度和黑度分量。它允许您通过指定这三种基色中每种颜色的强度来指定颜色。
要添加颜色透明度,可以将可选的 alpha 分量传递给 hwb() 函数。
可能的值
hwb() 函数的函数符号为 hwb(H W B[ / A])。
H:可以包含表示色调角度的任一格式:
<number>:0 到 255 之间的任何数字。
<angle>:0deg 到 360deg 之间的任何值。
keyword none
W:可以包含表示白度的任一格式:
<percentage>:指定要混合的白色量。可以具有 0%(无白度)和 100%(全白度)之间的任意值。
keyword none
B:可以包含表示黑度的任一格式:
<percentage>:指定黑色的量混合。可以是 0%(无黑度)和 100%(全黑度)之间的任何值。
keyword none
A:表示颜色的透明度。它是一个可选值。
<alpha-value>:0 到 1 之间的任何数字,其中 1 对应于完全不透明,0 对应于完全透明。
keyword none
红、绿、蓝分量的值为在序列化中四舍五入,因为函数符号将其序列化为 sRGB。
语法
hwb(154 25% 50%) | hwb(154deg, 25%, 50%) | hwb(154 25% 50% / 0.5)
CSS hwb(): 使用 conic-gradient()
以下是显示 hwb() 函数在 conic-gradient() 函数中的用法的示例:
<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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29