hwb()不能可靠生成灰阶颜色，因其w/b参数非线性映射明度且无饱和度控制；唯一可靠方案是hsl(0, 0%, x%)，确保色相与饱和度归零、明度独立可控。
hwb() 不能用来快速生成灰阶颜色——它不是为灰度设计的，强行用会出错或偏离预期。
为什么 hwb(0, X%, Y%) 不等于 hsl(0, 0%, Z%)
hwb() 的白度（W）和黑度（B）是独立拉伸参数，但它们不线性映射到明度（L）。比如 hwb(0, 50%, 0%) 看似“加一半白”，实际结果是粉红偏灰；hwb(0, 0%, 50%) 也不是纯深灰，而是偏棕的暗红。这是因为 HWB 在 RGB 空间中做的是非线性插值，W/B 并不等价于 HSL 的 L 值。
灰阶的本质是色相（H）和饱和度（S）同时归零，只靠明度（L）控制亮度。HWB 没有“饱和度”维度，无法锁定纯灰路径。
真正能可靠生成灰阶的只有 hsl() + 锁定 H/S
所有工程可用的灰阶必须满足：hsl(0, 0%, X%)。H 必须为 0（或任意固定值，但必须统一），S 必须为 0%，L 控制明暗。浏览器对这个组合的解析稳定、跨设备一致。
- 写成
--gray-30: hsl(0, 0%, 30%)，不是--gray-30: hwb(0, 70%, 0%) - 禁用
hwb(0, 100%, 0%)这类“全白”写法——它在部分 Safari 版本里会回退成透明或继承色 - 不要用
hwb(0, X%, X%)想凑中性灰：W+B≤1 是硬约束，且当 W=B 时，结果取决于 H 的微小浮动，不可控
如果你非要从 HWB 输入转灰阶，得先转成 RGB 再算 L
场景极少，比如你拿到设计师给的 hwb(240, 10%, 15%) 要提取其中的“灰度等效值”。这时不能直接取 W 或 B，必须：
- 先用 JS 调用
hwb2rgb()得到[r, g, b] - 再按标准 luminance 公式算：
0.2126 * r + 0.7152 * g + 0.0722 * b（sRGB 权重） - 最后映射到
hsl(0, 0%, Math.round(lum * 100) + '%')
注意：这一步必须在 JS 中完成，CSS 无法动态执行 HWB → L 转换。
真正容易被忽略的是：灰阶不是“看起来像灰就行”，而是要保证在不同设备、不同背景、不同对比度下语义一致。用 hwb() 生成的所谓“灰”，在 P3 屏幕上可能发蓝，在 OLED 上偏紫——根源在于它没锁死 a/b 轴。老老实实用 hsl(0, 0%, X%)，才是唯一可维护、可测试、可主题切换的方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
