这类颜色更容易在第一眼传达出的整体气质,可以帮助你快速判断是否适合当前页面方向。
热门颜色专题
莫兰迪色
莫兰迪色不是某一个固定色值,而是一整类低饱和、偏灰、克制的颜色体系。它很适合需要温和感、生活感和高级留白的页面,但最怕层级太浅。 这页会把色值、场景建议、常见误区和继续处理工具放在一起,方便直接查阅和落地。
优先在这些位置使用,会比把同一个颜色铺满整页更稳,也更容易形成清晰层级。
低饱和不等于低对比,莫兰迪色一旦文字、边框和背景都偏浅,页面会显得像没做完。
基础色值
如果你需要先和设计稿、CSS 或组件变量对齐,可以直接从这三种写法开始。
- HEX
- #A8B3A5
- RGB
- rgb(168, 179, 165)
- HSL
- hsl(107, 9%, 67%)
先看结论
如果你现在只想快速判断这类颜色值不值得继续深入,可以先看这几条。
- 莫兰迪色更像一套低饱和体系,而不是单个颜色。
- 它适合背景、容器、专题氛围和品牌调性,不适合承担所有强动作色。
- 真正成熟的莫兰迪页面,最重要的不是颜色够灰,而是层级够清楚。
莫兰迪色到底是什么气质
莫兰迪色通常指低饱和、带灰感、偏柔和的一组颜色体系。它的特点不是鲜艳,而是克制、安静和带一点生活感、编辑感。
这种气质很适合内容站、生活方式品牌、家居、美学类专题和希望减少视觉攻击性的产品页面。
莫兰迪色在网页里更适合怎么用
最适合用在背景、卡片底色、专题首屏、插图辅助区和浅色品牌体系中。它能够让页面比纯白更有情绪温度,又不会像高饱和颜色那样抢走内容重点。
如果你的网站本身要承载很多文字和模块,莫兰迪色更适合做氛围层,而不是直接拿来做所有按钮和状态色。
- 适合背景、卡片、封面区和内容型品牌视觉。
- 适合和深灰、棕灰、米白、低饱和蓝绿搭配。
- 适合承担氛围和品牌感,不适合把所有交互重点都做成淡色。
低饱和页面最容易踩的坑
最常见的问题是把‘柔和’做成‘发虚’。背景浅、边框浅、文字也浅时,页面虽然很安静,但用户会读得很累,也很难找到重点动作。
另一个问题是缺少真正的强调色。莫兰迪色页面如果没有一到两个更明确的深色或主色支点,最后会像一整页停留在同一层级。
- 莫兰迪色页面一定要准备清晰的正文色和边框色。
- 低饱和背景越多,越需要一个明确的动作强调色。
- 上线前尤其要检查浅底上的说明文字是否真的能通过对比度。
适合继续搭配的颜色工具
确定方向后,可以直接从这些工具继续做取色、扩色板、配色和可读性检查。
CSS 变量主题映射器
把品牌主色映射成 CSS 变量主题,输出原始色板、accent / surface / text / border 等语义变量。
颜色 Token 命名生成器
为品牌色、中性色和状态色生成统一的 Token 命名,输出 CSS 变量、Design Token JSON 和 JS 常量示例。
品牌色板生成器
输入品牌主色后自动生成 50-900 色板层级、CSS 变量和设计系统常用 token。
色轮工具
基于主色生成互补色、邻近色、三角色等配色方案,实时输出 HEX、HSL 和 CSS 变量。
对比度检测
检测前景色与背景色的可读性,输出 WCAG 对比度结果。
相关知识
如果你还想继续补基础概念、网页配色和对比度规则,可以继续往下看。
常见问题
把高频疑问集中回答,方便快速查找。
莫兰迪色适合做工具站吗?
可以,但更适合内容感、品牌感或编辑感较强的工具站。如果是高频操作、强效率导向的后台工具,仍然建议配更稳定的深灰和强调色体系。
莫兰迪色为什么有时会显得像没做完?
通常是因为背景、卡片、边框和文字的层差太小,页面只有氛围,没有真正清晰的结构和重点。
莫兰迪色最稳的搭配方式是什么?
深灰、棕灰、米白、低饱和蓝绿都很稳。关键不是堆更多灰色,而是让每一层颜色都有明确职责。
继续浏览其它热门颜色
如果你在比较不同主色方向,可以继续看这组高频颜色专题。