库里的莫兰迪配色
每套都标了主色与饱和度,以及正文与背景的实测对比度。莫兰迪最容易翻车的地方是灰成一片,对比度那个数字就是防它的。
另有 4 套虽然带「莫兰迪」标签,但主色饱和度到 0%,超过这里用的 55% 上限,没有列进正表:锦葵紫、冷泉青、暖阳橙、砖瓦红。标签是标签,饱和度是饱和度,这几套更接近高饱和配色,可以点进去自己判断。
莫兰迪到底是什么
它来自画家乔治·莫兰迪的静物画:一辈子画瓶罐,颜色永远是灰调子。后来被借来形容一类配色:低饱和、明度接近、带一层灰。关键不在具体色相,而在「三个都压下去」这个动作。
所以市面上说的莫兰迪蓝、莫兰迪粉,色相可能差很远,共同点只是都被灰调压过。判断一套配色算不算莫兰迪,别看你用了什么色,看两个色摆在一起是否互相抢。
三条使用规则
一、明度差要够
低饱和会让颜色之间变得更像,这时唯一的层次来源就是明度。文字与背景必须硬拉开:本页 3 套里正文对比度最低的是 13.49:1,最高的 14.67:1,都在 AAA 以上。色块之间可以接近,文字不行。
二、只留一个饱和点
一整套低饱和里,放一个稍微跳一点的颜色(金色、砖红、青)当行动色,画面立刻有重心。放两个就会互相抢,莫兰迪的氛围也随之消失。这个点通常落在按钮或价格上,面积不要超过一屏的 5%。
三、用留白和质感补,不要再加色
觉得太平的时候,第一反应往往是再调一个颜色进来。莫兰迪的正确解法是加留白、加细边框、加一点纸质感,颜色数量保持不变。颜色越多,低饱和的优势越弱。
莫兰迪和高级灰不是一回事
两个标签常被混用,但在库里只有 6 套配色同时符合。区别在取舍:高级灰只要求「不刺眼」,色相可以偏冷偏硬;莫兰迪多一层「灰里带暖、明度收窄」的判断,所以它更适合长时间停留的界面,高级灰更适合信息密度高的后台。
什么时候别用莫兰迪
- 需要高唤醒的场景:促销、游戏、限时活动。低饱和天然冷静,做不出紧迫感,按钮点了也不像能立刻下单。
- 状态只能靠颜色区分的界面。低饱和下红绿更容易糊在一起,一定要用就先跑一遍色盲模拟。
- 小屏 + 户外强光。灰调在低亮度屏幕上对比度衰减更明显,正文会先糊掉。
常见问题
- 莫兰迪色系是固定的几个色号吗?
- 不是。它是一套处理方式(降饱和、掺灰、收窄明度),不是一张色卡。所以不同的莫兰迪配色之间,色相可以完全不同。
- 为什么莫兰迪配色看起来「高级」?
- 因为它降低了颜色之间的竞争。人眼在处理一张画面时,饱和度差是最抢注意力的维度;把这个维度压下去,视觉负担变小,观感就被描述成「干净」「高级」。
- 莫兰迪能做深色模式吗?
- 可以,但要重算:低饱和色放到深底上会显得更暗,主色往往要提亮一档。用深色模式转换器跑一遍,它会给出每对颜色的实测对比度。