当你打开一款旅行 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%）。两个同等饱和度的互补色，以同等面积出现，那结果一定是灾难。如果这样使用辅助色，那辅助色的角色其实更接近强调色了，不再是真正意义上的辅助色。

四、明度差

色相距确定好了辅助色和主色在色轮上的位置关系，但同样的色相距离，辅助色做得更亮或更暗，界面感受也完全不同。辅助色和主色的明度差，决定了两者之间在同一界面中的视觉层次关系。

当辅助色比主色更浅（明度更高）时，辅助色退到从属地位，主色承担更大的视觉重量。界面给人的整体感觉是主色主导、辅助色衬托。这种配色会很安全，不容易产生竞争感。

比如主色是品牌蓝（HSL: 210°, 70%, 45%），辅助色是浅橙（HSL: 30°, 60%, 75%）。浅橙比深蓝明度高得多，用在标签背景或图表的次要数据系列上，整体感会非常稳定。

反过来，当辅助色比主色更深（明度更低）时，辅助色则获得了相当的视觉重量，这时辅助色可以承担锚定和强调的作用。这种重量感的辅助色适合出现在「需要被注意到、但不该盖过主色」的位置，比如图标辅助色、导航次级入口、重要但非最重要的数据。

将两个深色放在同一个界面里，很容易产生“互抢”现象。所以二者色相距离至少要拉到 60° 以上，这样可以让用户能认出这是两种颜色，而不是同一种颜色发生了深浅变化

最容易出问题的是辅助色和主色明度相近这种情况，如果明度差小于 15%。两个明度相近又在同一界面里出现的颜色，会产生强烈的平等竞争感。人眼对颜色的感知，很大程度上依赖明度差来判断主次。两个颜色的明度差小，即使色相不同，在视觉重量上也会相互抗衡。

那差多少才够？在 HSL 模式下查看两个颜色的 L 值，差距建议保持在 20% 以上。比如主色 L=45%，辅助色 L=65% 或更高，或者 L=25% 或更低，都能维持住明确的主次关系。

五、使用频率

如果说色相距离和明度差回答了「辅助色选什么颜色」，那使用频率则回答的是「用多少」。两个颜色出现的面积比例，同样决定了它们在界面里的主次关系。

一个颜色无论在色轮上距离主色有多远、明度差有多大，只要它在界面里出现的面积和主色差不多，视觉上就会形成竞争。主色和辅助色的定义，很大程度上就是由使用频率决定的——主色出现在界面的主要结构位置，面积占所有有色元素的 60%–70%；辅助色出现在次要位置，面积占 20%–30%；强调色是点睛色，面积占 5%–10%，一般不超过 10%。中性色（灰色）作为界面底色和内容载体，通常不算在这个比例里。

这些比例不是需要精确计算的数字，而是一个检查工具。当你打开设计稿，有种「颜色有点乱」「每个颜色都很抢眼」的感觉时，多半是这个比例出了问题——要么辅助色面积接近主色了，要么强调色出现太频繁不再稀缺了，要么两个辅助色都在争抢位置。

辅助色的位置主要集中在界面的次要层级，比如图表里的第二条数据系列、分类标签的底色、插画中的辅助色调、背景渐变的终点色，以及只在 Banner、活动页、插图里出现的辅助品牌色。这些位置的共同点是：它们都不在用户的核心操作路径上。

反过来说，主要按钮、导航栏这些结构性位置属于主色，需要立刻引导用户行动的地方属于强调色。辅助色一旦越界进入到这些区域，颜色角色就会变得混乱。

六、辅助色和强调色的区别

辅助色和强调色同属于「主色之外的颜色」，这是它们在实际设计中，最容易被设计师搞混的原因。但其实这两种颜色的运作逻辑恰好相反。

辅助色靠出现频率发挥作用，只有在界面里出现得足够多，才能建立起信息区分和视觉节奏。辅助色主要出现在图表次级数据、分类标签、辅助性视觉区域这些位置，核心属性是可识别但不抢眼。选择辅助色时要考虑的是色相距离、明度差和面积比例，因为它需要和主色长期共存。

强调色靠稀缺性发挥作用，只有在界面里出现得极少，才能被视线第一时间捕捉到。强调色只出现在最重要的 CTA 按钮或唯一的行动召唤位置，核心属性是抢眼但克制。越少越有力。

一个产品可以同时拥有辅助色和强调色，但两者的角色不能互换。如果你把辅助色放在了强调色的位置——比如用辅助色标注「立即购买」——这个位置的颜色就失去了稀缺性，用户的视线不会被它特别吸引。如果你把强调色当成辅助色用在图表里，图表里会有一个超级显眼的点，进而破坏图表的视觉平衡。

判断一个颜色是辅助色还是强调色，最简单的方法是在界面里数一下它出现了频率。出现两三处以上的，就是辅助色；只出现一处或绝对不超过两处的，才是强调色。

七、常见的搭配错误

辅助色和主色饱和度一样高。 HSL 里的 S 值控制颜色的鲜艳程度，S 值越高越艳。当主色和辅助色的 S 值都很高——比如都在 80% 以上——两个同样鲜艳的颜色摆在一起，谁都不退让，视觉上就存在争抢。解决办法有个，要么把辅助色的 S 值压低 15%–25%（比如主色 S=85%，辅助色降到 60%–70%），要么拉开明度差，让主色更重、辅助色更轻，靠重量感分出主次。

一套系统里有三种辅助色。 有些设计师会建立三四种辅助色，用于不同的功能区域。这本身没有问题，但需要注意这些辅助色在同一个页面里不能同时出现太多。如果用于图表，三种辅助色作为图表配色系列是合理的；如果用于分类标签，三种辅助色对应三个类别也是合理的。但如果三种辅助色随机散落在页面各处，界面颜色就会失控。辅助色越多，每种的面积就要越小，而且要集中出现在有组织的位置——比如都在图表里，千万不要东一块西一块的使用

辅助色色相和主色太接近，区分不出来。 色相距离小于 30°，用户很难感知到这是两种不同的颜色，界面元素越小越分不清。辅助色等于白设了。验证方法是眯眼测试：把眼睛眯到只剩一条缝，看两个颜色还能不能分开。合并成一片了，那就是太近了。

辅助色出现在需要强调色的位置。 比如「立即购买」按钮用了辅助色，「加入购物车」用了主色，理由是辅助色更醒目。但辅助色在界面其他地方已经出现了很多次，用户不会觉得它在这个按钮上有什么特别；同时真正的强调色也因为位置被占，失去了稀缺性。颜色角色一旦串位，整套系统的信号就会变得混乱。

八、选辅助色的实操路径

在引入辅助色之前，要先问自己一个问题：界面里是否有需要靠颜色区分的信息类别？是否有需要第二品牌色来丰富视觉表达的区域？如果回答都是「没有」，那就先不引入辅助色，而是等到确实有了需求再加。

确认需要辅助色之后，打开 HSL 色彩模式，找到主色的色相值（H 值）。从这个值出发，有三个候选区间：H正负 30° 是类似色区间，协调但区分度低；H正负 90° 到 H正负 150° 是分离互补区间，平衡点所在；H正负 180° 是互补色区间，对比强但需要额外控制。大多数情况下，选 90°–150° 的分离互补区间就比较OK。

选定候选色相后，调整明度和饱和度来建立主次层级。把辅助色的饱和度调低 15%–25%（相比主色），同时让明度比主色高 20% 以上（如果辅助色定位为轻盈的衬托）或低 15% 以上（如果辅助色定位为有重量的补充）。在 Figma 里切换到 HSL 模式后，可以直接观察 H、S、L 三个值的差异，做精确调整。

然后把辅助色放进实际设计稿，检查它出现的面积是否超过主色的一半。如果超过了，减少辅助色的使用位置，或者降低辅助色元素的尺寸。同样用眯眼测试检查两色之间的区分度。

还有一个容易漏掉的检查：辅助色是否和功能色撞了。错误红、警告橙、成功绿这些颜色在用户心里已经有固定含义，如果辅助色恰好也是暖橙色，用户看到一个橙色标签时就会犹豫——这是分类标签还是在警告我？如果遇到撞色，就调整辅助色的色相或饱和度，来拉开和功能色的距离。

辅助色不是一个可有可无的装饰决策，它是色彩系统里关于「颜色如何分工」的结构性选择。选对了，界面颜色的主次关系就清晰了，信息层级有色彩支撑，视觉整体感就会变强。选错了，颜色打架、信息区分失效。

色相距离、明度差、使用频率，是引入辅助色时每次都要考虑的决策维度。不需要精确计算，但需要有意识地做决策，而不是凭感觉挑一个「看着还行」的颜色。