互补色是什么？色相环配色的5种规则：互补色、邻近色、三角配色
本文在AI辅助下由原文翻译而成。请结合原文核对专业术语和公式。
互补色是色相环上正对着的两种颜色，相隔 180°，色相对比最强。但“正对面”是哪一种，要看用的是哪种色相环：美术课上的红黄蓝（RYB）色相环里，红色的互补色是绿色；屏幕和 CSS 使用的 RGB/HSL 色相环里，红色（0°）的对面是青色（180°）。想用互补色又不显得刺眼，就让一种颜色占主导，另一种只作小面积点缀，并单独检查文字的对比度。
互补色为什么既醒目又容易“打架”
色相环把色相首尾相接排成圆，一眼就能看出两种颜色相距多远。互补色是相距最远的一对，这带来两个效果：并排时互相衬托，让对方显得更鲜艳，所以蓝色页面上的一个橙色按钮格外抢眼；混合时趋向中性色，颜料会混出灰色，色光则混出白色。
这种张力也让随手搭配的互补色显得吵闹：两种高饱和的对立色面积相当，就会争夺注意力；若明度又接近，交界处的边缘甚至像在“颤动”。办法是让一种颜色当主角，并且同时调整明度和饱和度，而不只是色相。
RYB 与 RGB：为什么色相环会给出两个答案
色相环不止一种。美术课上的传统 RYB 色相环以红、黄、蓝三种颜料原色为基础；屏幕、CSS 和 HSL/HSB 取色器背后的 RGB 色相环以红、绿、蓝三种色光为基础。CSS 中红色在 0°，黄色 60°，绿色 120°，青色 180°，蓝色 240°，品红色 300°。色相在圆周上的间隔不同，“正对面”的颜色也就不同。
| 颜色 | RYB 色相环上的对面（颜料） | RGB/HSL 色相环上的对面（屏幕） |
|---|---|---|
| 红色 | 绿色 | 青色（180°） |
| 黄色 | 紫色 | 蓝色（240°） |
| 蓝色 | 橙色 | 黄色（60°） |
| 绿色 | 红色 | 品红色（300°） |
| 橙色 | 蓝色 | 蔚蓝色（210°） |
孟塞尔（Munsell）色系给出第三种答案：十色相环上，红色的对面是蓝绿色。这些色相环没有对错之分，只是用途不同：调颜料看 RYB，为屏幕选色用 RGB/HSL。工具之间也不统一：Adobe Color 社区论坛上一位 Adobe 员工的回答称，其配色规则基于 RYB 色相环，而 CSS hsl() 里把色相加 180，用的是 RGB 色相环。LCH、OKLCH 等感知色彩空间的色相角度又不一样（MDN 指出，sRGB 绿色在 sRGB 中是 120°，在 CIELAB 中约为 134°），所以“+180°”得到的对色也略有差别。
5 种配色规则：互补、分裂互补、邻近、三角、四角
互补色只是经典配色规则之一，其余几种同样是固定的色相角度组合。下表以 RGB/HSL 色相环上的红色（0°）为基准。分裂互补色和邻近色的间隔只是惯例，多数配色工具允许放宽或收窄。
| 规则 | 色相位置（基准 0°） | 特点 | 适用场景 |
|---|---|---|---|
| 互补色 | 0°、180° | 色相对比最强，等量使用时张力大 | 需要突出的单个强调色 |
| 分裂互补色 | 0°、150°、210° | 对比强烈，张力较小 | 想要对比效果的新手 |
| 邻近色 | 330°、0°、30° | 平静统一，对比较小 | 背景、插画、营造氛围 |
| 三角配色 | 0°、120°、240° | 活泼而均衡 | 活泼的设计、三类不同的内容 |
| 四角配色（正方形） | 0°、90°、180°、270° | 最丰富，也最难平衡 | 大型版面、有经验的设计师 |
四角配色也可以是矩形，即两组间隔不均匀的互补色，如 0°、60°、180°、240°。MDN 的调色板生成示例也是这样做的：在基准色相上加 180°、±120° 或 90° 的步进，得到互补、三角和四角配色。基准色不是红色时，把它的色相值加到每个角度上，超过 360° 就减去 360°。
怎样用互补色配色又不刺眼
好的配色来自给每种颜色分配职责。常见的起点是 60-30-10 法则：约 60% 的面积用主色，30% 用辅助色，10% 用强调色。它是从室内装饰借来的经验法则，不是定律，设计师也只当它是起点。
- 选基准色相，可取自内容、照片或品牌。
- 选配色规则，从色相环上读出搭配的色相。
- 分配角色：主色用基准色的浅色或柔和版本，页眉和面板用更深的版本，互补色留给最该吸引目光的那 10%，比如一个按钮。
- 调整明度与饱和度：安静的主色能让高饱和的强调色脱颖而出，不必争抢。
- 检查对比度：每一组文字与背景都要核对。
图3中的每种方案都是浅色主色背景、深色辅助色页眉和一个小面积强调色，两种强色不会抢同一块地方。
对比度与无障碍：色相对比不等于好读
色相相反的两种颜色，明度仍可能几乎相同，而文字是否好读取决于明度。WCAG 2 用对比度来衡量，公式为 (L1 + 0.05) / (L2 + 0.05)，L1、L2 分别是较亮和较暗颜色的相对亮度，范围从 1:1 到 21:1。成功标准 1.4.3（AA 级）要求普通文字至少 4.5:1，大号文字至少 3:1，大号文字指 18 pt 或加粗的 14 pt。成功标准 1.4.11 要求用户界面组件和图形中有意义的部分，与相邻颜色之间达到 3:1。
纯红（#FF0000）放在绿色（#009900）上只有 1.06:1，转成灰度后几乎是同一种灰；橙色（#F97316）放在蓝色（#2563EB）上是 1.84:1；红色放在青色（#00FFFF）上是 3.19:1，只够大号文字用；藏青色（#1E3A8A）放在浅杏色（#FFEDD5）上是 9.04:1。互补的色相适合用在图形和强调色上，正文请用配色中很深或很浅的版本。
色相环配色的常见错误
- 两种高饱和对立色面积相等。让一种当主角，把另一种缩小。
- 以为“相对”就等于“看得清”。每组文字与背景都要对照 4.5:1。
- 把两种色相环弄混。按 RYB 色相环画的配色图，和 HSL 取色器里相差 180° 的对色不一致。
- 只靠颜色传递信息。WCAG 成功标准 1.4.1 指出，颜色不应是传达信息的唯一视觉手段。红绿色觉异常（俗称红绿色盲）是最常见的类型，请加上文字标签、图标或图案。
- 把 60-30-10 当公式。用它建立清晰的层次，再凭眼睛微调。
常见问题
蓝色的互补色是什么？
在绘画用的 RYB 色相环上是橙色；在 RGB/HSL 色相环上，240° 的纯蓝对着 60° 的黄色。
已知十六进制色值，怎么求它的互补色？
先转成 HSL，保持饱和度和明度不变，色相加 180：橙色 hsl(30 100% 50%) 变成 hsl(210 100% 50%)，是一种蔚蓝色。把 RGB 每个通道取反（255 减去该值）也能得到相对的色相，但明度同时翻转，深藏青色会变成浅沙色。
互补色就是对比色吗？
不完全是。互补色是色相差异最大的两种颜色，文字能否看清则取决于明度之差。在 RGB 色相环上，深蓝和浅黄既互补又高对比；在 RYB 色相环上，纯红和中等明度的绿色互补，明度却几乎相同。
分裂互补色是什么意思？
它取正对面颜色两侧各偏 30° 的色相，再加基准色，如 0°、150°、210°，对比依然强，张力更小。
参考来源：MDN：CSS <hue> 数据类型；MDN：使用相对颜色（调色板示例）；W3C：理解 WCAG 2.2 对比度（最低限度）；Adobe：互补色指南
相关阅读
为帮助理解本文而制作的原创插画。