HWB语法中w和b必须带%单位，否则整条声明失效；h可省略deg，w/b取值范围为0%~100%，且w+b不能超100%，超出部分被截断。
HWB语法必须带单位，不能省略%
HWB颜色写法是hwb(h, w, b)，三个参数分别代表色相（hue）、白度（white）、黑度（black）。其中h可以是无单位数字（如120）或带deg（如120deg），但w和b**必须带%**——写成hwb(120, 50, 0)会失效，浏览器直接忽略整条声明。
常见错误现象：color: hwb(120, 50%, 0%);生效，而color: hwb(120, 50, 0);在DevTools里显示为无效（strike-through），最终回退到继承色或默认色。
-
w和b取值范围都是0% ~ 100%，且w + b不能超过100%（超出部分会被截断） - 色相
h支持turn单位（如0.33turn），但实际项目中用deg或无单位更稳妥 - 不支持
hwb()的老版本浏览器（如Chrome fallback
HWB与HSL的直观差异：白度/黑度 ≠ 饱和度/亮度
HWB不是HSL的“换皮”，它用白度（w）和黑度（b）共同控制明暗，而HSL靠单一l（lightness）参数。这意味着：
-
hwb(0, 0%, 0%)是纯红（类似hsl(0, 100%, 50%)），但hwb(0, 50%, 0%)是粉红（加白不加黑），hwb(0, 0%, 50%)是深红（加黑不加白） - 想得到同一色相下的浅色变体，HSL调高
l即可；HWB则要提高w、保持b低，且w + b越接近100%，颜色越灰 - HWB对“去饱和”更直接：增大
w和b之和（如hwb(120, 30%, 30%)），比HSL里同时降s和调l更符合直觉
HWB透明度写法：只支持斜杠语法，不支持逗号
带透明度的HWB必须用hwb(h w b / a)格式，a是0~1之间的数字。写成hwb(120, 50%, 0%, 0.5)会报错，整个声明失效。
立即学习“前端免费学习笔记（深入）”；
示例：
/* 正确 */ color: hwb(120 50% 0% / 0.8); background-color: hwb(0 0% 0% / 0.5); <p>/<em> 错误 —— 浏览器不识别 </em>/ color: hwb(120, 50%, 0%, 0.8); color: hwb(120 50% 0% 0.8);
注意：斜杠前后的空格可选，但/前后不能有逗号；a不支持百分比（50%无效），只认小数。
HWB兼容性现状：不能当主力，但可渐进增强
截至2026年7月，HWB已在Chrome 119+、Firefox 117+、Safari 16.4+原生支持，但Edge 118及更早版本仍不支持。生产环境用它，必须配fallback：
/* 安全写法 */
.element {
color: #00ff00; /* HEX fallback */
color: rgb(0, 255, 0); /* RGB fallback */
color: hwb(120 100% 0% / 1); /* 主力声明放最后 */
}容易被忽略的点：CSS自定义属性（var()）嵌入HWB时，每个参数必须独立包裹，不能把整个函数当变量值——hwb(var(--h), var(--w), var(--b))合法，hwb(var(--hwb-value))非法。
