不能用hwb轻松调配莫兰迪色系——它没有saturation参数，所谓“低饱和”只能靠white+black非线性压制，无法精准控制5%–12%饱和度区间；唯有hsl()配合calc()和自定义属性才能程序化生成统一灰感的莫兰迪变体。
不能用 HWB 轻松调配莫兰迪色系——它压根不支持“低饱和度”这个维度的独立控制。
HWB 没有 saturation 参数，所谓“低饱和”是 white + black 共同压制的结果
HWB 的 hwb() 函数只有三个参数：hue、white、black，没有类似 HSL 中的 saturation。莫兰迪色要求的「5%–12% 饱和度」在 HWB 里无法直接表达，只能靠提高 white 或 black 来稀释色相强度，但这种稀释是非线性的、不可预测的：比如 hwb(200 70% 15%) 和 hwb(200 65% 20%) 视觉上可能一个偏灰蓝、一个偏青灰，根本没法卡准“饱和度区间”。
常见错误是以为 hwb(200 80% 10%) ≈ hsl(200 10% 75%)，实际前者更“粉气”，后者更“沉稳”，因为 HWB 的白度主导明度感知，而 HSL 的 lightness 会同时拖拽饱和度视觉表现。
想批量生成莫兰迪变体？hsl() + calc() 是唯一可靠路径
真正能程序化生成莫兰迪色系的，只有 hsl() 配合 CSS 自定义属性与 calc()：
-
--h: 200;固定色相锚点 -
--s: 10;控制饱和度（单位为数字，避免 % 在 calc 中出错） -
--l: 75;控制明度 color: hsl(calc(var(--h)), calc(var(--s) * 1%), calc(var(--l) * 1%));
这样你就能用 JS 或构建时脚本批量生成 --morandi-blue-light、--morandi-blue-dark 等变量，且每种都严格落在 s: 5–12%、l: 65–82% 区间内。HWB 做不到这点——它连变量拆解都不支持，hwb(var(--hwb-triple)) 直接无效。
HWB 真正适合的场景：同色系明暗渐变，不是莫兰迪配色
如果你的目标是做卡片背景从浅蓝到深蓝的平滑过渡，hwb(200 90% 5%) → hwb(200 10% 40%) 确实比 HSL 更直观、更少发灰；但一旦你要让蓝、绿、粉三色都保持统一的“莫兰迪灰感”，就必须统一用 hsl(h, 8%, 76%) 这类写法——因为只有 HSL 的 s 才是跨色相可比的饱和度标尺。
容易被忽略的一点：莫兰迪色系的“灰”是有色相锚点的灰，不是无色相的纯灰。HWB 的 white/black 叠加方式会让不同 hue 的“灰化程度”失衡，比如 hwb(30 70% 15%)（暖棕）和 hwb(210 70% 15%)（冷蓝）放一起，前者显脏、后者显亮，破坏统一性。
别被“HWB 更贴近调色直觉”的说法带偏——它的直觉只适用于单色系明暗推演。真要落地莫兰迪系统，hsl() 不是备选，是刚需。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
