hwb()函数必须严格按色相、白度%、黑度%顺序书写，用空格分隔且%不可省；白度+黑度≤100%，不支持alpha，函数名全小写，浏览器兼容性及构建工具处理不当易导致静默失效。
hwb() 函数写法必须严格按顺序和格式
浏览器只认 hwb(200 10% 20%) 这种写法：色相（数字，单位可省）、白度百分比、黑度百分比，三者用空格分隔，缺一不可，% 不能省。写成 hwb(200, 10%, 20%) 或 hwb(200 10 20) 会整条声明静默失效——DevTools 里显示为划掉，但控制台不报错。
白度 + 黑度之和不能超过 100%，否则声明直接丢弃。比如 hwb(0 60% 50%) 是非法的（和为 110%），Chrome 不警告，Safari 可能渲染成透明。
函数名必须全小写：hwb()，写成 HWB() 或 hwB() 同样被忽略。
hwb() 不支持 alpha 通道，透明得另想办法
hwb(0 0% 0% / 0.5) 是无效语法，现代浏览器（Chrome 101+、Firefox 111+、Safari 16.4+）已支持带 / 的 alpha 写法，但实测中仍有不少环境（尤其 CI 构建或旧版 PostCSS 插件）会把它当错误值跳过。稳妥做法是：
立即学习“前端免费学习笔记（深入）”；
- 用外层
opacity控制整体透明度（注意会作用于子元素） - 或套一层
rgba()，例如background: rgba(from hwb(0 0% 0%), 0.5)（需确认构建工具支持from语法） - 更通用的降级方案：在
hwb()前声明rgb()或hsl()值，让不支持的浏览器回退
构建工具常把 hwb() 当普通字符串处理
PostCSS 默认不解析 hwb()，原样输出后低版本浏览器看到未知函数就跳过整条规则。Sass/Less 若未启用对应插件（如 postcss-color-hwb），也会编译失败或静默丢弃。
验证是否生效最直接的方式：
- 打开 DevTools → Elements → 找到对应样式 → 看声明是否被划掉
- 在 Console 中执行
getComputedStyle(document.body).backgroundColor，若返回rgb(...)而非原始hwb(...)，说明已被转义或 fallback 生效 - 检查构建产物 CSS 文件里是否还保留着
hwb()字样；若被删了或变成空值，大概率是插件没配对
hwb() 和 hsl() 的调色直觉完全不同
同一视觉效果，hwb() 和 hsl() 的参数没有线性换算关系。比如浅蓝背景：
-
hwb(240 80% 5%)表达的是“蓝 + 大量白 + 少量黑”，结果干净、明快、不发灰 - 等效的
hsl(240 20% 90%)却容易偏青或失饱和，因为 HSL 的亮度提升会同时稀释饱和度
做同色系渐变时，hwb(240 70% 5%) → hwb(240 50% 15%) → hwb(240 20% 40%) 比手动调 hsl() 的 lightness 更可控——白度/黑度变化时色相稳定性明显更好，尤其适合 UI 主题中的深浅模式切换。
真正容易被忽略的是：HWB 的“纯色”基准是 hwb(X 0% 0%)，不是中性灰；hwb(0 0% 0%) 是红，不是黑，也不是灰。这点和 RGB/HSL 都不同，调灰阶得靠组合白+黑，比如 hwb(0 50% 50%)。
