HWB语法为hwb(h w b)，参数依次是色相（0–360deg或0–1turn）、白度（0%–100%）、黑度（0%–100%），且w+b≤1；色相无单位时默认为turn，需显式写deg才表示角度。
HWB语法怎么写，参数范围是什么
直接用 hwb() 函数，三个参数依次是色相（h）、白度（w）、黑度（b），单位支持无单位数值（0–1）或百分比（0%–100%）：hwb(120 20% 10%)、hwb(0.333 0.2 0.1) 都合法。注意：色相不带单位时默认是“圈”（turn），不是度（deg）——hwb(0.5 0% 0%) 是绿色，不是 hwb(180 0% 0%)；如果想用度，必须显式写 deg：hwb(180deg 0% 0%)。
为什么写了hwb()却没生效
常见原因有三个：
- 浏览器不支持：Chrome ≥ 119、Firefox ≥ 120、Safari ≥ 17.4 才原生支持；旧版 Safari（
- 参数超出范围：白度+黑度之和不能超过 100%（或 1），否则整个声明无效，回退到继承色或初始值
- 被其他规则覆盖：
hwb()是普通颜色值，优先级不高于rgb()或#fff，检查 computed 样式里是否被后续规则覆盖
hwb() 和 hsl() 的实际区别在哪
核心差异在“调色逻辑”：
-
hsl()调亮度靠lightness，但高饱和度下亮/暗容易失真（比如hsl(0, 100%, 95%)是极浅红，但视觉上发灰） -
hwb()用白度+黑度混合，更接近颜料调色直觉：hwb(0 30% 0%)= 红色 + 30% 白 → 粉红；hwb(0 0% 20%)= 红色 + 20% 黑 → 暗红；中间过渡更自然 - 渲染结果不等价：同一组 H 值，
hwb(H 0% 0%)≈hsl(H 100% 50%)，但 W/B 非零时二者 RGB 输出不同，不能简单替换
能不能用 CSS 变量动态控制 HWB 参数
可以，但有限制：
立即学习“前端免费学习笔记（深入）”；
- 支持变量插值：
--h: 120; --w: 20%; --b: 10%; color: hwb(var(--h) var(--w) var(--b)); - 不支持在
calc()里运算后传入：hwb(calc(var(--h) + 10) ...)会报错，因为hwb()不接受表达式作为参数 - 无法用
color-mix()直接混合两个hwb()值：必须先转成rgb()或指定色彩空间（如in srgb）
真正难的是反向推导——浏览器渲染出的 rgb() 值无法通过 CSS 提取，想做实时预览或调试，必须用 JS 调用 hwb2rgb() 手动转换。
