配色挑选技巧:我改了三年稿才摸清的几条规律
刚做设计那两年,我最怕客户说"你随便配个色"。随便?我盯着色轮看半小时,最后挑出来的东西自己都不想多看一眼。后来稿子改得多了才发现,配色这事有套路,不是靠审美天赋硬撑。
先摆个我自己的数据。去年给一个家居品牌改详情页,只动配色没改文案,主图点击率从 2.1% 涨到 3.4%。改的就三件事:背景从纯白换成浅米灰,主色从正红换成砖红,按钮统一成一个颜色。就这么简单。

先定主色,别急着调整个色盘
新手最容易犯的错,是一上来就开个调色盘,想一次性把五六个颜色全定下来。这么干的结果通常是每个颜色单看都还行,放一起就打架。我的做法是先只选一个主色,来源有三个:品牌已有的 VI 色、产品本身的颜色、或者找张喜欢的照片吸一个色出来。主色定了,剩下的事好办一半。

接着套 60-30-10 这个比例。主色占 60%,辅助色 30%,点缀色 10%。我第一次听说觉得太机械,用了半年发现真香。页面里大面积的背景和主视觉给主色,卡片、分割线用辅助色,按钮和强调文字就吃那 10%。比例一稳,画面立刻不乱了。

抄配色要抄比例,不是抄色号
很多人喜欢去花瓣、Dribbble 上吸色号,吸完一整套放进自己页面,丑得莫名其妙。问题出在哪?你抄了颜色,没抄面积。一张海报里那个漂亮的橘色可能只占 5%,你把它铺满整个背景,当然翻车。我现在吸色的时候会顺手估一下每个色的占比,记在备忘录里,用的时候按比例还原。
- 背景色永远选明度最高、饱和度最低的那个,最安全
- 文字和背景的对比度至少 4.5:1,做不到就换色,别硬撑
- 颜色别超过三个主色系,第四种除非是警示色,否则不加
- 同功能元素必须同色,按钮红就全红,别一个红一个橙
还有个笨办法很好用:把设计稿截屏,调成黑白。黑白状态下层次还清楚,说明明度关系没毛病;糊成一团,那就是颜色在硬撑结构,早晚出问题。工具我常用 Coolors 和 Adobe Color,前者按空格就能生成方案,适合找灵感;后者吸色和调和谐度更准。但工具只是加速,判断还得自己来。
说到底,配色没有标准答案,但有不难看的底线。先守住底线,再谈风格。实在拿不准,就配十版让同事盲选,选出来最多的那版基本不会差。这招我用过不下二十次,命中率比我自己纠结半天高多了。