hwb最可靠的能力是直观调整黑白度，但必须严格遵循hwb(hue white black / alpha)格式：色相（数字或deg）、白度和黑度均需带%，空格分隔，白+黑≤100%，且须提供rgb fallback。
HWB 的“直观调整黑白度”是它最可靠的能力，但必须严格按规则写，否则整条声明会被浏览器静默丢弃——不是报错，而是直接跳过。
hwb() 函数的参数顺序和单位不能错
浏览器只认 hwb(hue white black / alpha) 这一种格式：色相（数字或带 deg）、白度（必须带 %）、黑度（必须带 %），三者用空格分隔，不能加逗号，不能省略百分号。
-
hwb(210 15% 20%)✅ 合法 -
hwb(210, 15%, 20%)❌ 逗号分隔 → 整条失效 -
hwb(210 15 20)❌ 漏%→ Safari 16.4+ 直接拒绝，Chrome 可能容忍但不可靠 -
hwb(210 80% 30%)❌ 白+黑=110% > 100% → 声明被丢弃，回退到继承色
白度和黑度变化时视觉更线性、少发灰
HWB 的设计目标就是让“加白变浅、加黑变深”的操作更符合直觉。相比 HSL 的 lightness，HWB 在高白度/低黑度下不易出现饱和度塌陷或偏色。
- 想让一个蓝色背景更柔和？直接加大
white：hwb(210 70% 5%)→hwb(210 85% 5%) - 想压暗文字但不偏色？只增
black：hwb(210 0% 10%)→hwb(210 0% 30%) - 不要试图用
hwb(210 0% 0%)和hwb(210 100% 0%)当作“纯色→纯白”渐变——后者视觉上接近浅灰，不是物理白；真要过渡建议用color-mix()或两套预设值
必须手动提供 RGB fallback，否则旧环境直接失效
HWB 不是所有浏览器都支持：Firefox 仍需启用实验标志，旧版 Edge、部分构建工具链（如未配 postcss-color-hwb）会原样输出然后被忽略。DevTools 里看到样式被划掉，就说明 fallback 没起作用。
- 降级必须前置：
background-color: #e6f0ff;再写background-color: hwb(210 15% 20%); - 不能依赖构建工具自动转译——目前没有成熟 PostCSS 插件能安全把
hwb()转成等效 RGB；Sass 变量拼接如hwb($h $w $b)也得确认编译后是否保留原始语法 - 验证方式：用
getComputedStyle(el).backgroundColor查看返回值，如果是rgb(...)说明 fallback 生效或已被浏览器内部转义
真正容易被忽略的是白度与黑度的叠加效应：它们不是独立调节亮度的滑块，而是共同压制色相强度。哪怕只加 1% 黑，也可能让一个高白度的浅蓝显出微妙的灰调——这不是 bug，是模型本意。调的时候最好在真实设备上对比，别只盯着 DevTools 预览。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
