核心配色方案（一）：互补色与邻近色

上一篇我们把色轮拆成了原色、间色、复色三层结构。现在你知道颜色在色轮上的位置了，但位置本身不会告诉你该怎么搭——任意两个颜色放在一起都是一种搭配，真正的问题是这个搭配要达到什么效果。

色轮给出的答案是距离：两个色相离得越远，对比越强，画面越有冲击力；离得越近，越统一，画面越安静。所有经典配色方案都是这条规则的变体。这一篇讲距离谱系的两个端点：互补色（相隔 180°）和邻近色（相隔 30°–60°）。

先确认你用的是哪张色轮

在计算任何角度之前，有一个坑必须绕开：同一对"互补色"，在 RYB 色轮和 RGB 色轮上并不是同一组颜色。

如果你做的是网页或界面，一律按 RGB/HSL 色轮算，也就是色相 +180°。带着 RYB 的直觉去配屏幕颜色，会得到"自以为互补、其实没对准"的结果。下面所有计算都基于 HSL。

互补色：相距 180° 的最大对比

计算方法

在 HSL 里，互补色只动色相，饱和度和明度保持不变：

举例：#2563EB 转成 HSL 是 hsl(221, 83%, 53%)，它的互补色就是 hsl(41, 83%, 53%)，显示出来是琥珀色（约 #EBAC24）。"蓝配橙"这类经典组合不是设计师拍脑袋定的，是色轮算出来的。

为什么互补色容易刺眼

互补色会互相加强。两个互补色并排时，同时对比效应会让彼此看起来比单独看更鲜艳，交界处还会产生轻微的视觉震动。下面三个条件同时满足时最难受：

• 两者饱和度都很高（S 都在 80% 以上）
• 两者明度接近（L 相差不到 10%）
• 面积相当，且都是大面积（各占一半）

纯红配纯绿难用，原因就在这里：两者的明度几乎相同，谁也不让谁。

手段一：控制面积

让一个色占绝对主导。常用比例是 60-30-10（主色 60%、辅助色 30%、强调色 10%）；做强调时可以更极端——主色 90%，互补色只占 10%，用在按钮、标签、关键数字上。互补色当点缀时效果最好。

手段二：拉开明度

把一方压暗、另一方提亮。明度差超过 30% 之后，即使色相互补，画面也不会打架。这也是"深色背景 + 亮色强调"几乎不会出错的原因。

手段三：降低饱和度

把其中一个色的 S 降到 30%–50%，或者干脆换成复色——例如把纯绿 #00FF00 换成蓝绿或黄绿。冲突主要来自饱和度，而不是色相本身。

手段四：用中性色隔开

在两个互补色之间放白、浅灰、米色或深灰。中性色切断了直接并置，同时对比效应随之消失。界面里最常见的做法就是：浅灰底 + 蓝色主色 + 橙色按钮。

可直接取用的配方

方案 A：深蓝 × 琥珀（后台系统、B 端产品）

深蓝做底和大面积，琥珀只用在主按钮和关键提示上。

方案 B：青 × 珊瑚（健康、生活类应用）

青色压暗后做主色，珊瑚粉只做强调，浅粉做背景以避免大面积高饱和。

什么时候用互补色

邻近色：相距 30°–60° 的最低冲突

计算方法

邻近色（也叫类似色）取主色相左右两侧的邻居：

例如 #0EA5E9 是 hsl(199, 89%, 48%)，取 ±30° 得到 hsl(169, 89%, 48%)（青绿）和 hsl(229, 89%, 48%)（蓝），三者合起来就是一个典型的邻近色方案。

间隔越小越统一，越大越有变化。三个色相的总跨度控制在 60° 以内，画面基本不会失控；跨度超过 90° 就接近三角配色了，需要按下一篇的规则处理。

优点与陷阱

优点很直接：几乎不会出错。色相接近意味着天然和谐，怎么调都不刺眼，适合需要快速出稿的场景。

陷阱同样明确：容易糊成一片。三个色相接近、饱和度接近、明度也接近的时候，画面会失去层次——看上去"有颜色"，但说不出哪里是重点。大面积使用时还容易显得闷，缺少呼吸感。

办法一：用明度而不是色相制造层次

相邻两档的明度差建议拉开到 20% 以上。同样是蓝色系，做成 hsl(210, 70%, 25%)、hsl(205, 75%, 50%)、hsl(200, 80%, 80%) 三档，层次立刻就出来了。这是邻近色方案最有效的一招。

办法二：定主次

按 70-20-10 分配。三个色相等分最容易显得平淡，有了主次才有节奏。

办法三：引入中性色

白、浅灰或深灰做底色和留白。中性色不参与配色关系，但能让彩色部分显得干净，也给眼睛留出休息区。

办法四：加一点互补色提神

在邻近色方案里放一个互补色，面积控制在 10% 以内。这一点点对比就能把重点拉出来，又不破坏整体的统一感。这是邻近色方案最常用的补救手段。

可直接取用的配方

方案 A：蓝 → 青 → 绿（科技、工具类产品）

方案 B：紫 → 品红 → 粉（创意、社交类产品）

两种方案怎么选

常见错误清单

• 互补色等面积平铺：一半对一半是最难看的分配，改成 90-10。
• 两个互补色都高饱和且明度相同：至少要打破其中一个条件。
• 直接用纯 #FF0000 配纯 #00FF00：换成降饱和的版本，或者改用复色。
• 邻近色三个色明度太接近：层次消失，画面发闷。
• 整屏都是彩色：没留中性色，眼睛找不到落点。
• 在 RYB 色轮上算屏幕配色：算出来的互补关系是错的。

一个可复用的操作流程

1. 定主色：先定色相 H，再调 S 与 L，并明确它承担什么角色。
2. 选关系：要冲击力用 +180°，要统一用 ±30°–60°。
3. 分面积：确定主色、辅助色、强调色各占多少。
4. 调明度与饱和度：拉开明度差，必要时给其中一个降饱和。
5. 补中性色：加白、灰或黑做底色、留白和分隔。
6. 查对比度：文字与背景按 WCAG 标准检查，AA 级正文需要达到 4.5:1。

这套流程对两种方案都适用，区别只在第二步。

“互补色和邻近色不是两种风格，而是对比强度的两个档位。要决定的不是哪个更好看，而是这个画面究竟需要多强的对比。”

下一篇继续讲距离谱系的中间地带：三角对立色（三色等距 120°）与分裂互补色（150°/210°）。当你觉得互补太硬、邻近太软的时候，答案基本就在那两招里。