什么是互补色｜色相环上的对比色关系与不出错的用法

什么是互补色

互补色是指在色相环上位于正对面的一对颜色。两者混合时饱和度相互抵消，接近无彩色（灰色或白色）；反过来并排放置时，又能最强烈地相互衬托。

设计中重视互补色，正是因为这种“相互衬托”的性质。在照片中想突出的主体背后放互补色，或者只把按钮设为正文颜色的互补色，不必过度提高饱和度也能吸引视线。

• 并排时醒目：对比最强，是最吸引眼球的组合
• 混合时变浑浊：两种颜料混合后饱和度下降，接近灰色
• 出现在残像中：盯着某种颜色看后再看白色表面，会浮现出它的互补色

“红色的对面”有时是青色、有时是绿色的原因

查询互补色时，会同时看到红色的互补色是青色（水蓝）和是绿色这两种说明。并不是哪一方错了，只是作为前提的色相环不同而已。

如果处理屏幕设计或在应用中做图像处理，以RGB／HSV色相环为基准更实用。因为颜色可以用数值处理，所以用“色相数值加180（超过360时减去360）”这样简单的计算就能求出互补色。

代表性的互补色组合

以下是以屏幕使用（RGB／HSV）为前提的代表性组合。附上了色相角度，可以直接在设计工具的取色器中指定。

黄与蓝这类明度差大的组合，即使是小字也容易阅读。相反，红与绿这类明度相近的组合，对难以辨别颜色的人来说很难区分，面积相近时还可能看起来闪烁。

在配色中使用的3个技巧

互补色是很强烈的组合，直接各用一半会让画面显得不安定。实际使用时，掌握以下三点就不容易失败。

1. 1

   让面积大幅偏向一方

   底色70％·主色25％·强调色5％是经典比例。互补色放在5％的强调色上，只用于按钮、链接等“希望被点击的地方”。

2. 2

   降低其中一方的饱和度或明度

   两个纯色直接碰撞太强烈。让其中一方变暗淡、变暗，或混入白色变淡，就能在保持对比的同时更易于观看。

3. 3

   在中间夹入无彩色

   在边界加入白色·灰色·黑色的线或留白，可以抑制轮廓闪烁的光晕效应。文字和背景为互补色时尤其有效。

两种互补色太强烈时，改用位于互补色两侧的两种颜色，即分裂互补色，可以在保持对比的同时更容易驾驭。例如对于蓝色，不用黄色，而是搭配偏橙和偏黄绿的两种颜色。包括互补色以外在内的整体配色搭建方法，请参阅配色方法。

常见失败与改法

特别需要注意的是只靠红与绿的组合来区分含义的情况。根据色觉特性，有人很难区分，所以成功与失败、必填与选填等重要信息，除了颜色之外还要用符号或文字表示。

用互补色残像体验“相反的颜色”

互补色的关系，比起用脑子记，实际看一看更快掌握。最简单的是互补色残像。盯着某种颜色看几十秒后把视线移到白色表面，就会浮现出该颜色的互补色。

1. 1

   盯着颜色反转的图像

   颜色残像错觉工具会自动把载入的图像反转为互补色，并显示该图像。

2. 2

   切换到黑白图像

   盯着看约20秒后切换到黑白图像，虽然是黑白的，却会浮现出接近原照片的颜色。这就是互补色残像。

3. 3

   与原来的彩色图像比较

   把浮现出的颜色和原本的颜色比较，就能确认反转图像恰好是互补色。

这种现象是由于眼睛适应同一种颜色而降低了敏感度。原理的详细说明，以及用照片制作错觉图像的步骤，汇总在颜色残像错觉的文章中。盯得越久残像越强，但眼睛也越累，请一边休息一边尝试。

常见问题

简单来说互补色是什么？

是在色相环上位于正对面的一对颜色。混合时饱和度相互抵消接近无彩色，并排时能最强烈地相互衬托。在屏幕设计使用的RGB色相环中，红与青、绿与品红、蓝与黄是代表性的组合。

红色的互补色是绿色还是青色？

两种说法只是前提不同，都是正确的。颜料使用的RYB色相环中红色的对面是绿色，屏幕显示使用的RGB／HSV色相环中是色相旋转180度的青色。在网页和应用设计中以青色为基准，与取色器的数值一致，更容易处理。

使用互补色后画面太花哨了，怎么办？

让面积偏向一方最有效。以底色70％·主色25％·强调色5％为标准，互补色只用在5％的强调色上。如果仍然太强，可以降低一方的饱和度或明度、在边界夹入白色或灰色，或者改用互补色两侧颜色的分裂互补色。

什么是互补色残像？

是盯着某种颜色看一段时间后，再看白色表面或黑白图像时，会浮现出该颜色互补色的现象。这是由于对持续看到的颜色起反应的细胞敏感度暂时下降而产生的。盯着颜色反转的图像后切换到黑白，就能体验到黑白图像中出现原来颜色的效果。