很多人第一次听到莫兰迪色,是在口红色号或者家居布艺的详情页上。单看每一件都舒服,买回来几件凑到一起,就闷成一片。问题不在颜色本身。低饱和配色有个容易被忽略的前提,明度得拉开。
一、莫兰迪色的由来与特点
乔治·莫兰迪(Giorgio Morandi,1890-1964)是意大利博洛尼亚人,一辈子基本没离开这座城市。他画的东西很单一,瓶罐、盒子、干花,还有窗外那片山坡,同一组静物能反复画上几十遍。
那种灰是两层原因叠出来的。一层在题材,陶罐、旧木盒、洗得发白的布,本来饱和度就低。另一层在画法,颜料一层层罩上去,表面结出薄薄的膜,相邻的颜色互相映着,边界就模糊了。他工作室的光线常年稳定,没有直射光,影子也是软的。
得说一句,「莫兰迪色」是设计圈后来叫开的说法,美术史里没有这个词。它指的是一类颜色,不是莫兰迪用过的某几个具体色号。
这类颜色的共同点
- 饱和度低,多数落在 10 到 30 之间,掺了灰,颜色本身不发亮。
- 明度集中在中段偏亮,纯黑和纯白基本不出现,最深的也就到陶棕那种程度。
- 色相之间靠得近,一组莫兰迪色通常只隔二三十度,看过去像同一片光下的不同材质。
好处是不刺眼,铺大面积不累,多看几分钟也不会烦。麻烦也在这儿:颜色之间缺少天然的分界,层次只能靠明度和面积去撑。单品好看、凑一起发闷,就是这么来的。
二、常用莫兰迪色 HEX 色值表
下面这组是设计圈流通较广的近似取值。不同资料之间会差一两个色阶,做屏显够用,印前还是得打样。
| 色名 | HEX | RGB | 常见用途 |
|---|---|---|---|
| 米灰 | #E8E4DD | 232 228 221 | 页面底色、墙面 |
| 雾粉 | #D9C3C0 | 217 195 192 | 卡片底、包装 |
| 灰玫瑰 | #C4A8A4 | 196 168 164 | 强调块、插画 |
| 沙黄 | #D6CDB8 | 214 205 184 | 分区背景、标签底 |
| 苔绿 | #9CAE9A | 156 174 154 | 次级背景、图标 |
| 灰蓝 | #96A8B6 | 150 168 182 | 主色、按钮底 |
| 灰紫 | #B0A2B4 | 176 162 180 | 状态标签、装饰 |
| 陶棕 | #A08F7C | 160 143 124 | 标题替代黑、木作 |
三、低饱和配色的三个要点
- 明度差至少留 20 个百分点。灰蓝
#96A8B6的明度约 65%,米灰#E8E4DD约 89%,差 24 个点,摆在一起有明确的前后关系。雾粉#D9C3C0是 80%,灰玫瑰#C4A8A4是 71%,只差 9 个点,做成两层卡片就糊成一片了。 - 留一处深色当锚点。整幅都是浅灰的时候,眼睛不知道该停在哪。标题、按钮、图标挑一个压深,其他继续浅,画面就有落点了。
- 色相别散开。莫兰迪色之间通常只隔二十到四十度,一旦混进一个正红或者正蓝,整组的和谐就断了。
三条里第一条最容易翻车。低饱和被当成低对比,是常见的误读,问题往往出在明度上,跟饱和度没关系。
四、UI、海报、家居的应用案例
界面
一个卡片式列表页可以这样配。底色 #E8E4DD,卡片 #FFFFFF,标题 #3A3733,正文 #5C5751,主按钮 #96A8B6。正文和底色的对比度约 5.6 比 1,过 AA 要求的 4.5。
#96A8B6 配白字只有约 2.4 比 1,离 4.5 差得远。要么把字换成深色,要么把按钮压到 #5D7488,对比度才回到 4.9 左右。海报
低饱和的海报容易发软,靠两样东西撑住:字号反差和留白。一整张灰调配一张照片,标题占到版面的三分之一,比再加三个颜色管用。
非要加色的话,加在最该被看到的那句文案上,面积控制在一成以内。
家居
莫兰迪色在家居里几乎是默认选项,因为涂料本身就带灰度,白墙刷上去也不是纯白。稳妥的搭配是墙面用米灰,布艺用雾粉或者苔绿,木作和金属件用陶棕,三者的明度天然拉开,不用额外找对比。
五、在莫兰迪色卡中一键取色
站内的莫兰迪色卡已经按主色系分好类,点开色块就能复制 HEX,省得一个个手动试。
想要成套的低饱和方案,可以翻配色表,按风格筛选能直接看到组合好的结果,比单挑一个颜色更接近实际用法。
莫兰迪色不难用,难的是别把它当成一种安全的审美。低饱和的好处是耐看,代价是层次得让给明度和面积。选色的时候先把明度差算清楚,再决定哪一处压深,剩下的才是调色。