热门颜色专题

莫兰迪色

莫兰迪色不是某一个固定色值,而是一整类低饱和、偏灰、克制的颜色体系。它很适合需要温和感、生活感和高级留白的页面,但最怕层级太浅。 这页会把色值、场景建议、常见误区和继续处理工具放在一起,方便直接查阅和落地。

HEX #A8B3A5RGB rgb(168, 179, 165)HSL hsl(107, 9%, 67%)
视觉印象低饱和、克制、编辑感

这类颜色更容易在第一眼传达出的整体气质,可以帮助你快速判断是否适合当前页面方向。

适合场景内容站背景、生活方式品牌、家居专题、柔和视觉体系

优先在这些位置使用,会比把同一个颜色铺满整页更稳,也更容易形成清晰层级。

使用提醒先看角色,再看浓度

低饱和不等于低对比,莫兰迪色一旦文字、边框和背景都偏浅,页面会显得像没做完。

基础色值

如果你需要先和设计稿、CSS 或组件变量对齐,可以直接从这三种写法开始。

HEX
#A8B3A5
RGB
rgb(168, 179, 165)
HSL
hsl(107, 9%, 67%)

先看结论

如果你现在只想快速判断这类颜色值不值得继续深入,可以先看这几条。

  • 莫兰迪色更像一套低饱和体系,而不是单个颜色。
  • 它适合背景、容器、专题氛围和品牌调性,不适合承担所有强动作色。
  • 真正成熟的莫兰迪页面,最重要的不是颜色够灰,而是层级够清楚。

莫兰迪色到底是什么气质

莫兰迪色通常指低饱和、带灰感、偏柔和的一组颜色体系。它的特点不是鲜艳,而是克制、安静和带一点生活感、编辑感。

这种气质很适合内容站、生活方式品牌、家居、美学类专题和希望减少视觉攻击性的产品页面。

莫兰迪色在网页里更适合怎么用

最适合用在背景、卡片底色、专题首屏、插图辅助区和浅色品牌体系中。它能够让页面比纯白更有情绪温度,又不会像高饱和颜色那样抢走内容重点。

如果你的网站本身要承载很多文字和模块,莫兰迪色更适合做氛围层,而不是直接拿来做所有按钮和状态色。

  • 适合背景、卡片、封面区和内容型品牌视觉。
  • 适合和深灰、棕灰、米白、低饱和蓝绿搭配。
  • 适合承担氛围和品牌感,不适合把所有交互重点都做成淡色。

低饱和页面最容易踩的坑

最常见的问题是把‘柔和’做成‘发虚’。背景浅、边框浅、文字也浅时,页面虽然很安静,但用户会读得很累,也很难找到重点动作。

另一个问题是缺少真正的强调色。莫兰迪色页面如果没有一到两个更明确的深色或主色支点,最后会像一整页停留在同一层级。

  • 莫兰迪色页面一定要准备清晰的正文色和边框色。
  • 低饱和背景越多,越需要一个明确的动作强调色。
  • 上线前尤其要检查浅底上的说明文字是否真的能通过对比度。

适合继续搭配的颜色工具

确定方向后,可以直接从这些工具继续做取色、扩色板、配色和可读性检查。

颜色工具可使用

CSS 变量主题映射器

把品牌主色映射成 CSS 变量主题,输出原始色板、accent / surface / text / border 等语义变量。

css变量主题映射器css theme variables
颜色工具可使用

颜色 Token 命名生成器

为品牌色、中性色和状态色生成统一的 Token 命名,输出 CSS 变量、Design Token JSON 和 JS 常量示例。

颜色token命名生成器design token命名
颜色工具可使用

品牌色板生成器

输入品牌主色后自动生成 50-900 色板层级、CSS 变量和设计系统常用 token。

品牌色板生成器品牌色板
颜色工具可使用

色轮工具

基于主色生成互补色、邻近色、三角色等配色方案,实时输出 HEX、HSL 和 CSS 变量。

色轮工具color wheel
颜色工具可使用

对比度检测

检测前景色与背景色的可读性,输出 WCAG 对比度结果。

对比度检测wcag color contrast

相关知识

如果你还想继续补基础概念、网页配色和对比度规则,可以继续往下看。

常见问题

把高频疑问集中回答,方便快速查找。

莫兰迪色适合做工具站吗?

可以,但更适合内容感、品牌感或编辑感较强的工具站。如果是高频操作、强效率导向的后台工具,仍然建议配更稳定的深灰和强调色体系。

莫兰迪色为什么有时会显得像没做完?

通常是因为背景、卡片、边框和文字的层差太小,页面只有氛围,没有真正清晰的结构和重点。

莫兰迪色最稳的搭配方式是什么?

深灰、棕灰、米白、低饱和蓝绿都很稳。关键不是堆更多灰色,而是让每一层颜色都有明确职责。

继续浏览其它热门颜色

如果你在比较不同主色方向,可以继续看这组高频颜色专题。