做设计这些年，见过不少配色翻车的案例。有些画面单看颜色都挺好看，放在一起就是不对劲。有些照着网红配色方案调出来的图，发出去以后发现跟实际场景完全不搭。

配色这件事，网上能搜到大量色卡和搭配方案，但照着用还是会出问题。原因在于，配色不是选几个好看的颜色放在一起，而是要根据使用场景、信息层级、输出方式来判断。同样的配色方案，用在电商主图上合适，用在朋友圈海报上可能就不对。

把电商、海报、朋友圈这三个常见场景的配色逻辑拆开说一下。

先搞清楚配色要解决什么问题

配色不是为了好看，是为了解决信息传达的问题。

一张图上的颜色，需要完成几个任务：让该被看到的信息被看到，让不该抢注意力的信息退到后面，让整体画面跟品牌调性一致。这三个任务做到了，配色就是合格的。做不到，颜色再好看也没用。

很多人配色的时候，第一步是打开色板找好看的颜色。正确的顺序应该是反过来：先确定画面里最重要的信息是什么，然后根据这个信息来选择颜色。

如果最重要的信息是价格，那价格数字的颜色需要跟周围形成足够对比。如果最重要的信息是产品本身，那背景色需要退让，让产品跳出来。如果最重要的信息是品牌调性，那颜色需要跟品牌色系统保持一致。

先想清楚这个问题，再选颜色，配色的方向就不会偏。

电商场景：背景不能抢产品

电商主图和详情页的配色，核心逻辑是让产品成为视觉焦点。

很多人做电商图的时候，喜欢用很鲜艳的背景色或者很复杂的渐变，觉得这样画面更丰富、更吸引人。但用户刷到这张图的时候，第一眼应该看到的是产品，不是背景。背景太抢，产品反而被淹没了。

电商配色的基本原则：

• 背景色用低饱和、低对比的中性色，让产品从背景里跳出来

• 主色从产品本身提取，跟产品形成呼应

• 强调色只用在促销信息或者价格上，面积控制在10%以内

• 整张图的颜色数量控制在三种以内

有一个常见的误区是：把品牌色大面积用在背景上。品牌色确实需要露出，但不一定非要用在大面积区域。可以用在边框、角标、按钮、小面积装饰上，既能体现品牌，又不抢产品。

还有一个容易忽略的问题是手机端的显示效果。电商图大部分流量来自手机，手机屏幕小、亮度高、色彩表现跟电脑屏幕不一样。在电脑上看着刚好的对比度，在手机上可能太弱；在电脑上看着柔和的颜色，在手机上可能太灰。做电商配色的时候，最好在手机上看一眼实际效果再定稿。

海报场景：视觉重心决定配色

海报的配色逻辑跟电商不同。电商的核心是产品，海报的核心是信息层级。

一张海报上通常有多个层级的信息：主标题、副标题、正文、辅助信息。配色需要让这些层级之间的差异清晰可见。

海报配色的判断方式：

1. 先确定主标题用什么颜色，这个颜色应该跟背景形成最强对比

2. 副标题的颜色比主标题弱一档，但依然清晰可读

3. 正文和辅助信息用更弱的颜色，退到背景层

4. 强调色只用在最关键的信息上，比如时间、地点、价格

颜色之间的关系，不只是色相差异，更重要的是明度差异。主标题和背景之间的明度差要足够大，大到缩小到手机屏幕上看依然清晰。副标题和正文之间的明度差可以小一些，但依然要能区分层级。

我通常会在配色定稿之前，把海报转成黑白模式看一眼。如果在黑白模式下，各个层级的信息依然能区分开来，说明明度关系是合理的。如果转黑白以后全糊在一起，说明配色过度依赖色相差异，在信息传达上存在隐患。

海报还有一种常见的配色问题：色相数量太多。一张海报上出现五六种不同的颜色，画面看起来很热闹，但读者的视线找不到落点。色相数量控制在三种以内，是比较安全的范围。如果需要更多变化，可以通过同一个色相的明度和饱和度变化来实现，而不是增加新的色相。

朋友圈场景：快速滑动中要能被注意到

朋友圈配图的阅读场景跟在电脑前看设计稿完全不同。用户在手机上快速滑动，每张图停留的时间可能只有一两秒。配色需要在这么短的时间内完成吸引注意力的任务。

朋友圈配色的逻辑跟海报和电商都不一样。它的核心不是信息层级，不是产品突出，而是“在快速滑动中能不能被注意到”。

几个具体的判断：

• 颜色对比度要比常规设计更高，因为手机屏幕小、环境光不确定

• 主色要明确，不要用太灰太柔的颜色，滑动中容易被忽略

• 避免大面积白色或浅色背景，在朋友圈的白色信息流里容易消失

• 如果用深色背景，文字反白的对比度要足够

朋友圈配图还有一个特殊之处：它通常跟其他内容混在一起出现，用户不是专门来看你这张图的，而是在刷朋友圈的过程中顺便看到的。配色需要在这种“顺便看到”的场景下依然有效。

我自己的习惯是，朋友圈配图做完以后，把它放在手机相册里，跟其他照片混在一起看一眼。如果在相册的缩略图列表里，这张图能跳出来，说明配色是有效的。如果跟其他照片混在一起看不出来，说明对比度还不够。

三个场景的配色逻辑对比

三个场景的配色逻辑不同，但底层原则是一致的：颜色服务于信息传达，不是为了好看而好看。

高级感来自颜色之间的关系

很多人追求“高级配色”，以为高级感来自某些特定的颜色——莫兰迪色、灰调、低饱和。这些颜色确实容易做出高级感，但高级感的真正来源不是颜色本身，而是颜色之间的关系。

高级感的配色通常有几个特征：

• 颜色数量少，每种颜色的角色明确

• 明度关系清晰，信息层级不靠色相差异来区分

• 饱和度控制得当，没有哪个颜色过于刺眼

• 大面积区域用低饱和色，小面积区域用高饱和色做点缀

• 颜色跟品牌调性一致，不是随便选的

反过来，廉价感的配色通常也有几个特征：颜色数量多、每个颜色都在抢、饱和度都很高、没有主次关系、颜色跟品牌没关系。

所以配色翻车，往往不是选错了某个颜色，而是颜色之间的关系没处理好。

配色的实际操作建议

给几个可以落地的建议：

1. 配色之前先确定画面里最重要的信息是什么，然后围绕这个信息来选颜色

2. 把色相数量控制在三种以内，需要变化的时候用同一色相的明度变化

3. 把海报转成黑白看一眼，检验明度层级是否清晰

4. 把图缩小到手机屏幕大小看一眼，检验在实际场景下是否有效

5. 印刷品要检查CMYK色域，避免选超出色域范围的颜色

6. 品牌色不一定要大面积使用，可以用在小面积关键位置

配色不是靠天赋，是靠判断。先想清楚画面要解决什么问题，再根据问题来选颜色。颜色之间的关系比颜色本身更重要，明度差异比色相差异更关键。把这些判断做对了，配色就不会出大问题。