莫兰迪色是什么颜色?高级灰配色方案与色值大全

从莫兰迪的静物画说起,一组可以直接取用的色值,低饱和配色的三条硬约束,以及界面、海报、家居里的用法

很多人第一次听到莫兰迪色,是在口红色号或者家居布艺的详情页上。单看每一件都舒服,买回来几件凑到一起,就闷成一片。问题不在颜色本身。低饱和配色有个容易被忽略的前提,明度得拉开。

本文目录

一、莫兰迪色的由来与特点

乔治·莫兰迪(Giorgio Morandi,1890-1964)是意大利博洛尼亚人,一辈子基本没离开这座城市。他画的东西很单一,瓶罐、盒子、干花,还有窗外那片山坡,同一组静物能反复画上几十遍。

那种灰是两层原因叠出来的。一层在题材,陶罐、旧木盒、洗得发白的布,本来饱和度就低。另一层在画法,颜料一层层罩上去,表面结出薄薄的膜,相邻的颜色互相映着,边界就模糊了。他工作室的光线常年稳定,没有直射光,影子也是软的。

得说一句,「莫兰迪色」是设计圈后来叫开的说法,美术史里没有这个词。它指的是一类颜色,不是莫兰迪用过的某几个具体色号。

这类颜色的共同点

  • 饱和度低,多数落在 10 到 30 之间,掺了灰,颜色本身不发亮。
  • 明度集中在中段偏亮,纯黑和纯白基本不出现,最深的也就到陶棕那种程度。
  • 色相之间靠得近,一组莫兰迪色通常只隔二三十度,看过去像同一片光下的不同材质。

好处是不刺眼,铺大面积不累,多看几分钟也不会烦。麻烦也在这儿:颜色之间缺少天然的分界,层次只能靠明度和面积去撑。单品好看、凑一起发闷,就是这么来的。

二、常用莫兰迪色 HEX 色值表

下面这组是设计圈流通较广的近似取值。不同资料之间会差一两个色阶,做屏显够用,印前还是得打样。

色名HEXRGB常见用途
米灰#E8E4DD232 228 221页面底色、墙面
雾粉#D9C3C0217 195 192卡片底、包装
灰玫瑰#C4A8A4196 168 164强调块、插画
沙黄#D6CDB8214 205 184分区背景、标签底
苔绿#9CAE9A156 174 154次级背景、图标
灰蓝#96A8B6150 168 182主色、按钮底
灰紫#B0A2B4176 162 180状态标签、装饰
陶棕#A08F7C160 143 124标题替代黑、木作
这八个色按明度从高到低排过序。前四个偏亮,适合铺面积;后四个偏沉,适合压在结构和文字上。

三、低饱和配色的三个要点

  1. 明度差至少留 20 个百分点。灰蓝 #96A8B6 的明度约 65%,米灰 #E8E4DD 约 89%,差 24 个点,摆在一起有明确的前后关系。雾粉 #D9C3C0 是 80%,灰玫瑰 #C4A8A4 是 71%,只差 9 个点,做成两层卡片就糊成一片了。
  2. 留一处深色当锚点。整幅都是浅灰的时候,眼睛不知道该停在哪。标题、按钮、图标挑一个压深,其他继续浅,画面就有落点了。
  3. 色相别散开。莫兰迪色之间通常只隔二十到四十度,一旦混进一个正红或者正蓝,整组的和谐就断了。

三条里第一条最容易翻车。低饱和被当成低对比,是常见的误读,问题往往出在明度上,跟饱和度没关系。

四、UI、海报、家居的应用案例

界面

一个卡片式列表页可以这样配。底色 #E8E4DD,卡片 #FFFFFF,标题 #3A3733,正文 #5C5751,主按钮 #96A8B6。正文和底色的对比度约 5.6 比 1,过 AA 要求的 4.5。

灰蓝按钮上放白字不行。#96A8B6 配白字只有约 2.4 比 1,离 4.5 差得远。要么把字换成深色,要么把按钮压到 #5D7488,对比度才回到 4.9 左右。

海报

低饱和的海报容易发软,靠两样东西撑住:字号反差和留白。一整张灰调配一张照片,标题占到版面的三分之一,比再加三个颜色管用。

非要加色的话,加在最该被看到的那句文案上,面积控制在一成以内。

家居

莫兰迪色在家居里几乎是默认选项,因为涂料本身就带灰度,白墙刷上去也不是纯白。稳妥的搭配是墙面用米灰,布艺用雾粉或者苔绿,木作和金属件用陶棕,三者的明度天然拉开,不用额外找对比。

五、在莫兰迪色卡中一键取色

站内的莫兰迪色卡已经按主色系分好类,点开色块就能复制 HEX,省得一个个手动试。

想要成套的低饱和方案,可以翻配色表,按风格筛选能直接看到组合好的结果,比单挑一个颜色更接近实际用法。

取到的色值别直接当正文色。低饱和颜色的对比度普遍偏低,先跑一遍对比度再定,改起来比上线后返工便宜。

莫兰迪色不难用,难的是别把它当成一种安全的审美。低饱和的好处是耐看,代价是层次得让给明度和面积。选色的时候先把明度差算清楚,再决定哪一处压深,剩下的才是调色。