hwb()函数需严格按色相（0–360，可省单位）、白度%、黑度%顺序书写，二者和≤100%，不支持alpha；失效主因是浏览器兼容性不足（Firefox≥111、Safari≥16.4）、拼写错误、构建工具未处理或缺失降级色。
hwb()函数怎么写才合法
浏览器只接受 hwb() 里三个参数按固定顺序：色相（deg 或无单位）、白度（百分比）、黑度（百分比），缺一不可，且不能超范围。比如 hwb(200 10% 20%) 合法，hwb(200, 10%, 20%)（带逗号）或 hwb(200 10 20)（缺%）会直接被忽略。
- 色相值支持 0–360 数字，单位可省略，但加
deg更明确；负值或 >360 会自动归一化（如-20等价于340） - 白度和黑度必须带
%，且二者之和不能超过 100%，否则整条声明失效（Chrome 会静默丢弃，不报错也不渲染） - 不支持 alpha 通道，想透明得额外写
opacity或套rgba()，hwb(180 0% 0% / 0.5)是无效写法
为什么hwb()在CSS里有时不生效
最常见原因是浏览器兼容性没兜住——hwb() 是 CSS Color Module Level 4 的特性，Firefox 直到 111 版本才支持，Safari 16.4 才开始支持，旧版 Edge（非 Chromium 内核）完全不认。用前务必查 caniuse 对应目标用户环境。
- 即使现代浏览器，如果启用了「减少动画」或某些实验性 flag，个别版本可能临时禁用该函数
- PostCSS 或构建工具（如 Sass）默认不解析
hwb()，会原样输出，导致低版本浏览器看到无法识别的值而回退失败 - DevTools 里能看到声明被划掉？先检查是否拼错成
hwB()或HWB()——CSS 函数名严格小写
hwb()和hsl()、rgb()的实际差异在哪
hwb() 的设计逻辑是“从白色出发，加黑加色”，更贴近调色直觉；而 hsl() 是基于亮度模型，rgb() 是设备发光模型。这导致同一组视觉颜色，数值映射完全不同，不能靠换算公式硬转。
- 纯灰阶在
hwb()里是hwb(0 50% 50%)这类白+黑组合，不是靠调色相；而在hsl()里是hsl(0 0% 50%) - 高饱和度浅色（比如浅粉）用
hwb()更简洁：hwb(350 70% 0%)比等效hsl(350 80% 85%)更易感知“白多、色重、无黑” - 性能上无差别，但部分低端 Android WebView 对
hwb()解析稍慢，动画中高频切换时可能微卡（实测差异在 1ms 内，一般感知不到）
如何安全地在项目里用hwb()
别裸写 hwb()，必须配降级。CSS 本身支持层叠覆盖，利用这点最轻量：
立即学习“前端免费学习笔记（深入）”；
button {
background-color: rgb(100, 180, 220);
background-color: hwb(195 15% 10%);
}
- 顺序不能反——后声明的生效，所以
hwb()必须写在rgb()或hsl()后面 - 不要指望
@supports (background-color: hwb(0 0% 0%))做条件加载，它在不支持的浏览器里直接不执行块内样式，反而更难调试 - 设计系统里若统一用
hwb()定义主色，记得同步导出对应rgb()值给 Sketch/Figma 插件用，它们目前不识别hwb()
真正麻烦的是跨团队协作时，有人改了 hwb() 却忘了更新降级色，结果灰度发布时一半用户看到色差——这种坑得靠 CI 脚本校验配对关系，不是加个注释就能防住的。
