hwb()函数必须严格按色相、白度%、黑度%顺序书写，用空格分隔且百分号不可省；三者缺一、超范围（白+黑>100%）、含逗号、大小写错误或不支持浏览器均导致声明静默失效。
hwb() 函数必须严格按顺序写：色相 白度% 黑度%
浏览器只认 hwb(200 10% 20%) 这种格式，三个参数缺一不可，且必须用空格分隔、不能加逗号、百分号不能省。写成 hwb(200, 10%, 20%) 或 hwb(200 10 20) 会整条 CSS 声明被静默忽略——DevTools 里能看到它被划掉，但控制台不报错。
色相支持 0–360 数字（200 和 200deg 等价），负值或超限值会自动归一化；白度和黑度之和必须 ≤100%，否则声明直接丢弃（Safari 可能渲染为透明，Chrome 则完全不生效）。
-
hwb(0 0% 0%)是纯红，不是黑——HWB 的基准是纯色，不是灰度中性色 - 函数名必须全小写：
hwb()，写成HWB()或hwB()同样无效 - 不支持 alpha 通道：
hwb(0 0% 0% / 0.5)是非法语法，透明得靠opacity或外层rgba()
为什么 hwb() 比 hsl() 更适合快速调明暗
核心在语义直觉：hwb(240 80% 5%) 明确表达“以蓝色为底，加 80% 白、5% 黑”，结果就是干净明亮的浅蓝；而等效的 hsl(240 20% 90%) 需要同时平衡饱和度与亮度，稍调高亮度就容易发灰或偏青。
做 UI 浅色背景时，白度主导的调节路径更可控；做深色文字或按钮时，hwb(240 0% 30%) 直接表示“蓝 + 30% 黑”，比 hsl(240 100% 35%) 更稳定——后者调低亮度会连带压低饱和度，颜色变闷。
- 白度/黑度变化时，色相稳定性明显优于 HSL
- 淡粉色不用猜饱和度，“
hwb(350 70% 10%)” 就是红+大量白+少量黑 - 无法靠公式硬转 HSL → HWB，二者映射逻辑不同，别试图用 calc() 换算
浏览器兼容性与构建工具最容易踩的坑
hwb() 是 CSS Color Module Level 4 特性，Firefox 111+、Safari 16.4+、Chromium Edge 110+ 才启用；旧版 Chrome（如
- PostCSS 默认不解析
hwb()，原样输出后低版本浏览器看到未知函数就跳过整条规则 - Sass/Less 若未配置插件（如
postcss-color-hwb），会把hwb()当普通字符串处理，导致语法错误或降级失败 - 某些 CI/CD 环境或静态站点生成器（如 Hugo、Jekyll）默认禁用实验性 CSS 特性
- 验证方式：打开 DevTools → Elements → 找到对应样式 → 看声明是否被划掉；再切到 Console 输入
getComputedStyle(document.body).backgroundColor，如果返回rgb()而不是原始hwb()，说明已被转义或 fallback 生效
如何安全落地 hwb() 并保留降级能力
不能只写 hwb()，必须配回退色。现代写法推荐用层叠覆盖：
button {
background-color: #3b82f6; /* fallback for old browsers */
background-color: hwb(210 0% 20%); /* modern, slightly darker blue */
}
注意：回退色最好选视觉接近的 RGB/HEX，而不是随意写个 #000；若需透明效果，hwb() 本身不支持 alpha，得额外加 opacity 或套 rgba() 容器。
- 不要依赖构建工具自动插入 fallback——它可能插错位置或漏掉
- 避免在关键交互元素（如表单按钮、导航栏）上单独使用
hwb()而无降级 - 复杂系统里，建议把常用
hwb()组合封装成 CSS 变量，但变量值仍需带 fallback（变量本身不解决兼容性）
真正麻烦的不是语法本身，而是兼容性兜底路径是否覆盖了所有构建环节和用户环境。一个被 PostCSS 吃掉的 hwb()，和一个没写 fallback 的声明，在生产环境里效果一样：用户看到的是意外的默认色。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
