hwb()函数必须严格按色相、白度%、黑度%顺序书写，用空格分隔且百分号不可省，三者缺一或超范围（白+黑>100%）即被浏览器静默忽略；不支持alpha、大小写敏感、旧版浏览器（如Chrome<105、Firefox<96）无原生支持。
hwb() 函数怎么写才不会被浏览器直接忽略
浏览器只认严格格式的 hwb()：三个参数必须按 色相、白度%、黑度% 顺序，用空格分隔，不能加逗号，百分号不能省。比如 hwb(200 10% 20%) 合法，hwb(200, 10%, 20%) 或 hwb(200 10 20) 会整条声明静默失效——DevTools 里能看到它被划掉，但不会报错。
色相支持 0–360 范围，单位可省（200 和 200deg 等价），负值或超限值会自动归一化；白度和黑度之和必须 ≤100%，否则整条声明丢弃（Chrome 不警告，Safari 可能渲染为透明）。
-
hwb(0 0% 0%)是纯红，不是黑——HWB 的“基准色”是纯色，不是中性灰 - 不支持 alpha 通道，
hwb(0 0% 0% / 0.5)是无效语法，透明得靠opacity或外层rgba() - 函数名必须全小写：
hwb()，写成HWB()或hwB()也会被忽略
为什么 hwb() 在你本地预览时没效果
最常见原因是目标环境不支持——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() 和 hsl() 在实际调色时到底差在哪
核心区别不在数值，而在调色直觉和语义映射：
-
hsl(0 100% 50%)是红，hsl(0 100% 30%)是暗红——但“30% 亮度”不等于“加了 70% 黑”，视觉上饱和度也塌了 -
hwb(0 0% 30%)明确表达“红 + 30% 黑”，结果就是更沉稳的深红，白度/黑度变化时色相稳定性明显优于 HSL - 做浅色系（如 UI 背景）时，
hwb(240 80% 5%)比等效hsl(240 20% 90%)更易预测：前者白度主导，后者亮度拉高后容易发灰或偏青
HWB 不是 HSL 的替代品，而是补位——它适合快速生成同色系明暗变体、设计柔和过渡色、降低设计师与前端对颜色描述的认知落差。但复杂渐变或高饱和警示色，仍建议用 lch() 或 srgb 空间下的 color-mix()。
如何安全落地 hwb() 而不炸掉老用户界面
不能只写一行 hwb() 就完事。必须提供明确 fallback，且 fallback 逻辑要匹配语义：
- 优先用
rgb()或hsl()写等效色，而不是留空或靠浏览器默认色——比如color: #007bff; color: hwb(204 10% 20%);中的十六进制只是近似，不是精确转换 - 用 PostCSS 插件（如
postcss-color-hwb）自动注入 fallback，但注意它生成的是rgb()近似值，不是保真转换 - 若项目已用 CSS 自定义属性管理主题色，可这样组织：
body { --primary: rgb(0, 123, 255); --primary: hwb(204 10% 20%);}现代浏览器取第二行，老浏览器回退第一行
真正容易被忽略的点是：HWB 的「白度+黑度≤100%」限制在动态计算时极易越界。比如用 JS 拼接字符串生成 hwb(${h} ${w}% ${b}%)，若 w=60、b=50，整条失效——这种边界检查必须在运行时做，不能只靠开发时肉眼判断。
