hwb()调明暗更直观，因其从纯色出发加白变浅、加黑变深，避免hsl亮度升高时饱和度衰减；需严格按hue/whiteness%/blackness%顺序书写且和≤100%，并手动提供rgb()/hsl()降级。
直接用 hwb() 函数，靠调白度（w）和黑度（b）就能比 HSL 更直觉地控制明暗与灰度——但前提是浏览器支持、参数写对、且有降级方案，否则会静默失效。
为什么 hwb() 调明暗更直观？
HWB 的设计逻辑是“从纯色出发，加白变浅、加黑变深”，没有 HSL 那种亮度（L）升高时饱和度视觉衰减的问题。比如一个蓝色 hwb(240 0% 0%)，想让它变浅，只需增大白度：hwb(240 60% 0%)；想变灰，就同时加一点白和黑：hwb(240 40% 15%)。这种操作接近颜料调色，不需要反复试 L 和 S 的组合。
常见误区：
- 误以为
hwb(240 0% 0%)等价于hsl(240 100% 50%)—— 实际上前者是纯蓝，后者在多数浏览器中已略发灰 - 用
hwb(240 80% 30%)这类w + b > 100%的值，整条声明会被浏览器丢弃，不报错也不渲染 - 在旧版 Safari 或未启用 flag 的 Firefox 中写
hwb()，样式直接回退到继承色，毫无提示
怎么写才不会被浏览器静默丢弃？
必须严格按规范写：三个参数顺序固定为 hue、whiteness、blackness，后两者必须带 % 单位，且和 ≤ 100%，alpha 可选但需用 / 分隔。
正确写法示例：
color: hwb(240 20% 10%);background-color: hwb(0 70% 0% / 0.9);border-color: hwb(120 5% 5%);
典型错误写法：
-
hwb(240, 20%, 10%)（逗号 → 语法错误） -
hwb(240 20 10)（漏 % → Safari 16.4+ 拒绝解析） -
hwb(240 85% 20%)（85 + 20 > 100 → 整条声明无效）
如何安全落地，避免暗色下突然变黑或发灰？
HWB 没有内置 fallback 机制，浏览器不支持时不会自动退到最近的 RGB 值。必须手动提供降级声明：
- 永远把
rgb()或hsl()写在hwb()前面：color: rgb(100, 149, 237); color: hwb(210 15% 20%); - 不要依赖 CSS 变量做跨浏览器动态 HWB：
--w: 20%; color: hwb(var(--h) var(--w) var(--b));在部分构建工具（如旧版 PostCSS）里会被直接剔除 - 透明度别混用：
hwb(210 15% 20% / 0.8)是合法的，但rgba(hwb(...), 0.8)不合法，会报错
真正难的是调试：浏览器开发者工具里看到的 computed color 值仍是 hwb()，无法直接读出它渲染出的 RGB 值。要验证实际效果，得用 JS 调 hwb2rgb() 手动转换，或者在支持的浏览器里截图比对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
