莫兰迪色核心是低饱和（5%–12%）、中高明度（65%–82%）、带色相的灰，hsl()参数直对应这三维度，调s/l即可精准控制；rgb()三通道耦合，易失灰发脏。
为什么直接用 hsl() 调莫兰迪色比 rgb() 更稳
因为莫兰迪色的核心是「低饱和 + 中高明度 + 有锚点的灰」，hsl() 的三个参数刚好对应这三个维度，改 s 和 l 就能直击要害；而 rgb() 是三通道叠加，调一个值常牵动另两个，容易失灰、发脏或跳色。比如 rgb(180, 170, 190) 看似柔和，但其实饱和度已超 25%，离莫兰迪标准（s: 5%–12%）差了一截。
hsl() 里 s 和 l 的安全取值范围怎么卡
不是越低越“莫兰迪”，而是要守住两条线：
-
s压到5%–12%最稳妥：低于5%容易变成无色相的纯灰，和带色相的莫兰迪色并列时会“跳”；高于12%就开始显艳，尤其在浅背景上更明显 -
l控在65%–82%：低于65%显沉闷，像蒙了层旧布；高于82%则灰感被冲淡，底色一白就露馅 - 色相
h可照常选，比如hsl(200, 10%, 75%)是莫兰迪蓝，hsl(340, 8%, 78%)是莫兰迪粉——关键不在h值本身，而在它被低s和适中l“压住”了
常见踩坑：用 hsl(0, 0%, x%) 写灰色当莫兰迪基底
这是最隐蔽也最典型的错误。这种写法生成的是无色相的纯灰，和你其他 hsl(h, s, l) 莫兰迪色放一起时，视觉上完全不融合——它没“锚点”，就像合唱里突然冒出个清唱声部。正确做法是给灰色也带一点色相，比如 hsl(210, 2%, 75%)（带青灰调）或 hsl(30, 3%, 72%)（带暖灰调），让整个色组有统一的灰阶逻辑。
暗色模式下怎么保莫兰迪感不崩
很多团队只在亮色模式下调好莫兰迪色，切到暗色模式后直接变荧光——因为 l 值没重算。在深背景上，原 l: 75% 的颜色会显得过亮、失灰。建议：
- 暗色模式下把
l往下压 10–15 个百分点，比如亮色用hsl(200, 10%, 75%)，暗色就改用hsl(200, 10%, 62%) - 别偷懒复用同一套 CSS 变量，暗色模式必须单独定义
--morandi-blue-dark: hsl(200, 10%, 62%)这类变量 - 检查所有用到莫兰迪色的地方，包括边框、阴影、disabled 状态——这些地方最容易被忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
