库里的奶油风配色
卡片左侧色块显示的是这一套的底色,不是主色。判断奶油风要看的就是那一片底。
#f7f7f3底色饱和 20%13.49:1 · AAA#f7f5f3底色饱和 20%14.43:1 · AAA#f7f5f3底色饱和 20%14.17:1 · AAA#f7f7f3底色饱和 20%13.59:1 · AAA#fbfaf9底色饱和 20%14.30:1 · AAA#fbfbf9底色饱和 20%13.72:1 · AAA#fbfbf9底色饱和 20%13.49:1 · AAA#fbfaf9底色饱和 20%14.43:1 · AAA#fbfaf9底色饱和 20%14.43:1 · AAA#f6f5f4底色饱和 10%14.41:1 · AAA#f6f6f4底色饱和 10%14.00:1 · AAA#f6f5f4底色饱和 10%14.41:1 · AAA#f6f5f4底色饱和 10%14.14:1 · AAA#f6f6f4底色饱和 10%14.14:1 · AAA#f6f1e8底色饱和 44%13.34:1 · AAA奶油风在界面里指什么
它从家居装修借来:奶油色的墙面、亚麻、原木,整体偏暖偏浅。落到界面上,就是一片几乎不刺眼的浅暖底,加上深色文字。
它与白色极简的区别在色温:纯白偏冷,奶油风偏暖。这一点差别在屏幕上很明显,纯白显硬,奶油白显软。
三条使用规则
一、主色要压得住
底色极浅,主色必须够深才立得住。这 15 套的正文对比度在 13.34:1 到 14.43:1 之间,主色普遍在中深区。
二、不要再用第二种浅色做层次
最常见的错误是浅底配更浅的卡片,两层都浅就分不开。层次要靠边框、阴影,或明度差 3% 以上的中性色。
三、暖色统一,别混冷色
底色偏暖时,加一个冷色会让整页显脏。要对比就用暖色里的深色:赭、棕、砖红。
奶油风和美拉德不是一回事
两个词都讲暖色,但判据角色不同:奶油风看整片底色(明度 92% 以上),美拉德看主色(明度 28 到 54)。所以库里的美拉德配色,底色常常也是奶油的;两个页面会共享一些卡片,但论据不同。
什么时候别用奶油风
- 需要高对比与锐利感的工具类界面。奶油底会把边界柔化,密集表单会显糊。
- 需要冷峻、科技感的品牌调性。暖底天然带亲和感,做不出距离。
- 印刷与低质量屏幕。极浅暖色在不同屏幕上偏色明显,可能偏粉或偏绿。
常见问题
- 奶油风需要一个特定的主色吗?
- 不需要。它约束的是底色。同一片奶油底可以配棕、配绿、配砖红,只要主色压得住。
- 为什么奶油风的判据是底色而不是主色?
- 因为这个词在现实里说的就是一整片环境色。库里主色受对比度闸门约束,明度不可能到 92%,用主色做判据会一套都匹配不到。
- 奶油风和纯白极简怎么选?
- 看你想让界面显软还是显硬。奶油底更亲和,适合内容消费类;纯白更锐利,适合工具与后台。