当你打开一款旅行 App，你可能看到它的整体界面是蓝色系的，导航栏深蓝，主要按钮用的是品牌蓝，标签页激活态也是蓝色。但在地图标注、行程分类标签、特价角标这些地方，出现了另一种颜色：橙色或者黄绿色。这个伴随蓝色出现的颜色，它既不是强调色（它出现的位置太多了），也不是功能色（它不代表错误或成功），它是这套色彩系统里的辅助色。

辅助色在设计师的日常词汇里经常会被用混。有人把它和强调色画等号，有人把它理解成主色的深浅变体，有的人压根儿分不清自己选的颜色到底算辅助色还是强调色。结果就是各种颜色混用，颜色之间彼此“打架”。

这篇文章要把辅助色的选用逻辑讲清楚：它是什么角色、它和主色的关系该怎么定、选择它有哪些决策要做、以及什么情况下根本不需要辅助色。

一、辅助色是什么

要搞清楚辅助色是什么，得先把它和主色、强调色分开。这三个角色经常被混着用，但它们各自的职责完全不同。

主色是品牌身份的核心颜色，承载着「这是什么产品」的视觉记忆。它出现在界面的结构性位置——导航栏、主要按钮、激活状态、选中高亮——用量最多，是视觉基调的主要来源。

强调色是引导用户注意力的点睛颜色。它的本质是稀缺性。正是因为它在界面里出现得少，出现的那一处才会被视线第一时间捕捉到。强调色通常用在最重要的那一个 CTA 按钮上，或者最需要用户点击的那个操作上。每个页面只能有一处，多了就失效了。

辅助色是对主色的结构性补充。它的出现频率介于主色和强调色之间——比主色少，但比强调色多。它的作用不是为了引导用户视线，而是为了在界面里建立信息区分、视觉节奏或品牌延伸。

拿一款健康类 App 来讲，主色是绿色。图表里展示了睡眠、运动、饮食三类数据，每类数据需要一个颜色来区分。绿色用了一个，另外两个用什么？这时就需要用到辅助色，这些颜色配合主色共同构成图表的色彩系统，但它们不是强调色，因为它们的功能是区分类别，不是引导视线。

辅助色是可选的，不是必须的。如果界面信息结构简单，主色能覆盖所有需要颜色的位置，这时就不需要辅助色。辅助色是在主色「不够用」的时候才引入的。引入的原因不是「感觉应该有第二个颜色」，而是有具体的信息需要靠颜色来区分，或者有特定的视觉区域需要颜色来区隔。

二、主色和辅助色

定义辅助色的时候，很多设计师的常见做法是去 Dribbble 上挑一组觉得好看的配色，或者把主色丢进配色工具，让它自动生成一个方案，拿来就用。

这两种方式没有对错，但都跳过了一个选色前提，那就是在界面的实际使用场景里，没有评估两个颜色放在一起，看起来会怎样？

颜色的搭配效果不只取决于颜色本身，还取决于面积比、周围环境、以及两个颜色各自的视觉重量。主色和辅助色放在同一界面里，很容易“陷入”两种失败模式。

一种是视觉竞争。主色和辅助色的饱和度相近、明度相近、使用面积接近，用户的眼睛扫过界面，两个颜色都在争夺注意力，结果谁都没能成为焦点。界面看起来嘈杂、不稳定，使用这种产品的用户会说「感觉颜色很多」「颜色有点乱」。

另一种是区分不足。主色和辅助色的色相太接近——比如主色是天蓝，辅助色是湖蓝——用户根本感知不到这是两种不同的颜色，辅助色失去了它存在的意义。

为了避免上述问题出现，我们在选色的时候就需要评估三件事：色相距离、明度差和使用频率。

三、色相距离

选辅助色，首先要确定的就是它离主色有多远。试想一下，我们把所有颜色排在一个圆形轮盘上——从红色出发，经过橙、黄、绿、青、蓝、紫，转一圈回到红色——两个颜色之间的夹角，就是它们的色相距离。这个色相距离不同，两个颜色之间的关系就完全不一样。

1. 类似色（Adjacent），色相距离 0°–30°

色轮上相互紧挨着的颜色，比如蓝色和蓝紫色，或者橙色和黄橙色。它们的关系通常最和谐，因为本质上是同一种颜色的不同温度或冷暖倾向。使用类似色时，整个界面在配色上会给人一种「一体感」，不会有视觉摩擦。

不过代价是区分度弱。如果你需要用两种颜色来区分不同类别的信息，类似色方案很难让用户分清楚——因为它们太像了。所以类似色方案更适合品牌调性的延伸，比如 Logo 辅助色、背景渐变、视觉装饰这类不需要区分信息类别、只是想丰富视觉层次的场景。

2. 分离互补（Split Complementary），色相距离 90°–150°

大多数产品界面在选辅助色的时候，最终都会落在色轮上 90°–150° 这个范围里——离主色大约四分之一到三分之一圆的距离。比如蓝色（210°）配橙黄（30°–60°），绿色（150°）配紫色（270°）。

这个距离刚好让两个颜色站在冷暖的对立面上，用户一眼就能分清，但又不像 180° 互补那样张力过强、容易刺眼。图表配色、标签分类、数据对比，凡是需要靠颜色区分信息类别的场景，基本都在这个区间选色。

3. 互补色（Complementary），色相距离 180°

色轮上直接相对的颜色。比如蓝色和橙色，红色和绿色，紫色和黄色。对比强烈，视觉冲击感大。

互补色经常出现在强对比风格强烈的品牌设计里，比如某些运动类、快消类产品设计。但在界面里大面积使用互补色会非常难以控制，因为两个颜色的视觉张力太大，很容易产生「振动感」，也就是两个高饱和的互补色紧挨着时，眼睛会感觉边缘在抖动。

如果要使用互补色方案，确定辅助色，那么有一条规则必须遵守：要么大幅降低辅助色的饱和度，要么让主色和辅助色的面积比差距足够大（比如主色占 80%，辅助色占 10%）。两个同等饱和度的互补色，以同等面积出现，那结果一定是灾难。如果这样使用辅助色，那辅助色的角色其实更接近强调色了，不再是真正意义上的辅助色。