莫兰迪色系本质是低饱和（5%–20%）、中高明度（65%–82%）、带色相的灰调，用hsl()精确控制比rgb()更可靠；需避免纯灰无锚点、绕过CSS变量、忽略暗色模式适配。
直接用 CSS 写莫兰迪色系，关键不是找“标准色值”，而是控制 hsl() 里的饱和度（s）和明度（l）——饱和度压到 5%–20%，明度卡在 60%–85%，灰度自然就出来了。
怎么从 HSL 精确生成莫兰迪色
莫兰迪色本质是「降饱和 + 微调明度 + 混入灰阶」，hsl() 比 rgb() 或十六进制更可控：
-
h（色相）可照常选：比如hsl(200, 12%, 75%)是天蓝变体，hsl(340, 10%, 78%)是淡粉变体 -
s（饱和度）必须 ≤20%，超过就发艳；s: 0%是纯灰，s: 5%–12%最稳妥 -
l（明度）建议 65%–82%，低于 60% 显沉闷，高于 85% 容易露白底、失灰感 - 避免用
hsl(0, 0%, x%)直接写灰——它没色相锚点，和带色相的莫兰迪色搭在一起会“跳”
HTML 中配色比例怎么落地成 class
装修里说的「631 比例」在前端就是 CSS 类的权重分配，不是靠人眼估，而是靠命名约束：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 背景类统一用
bg-mo-soft，对应background-color: hsl(25, 8%, 78%)（燕麦灰） - 主色组件用
text-mo-main或bg-mo-main，比如hsl(25, 10%, 65%)（可可蛋奶，比背景深一度） - 点缀色严格限定在
accent-mo类，且只用于 icon、badge、hover 边框等小面积，值如hsl(320, 12%, 80%)（藕荷粉） - 所有类都加
!important风险高，改用更具体的选择器，比如.card .accent-mo
为什么 inline-style 或 JS 动态设色容易翻车
莫兰迪色对光照和相邻色极其敏感，JS 生成或内联写死会绕过 CSS 变量的统一调控：
立即学习“前端免费学习笔记（深入）”；
- 用
style="color: #b8a9a0"看似是莫兰迪灰褐，但实际渲染受显示器色域、浏览器 gamma 校正影响，可能偏青或发黄 - JS 计算
hsl(h, s, l)时若没做整数截断（如Math.round(s)），s出现12.73%这种值，部分旧版 Safari 会解析失败回退为黑色 - 暗色模式下，硬编码色值不会自动适配，而用
CSS @media (prefers-color-scheme: dark)+ 变量就能平滑过渡 - 推荐写法：
:root { --mo-bg: hsl(25, 8%, 78%); --mo-main: hsl(25, 10%, 65%); }<br>.bg-mo-soft { background-color: var(--mo-bg); }
真正难的不是取色，而是让所有组件在不同设备、不同缩放、不同文字大小下，依然保持灰度层级不塌——这意味着你得测试 em 缩放时 border 和 shadow 的相对粗细，也得确认 font-smooth 关闭后浅灰文字是否糊成一片。
