MAKE · WRITE · SHARE

Art-补色与视觉残像:眼睛补出来的对立色

补色(Complementary Color)不是一个固定的颜料配方,而是一条生理机制的结果:眼睛用”对立”的方式编码颜色(红—绿、蓝—黄、明—暗),当某一种信号被持续刺激后疲劳,再看白墙时它就会”反向”溢出,你看到的那个颜色,就是它的补色。

一句话记忆:“补色是你眼睛自己补出来的,不是别人告诉你的。”

这也解释了一个反直觉的事实:补色到底是多少度,取决于你用哪套模型算。在传统颜料色环上红对绿,在屏幕的 RGB 上红对青;在 CIELAB 里把 a*b* 取反,得到的又是第三种颜色。本文会把这三种结果摆在一起量给你看,最大色差达到 ΔE76 ≈ 99。

与同时对比的分工:《同时对比》讲的是同时对比——两块颜色并排放着互相影响(空间上)。本文讲的是继时对比——同一个位置,颜色先后出现(时间上),以及它背后的补色理论史。同一个梵高画面,前者看的是”并置怎么互推”,本文看的是”这画到底是不是补色对冲,我量了一下”。

1. 起源:从”残像”到”补色”

1.1 牛顿切了一个宽窄不等的圆

补色的现代故事得从牛顿(Isaac Newton,1643–1727)说起,但他的出发点其实跟”补”没关系——他在意的是光谱首尾相接。

1704 年出版的《光学》(Opticks)里,牛顿把七色光谱弯成一个圆:

牛顿色环(Opticks, 1704):黑白线描,七个扇区宽窄不等

牛顿色环,出自《光学》(1704,Public domain)。看什么:注意三件事。(1)这是*黑白线描,不是彩色圆盘——牛顿给的是几何关系,颜色得读者自己填;(2)七个扇区宽窄并不相等,右上靠近 Orange 的那格明显更窄,因为他是按音阶比例切的,不是按波长切;(3)圆周外侧标着 Red、Orange、Yellow、Green、Blew、Indigo、Violet,注意 “Blew” 是当时的拼写。*

牛顿色环圆心局部

同一张图的完整版(比上图更清楚的扫描)。看什么:圆心标着 O,从 O 放射出多条直线把圆切开,圆外还有 A–G 一串大写字母标记各个分隔点。这说明牛顿这张图的本质是*一张对照表——它要表达的是”相邻两色的间隔有多宽”,而不是”哪两色互斥”。*

牛顿的圆没有“补色”这个概念。他只是把光谱拉直再接回原点,让红和紫挨着。真正把”对径即互补”变成结论的,是后面两百年里别人加上的。

1.2 歌德把圆画正了,也把方向扭了一下

第二个关键人物是歌德(Johann Wolfgang von Goethe,1749–1832)。他 1809 年画了一张手绘色轮,1810 年出版《色彩学》(Zur Farbenlehre;英译 Theory of Colours 1840 年才出):

歌德色轮(1809):手绘六区,中心留白

歌德《象征人类精神与灵魂生活的色环》(1809,Public domain)。看什么:(1)只有六个色区,比牛顿少——歌德不承认”靛”是独立色;(2)圆环被同心圆线又切了一圈,分出内层和外层,说明他要表达的是”同一个色相在不同明度/状态下的位置”;(3)环上写着手写德文色名:Blau、Rot、Orange、Gelb、Grün、Violett;(4)圆心是留白的,这是刻意为之——歌德认为颜色产生于”光与暗的交界”,中心是那个未分化的原点。

歌德色轮局部放大

局部放大。看什么:这张最值得看的是*对称性——六格大小基本一致,径向分界线笔直,圆环还被一圈同心线切成内外两层。牛顿那张是不等分的,歌德这张是等分的。“色环上正对着的两格互为补色”这个我们今天习以为常的设定,是从歌德这一版开始立住的,尽管他给出的物理机制是错的。*

我把这张扫描件也量了一遍,结果比我预想的更有意思:

表 0|歌德色轮(1809)的对径色相差

对径位置 实测色相 ΔH
0° / 180° 25.4° / 203.1° 177.7°
15° / 195° 34.9° / 209.4° 174.5°
45° / 225° 38.5° / 214.3° 175.8°
120° / 300° 198.9° / 15.2° 176.3°
135° / 315° 203.2° / 17.1° 173.9°
150° / 330° 201.8° / 20.9° 179.1°
165° / 345° 201.4° / 20.7° 179.3°

歌德这张是 174°–179°,几乎是完美的 180°。 而下面要讲的谢弗勒尔色谱盘,对径只有 115°–129°。

这是个反直觉的结果:手绘的”艺术家色轮”,在几何上比工业印刷的色谱盘更接近精确补色。 因为歌德只需要把六格等分,这是尺规作图;谢弗勒尔要把 72 个色相格按人眼感受排进去,反而不得不妥协。

还要说清一件事:这张是两百年前的手绘件,绿和紫两块已经褪色——我采样时这两段的彩度只有 40 左右(红橙段是 170–190)。所以图上实际能读出的强对位主要是蓝—橙,而不是”红—绿”。看图时不要把褪色误当成歌德的用色意图。*

歌德跟牛顿吵了一辈子。就物理而言,歌德输了——他否认白光由各色光组成,这个错误很彻底。但在另一件事上他是对的:颜色不只发生在光里,也发生在眼睛里。他花大量篇幅描述”彩色阴影”(同一块影子,被不同色光照着会显出对立的色相),这是纯粹的主观现象,用光谱解释不了。

歌德的另一类材料更实用——他做的是并置对照实验:

歌德《色彩学》图版:左半黑白几何图样,右半彩色小色块

歌德《色彩学》图版(Tafel III 的一部分,Public domain)。看什么:这张图一点也不好看,但方法很现代——左半是黑白相间的几何图形(用来测明暗对比),右半是一格一格的彩色小色块(用来测色相对比)。歌德不是画一个漂亮的色轮给你看,而是做对照实验。这个”把小色块摆在一起比较”的做法,被后面那个人系统化成了一整套工业标准。

1.3 谢弗勒尔:给颜色做了一张 72 格的”对照表”

第三个人是关键转折。谢弗勒尔(Michel Eugène Chevreul,1786–1889)本职是化学家,不是画家。他 1824 年起任巴黎戈布兰(Gobelins)织毯厂染色总监,遇到一个具体得不能再具体的问题:客户投诉某些毛线的红色不够鲜艳。查下来发现不是染料的问题——是这些红线挨着某些蓝线、紫线,被邻居衬得发闷了。

于是他 1839 年出版《论色彩的 Simultaneous Contrast 定律》(De la loi du contraste simultané des couleurs)。这本书给的是原理;二十多年后,他 1864 年又出了《色彩及其在工业艺术中的应用》(Des couleurs et de leurs applications aux arts industriels à l’aide des cercles chromatiques),配了一整套印刷色谱圆盘,让工人能直接查表配色。下面前两幅图出自 1864 年这本,不是 1839 年那本。

谢弗勒尔第一色谱盘(Plate V):72 色扇形环带 + 中心说明文字

谢弗勒尔《第一色谱圆盘》(Plate V,1864,Public domain,Science History Institute 藏,DPLA 数字化)。盘面题字为 “1er cercle chromatique de Mr. Chevreul renfermant les couleurs franches”。看什么:(1)主体是一圈*放射状扇形色块,不是我一开始以为的连续渐变色环——它是一格一格分开的,格与格之间有浅色分隔线;(2)整圈共 72 色,是谢弗勒尔系统里”最纯”的那一版;(3)最外圈还有一圈标注环,标着数字和刻度。这是一张查询表,不是装饰画。*

版本说明:这两幅色谱盘不是 1839 年《论色彩的 Simultaneous Contrast 定律》里的插图,而是出自 1864 年的《色彩及其在工业艺术中的应用》(Des couleurs et de leurs applications aux arts industriels à l’aide des cercles chromatiques)。1839 年那本书给的是原理,1864 年这本给的是可查的谱表。做引用时这两本不要混。

谢弗勒尔色谱盘外缘局部

外缘局部。看什么:色块是按角度切开的*独立方格,每个格子内部基本是单一平色,没有渐变、没有阴影。这种”一格一色”的做法,是为了让相邻两格的颜色能干净地并置——只有平涂,对比才可预测。这一点对今天做贴图、做色板同样成立:你要测两个颜色怎么互相影响,就别在中间加渐变。 *

现在到了本文第一个实测。既然谢弗勒尔自己就在圆盘上做了记号,那”对径”到底对不对得上 180°?我沿圆环取 24 个角度,每个角度在环带内取中位色相,然后比对相差 180° 的那一对:

表 1|谢弗勒尔色谱盘上,对径两点的色相实际差多少

对径扇区 Plate V(正常色) Plate VII(rabattues,掺 2/10 黑)
15° / 195° 166.8° 177.9°
30° / 210° 179.4° 169.4°
45° / 225° 162.6° 样本不足
60° / 240° 145.2° 样本不足
75° / 255° 116.5° 样本不足
90° / 270° 92.0° 80.5°
105° / 285° 90.2° 75.8°
120° / 300° 81.6° 72.4°
平均 ΔH 129.3° 115.2°
中位 ΔH 145.2° 80.5°
达到 150° 以上的 3 / 8 对 2 / 5 对

结论有点微妙,得说清楚:

  • 靠近红—青、橙—蓝那一段,对径确实接近 180°(179.4°、177.9°),说明谢弗勒尔的色相排布在这一段是准的;
  • 越往黄绿区走,对径越来越小,最低掉到 72°。也就是说在这两版圆盘上,”正对面”平均只有 115°–129°,不是 180°。
  • 第二版(Plate VII)更明显:它的中心文字写着 “LES COULEURS RABATTUES”(削弱过的颜色),是故意掺了 2/10 黑做低明度版。掺黑之后色相角更挤,对径差进一步压缩到中位 80°。

这两件事说明:历史色环上的”对径”,从一开始就不是精确的 180°。 它是人在纸上排出来的近似,不是从生理机制推出来的常数。

谢弗勒尔第三色谱盘(Plate VII):掺黑后的低明度版

谢弗勒尔《第三色谱圆盘》(Plate VII,1864,Public domain)。盘面题字:“3ème cercle chromatique de Mr. Chevreul renfermant les couleurs rabattues, à 2/10 de noir.”* 看什么:把它和 Plate V 并排看——盘面明显更暗、更闷,颜色像蒙了一层灰。这就是 “rabattues”(打下去、压暗)的意思:72 个纯色相各自掺进 2/10 的黑。注意环带外圈仍然保留完整刻度,说明这是同一个系统的低明度版本,不是另画一套。*

2. 发展:从”眼睛累了”到”神经对打”

2.1 残像:补色最原始的形态

在赫林之前,人们早就注意到一个现象:盯着一个颜色看久了,再看白纸,会看到另一个颜色。这叫负后像(negative afterimage)。

这个演示最能说明问题,因为它把时间维度摊开给你看:

反色美国国旗:整面旗的每个颜色都被换成了它的负片色

反色(inverted)美国国旗(MikeRS,Public domain)。看什么:这面旗整个是”负片”——我采样了它的实际像素:*

成分 实际 RGB 占比 色相
条纹/底色 (64, 245, 207) 41.3% 167°(青绿)
星区 (0, 0, 0) 39.2% —(黑)
星区底 (255, 215, 151) 18.7% 37°(淡橙)

真实美国国旗是”白底 + 蓝星区 + 红条纹”,反色后正好是”黑底 + 淡橙星区 + 青绿条纹”。用法:盯着这张图中央约 30 秒(尽量不眨眼),然后立刻看一块白墙或白纸——你会看到一面红白蓝的正常国旗浮出来,持续一两秒。这就是负后像。

注意这里的关键点:后像出现的是”原图”的颜色,不是”反色图”的颜色。 因为眼睛对”青绿”疲劳了,再看白,青绿通道给不出信号,你就在白里”读”到了它的对立面——红。

2.2 赫林:把颜色拆成三对”跷跷板”

把这些零散现象收拢成一个理论的,是德国生理学家赫林(Ewald Hering,1834–1918)。他提出对色论(Opponent Color Theory,英文维基百科将其定年为 1892 年):

人眼不是用三种”原色”各自加总来编码颜色的,而是用三条对着干的通道:

通道 一端 另一端 你在残像里看到什么
红—绿 红兴奋 绿抑制 盯久了红,白纸上浮出绿
蓝—黄 蓝兴奋 黄抑制 盯久了蓝,白纸上浮出黄
黑—白 暗 亮 盯久了黑,白上浮出亮(反过来也一样)

这个模型最漂亮的地方,是它天然解释了”为什么没有红绿”。你可以在调色板上把红和绿调成褐,但你说不出“一种既红又绿的色相”——红绿是同一个通道的两端,不能同时兴奋。同理,也没有”黄蓝”。

对色论演示:四组补色色块两两相对

对色论演示图(CC BY-SA 4.0,作者 8-leaf clover,基于 CIELCh 做过色度校正)。看什么:四个方框里各嵌一个椭圆,两两成对:洋红底 / 青绿椭圆,青绿底 / 洋红椭圆;蓝底 / 黄椭圆,黄底 / 蓝椭圆。这张图必须盯住看——盯住左上角洋红块中央的椭圆约 20 秒,再看灰色背景,会浮出它的对立色。注意这里用的是洋红—青绿和蓝—黄这两对,而不是”红—绿”,原因后文会量给你看。

对色论演示局部

局部。看什么:注意背景是*灰色,不是白。这是刻意的——灰色本身没有色相偏向,任何残余色相都会被它放大出来,是最干净的”空白屏”。你做残像测试时也应该用中性灰,不要用白纸(白纸往往偏黄)。*

2.3 补色到底是多少度?——四种定义,四个答案

这是本文最实用的一张表,也是很多人栽跟头的地方。同样一句”红色的补色是什么”,不同背景下答案不一样:

表 2|”补色”的四种定义与四种答案

体系 定义方式 红的补色 产生方式 用在哪
减色法 RYB(传统颜料色环) 色环上正对的一格 绿 画材厂商印的色轮、美术课本 调色板、儿童美术教学
加色法 RGB / CMY 各通道取反(1−c) 青 显示器、灯光滤片 屏幕、舞台灯
知觉对色论 对立通道的负向极值 偏青的绿(约 173°) 视觉系统本身 残像预测、视觉研究
CIELAB a*、b* 同时取反 青绿 色彩计算、色彩管理 调色软件、图像处理

四套定义给出的”红的补色”,从绿到青绿都有。这不是谁错了,是问的问题不一样。

更麻烦的是算法层面的分歧。我用同一组源色(HSL 里 S=70%、L=50%)跑了两种算法:一种是大多数人写 shader 时会用的 HSL 色相 +180°,另一种是在 CIELAB 里把 a*、b* 同时取反(这是”色相差 180° 且亮度不变”的严格解)。

表 3|同一色相,两种算法算出的”补色”差多远

源色 源 RGB HSL+180° 得到 Lab 转 180° 得到 两者 ΔE76
红 (217, 38, 38) (38, 217, 217) (0, 124, 139) 36.7
橙 (217, 128, 38) (38, 127, 217) (0, 161, 212) 30.7
黄 (217, 217, 38) (38, 38, 217) (197, 209, 255) 99.3
黄绿 (128, 217, 38) (127, 38, 217) (210, 182, 255) 72.3
绿 (38, 217, 38) (217, 38, 217) (227, 164, 255) 51.6
青 (38, 217, 217) (217, 38, 38) (255, 174, 181) 60.7
蓝 (38, 38, 217) (217, 217, 38) (47, 83, 0) 66.7
紫 (157, 38, 217) (98, 217, 38) (0, 120, 10) 43.9

黄色那一行值得单独说:饱和的亮黄色,它的 Lab 精确补色在 sRGB 色域里根本不存在。 算出来的 (197, 209, 255) 是一块极淡的浅蓝,因为要”亮度不变 + 色相精确差 180°”,那个点落在色域外面,只能把彩度一路降下来才收得进屏幕。这一点非常实际——你在引擎里写”取补色”,遇到高亮色就会算出灰扑扑的脏色,原因就在这。

2.4 独特色相:眼睛觉得”纯”的四个角

对色论还有一个推论:既然有三条通道,那每条通道的两端就应该是某种”最纯”的颜色——不能再被描述成别的色的混合。这就是独特色相(unique hues)。实验测出来的平均角度是:

表 4|四种独特色相的实测色相角

独特色 色相角
胭脂红 carmine red 353°
黄 yellow 58°
钴绿 cobalt green 128°
钴蓝 cobalt blue 228°

四个角两两配对,距离是:

配对 色相差
蓝(228°) — 黄(58°) 170°
红(353°) — 绿(128°) 135°
绿(128°) — 蓝(228°) 100°
红(353°) — 蓝(228°) 125°

这就是前面所有结论的根:

  • 蓝—黄这一对,接近 180°(170°),所以歌德色轮上”蓝对橙”看起来很自然;
  • 红—绿这一对,只有 135°,差得远。要凑到 180°,红的对端得往偏青的绿那边挪。
  • 换句话说,“红绿互补”是个流传极广的简化,它有约 40° 的误差。

(”红补偏青绿”这个说法在色彩科学文献里很常见,属于文献表述;上表给的是四个独特色相的实测角度,两者要分开看——173° 是用红 353° 与 180° 相减得到的,而青并不在四个独特色相之列,这一点我一开始写混了,这里更正。)

另一条线索来自包豪斯的伊顿(Johannes Itten,1888–1967)。他把谢弗勒尔和赫林的东西接过去,做成了一套十二色环的教学法:

伊顿十二色色轮:外圈十二格色相环,中心为红黄蓝 / 橙绿紫两个三角形

伊顿十二色色轮(矢量重绘版,2008,PD-self)。看什么:(1)外圈是十二格等分色相环——比歌德的六格细了一倍,正好是现代色轮的通行分法;(2)中心是*两个交叠的三角形:一个顶点朝上是红、黄、蓝(三原色),一个倒置的是橙、绿、紫(三间色);(3)注意它是纯平涂、无明度变化的——伊顿刻意把明度和彩度剥掉,只留色相关系,这样”补色在哪个位置”才看得清。*

这张图要打个折扣:它不是 1961 年原版印刷品的扫描件,而是 2008 年维基用户依据位图重绘的矢量图,色值与原书有出入。用它看结构可以,别拿它测色。

这也顺带说明了同时对比里阿尔伯斯(Josef Albers)为什么那么依赖中性灰做底:灰本身没有色相偏向,任何放上去的颜色都会被它干净地推出来,这正是”一个色看起来像两个”那类练习成立的前提。而红绿直接并置时,两条通道同时被调动,结果容易是一团振动,反而不好控制——所以”补色练习”和”红绿练习”不是同一件事。

3. 现状:今天三个真实落点

3.1 引擎/渲染:1.0 - color 不是补色,是负片

很多人第一反应是”取反”。但 float3(1) - c 同时把亮度也翻了过来:浅黄 (255, 255, 180) 取反得到 (0, 0, 75),一块深蓝——明度全变了,这已经不是补色,是照片负片。

要真正的补色,得只转色相、保住亮度:

  • 在 CIELAB / OKLCh 里:保持 L*,把 h 加 180°(或用 a*、b* 取反),再转回 sRGB;
  • 出界时等比降彩度(往 L* 轴收),不要简单 clamp——clamp 会把色相拽偏,得到一片脏色;
  • 如果只是要”视觉上对立”,OKLCh 的色相空间比 HSL 更均匀,转 180° 的结果更接近知觉上的补色。

3.2 影视调色:橙青是近似补色,差 150°,不是 180°

“Teal & Orange”是影视调色最常被提到的组合。按表 4,橙(约 30°)与青(约 180°)相差 150°——很接近补色,但不是精确补色。

这恰恰是它能用的原因:精确 180° 的红青并置会产生强烈的振动感(也就是残像最容易冒出来的区域),看久了眼睛累;退到 150° 左右,对比足够拉开肤色与暗部,又不会让画面”发跳”。所以影视里常见的做法是:

  1. 肤色往橙黄推(保住肤色记忆色);
  2. 暗部/背景往青蓝推(拉开色相);
  3. 但不让两者等亮度——用一个明度台阶把它们分开,避免振动。

3.3 UI / 可访问性:补色解决不了对比度问题

这是最容易被忽略的一条,也是实际工作中最容易出事的地方。

补色对比强的是”色相”,不是”亮度”。 而 WCAG 的对比度公式只看相对亮度。把一组精确补色并排放在一起,色相上很”跳”,但亮度可能几乎一样——这对文字可读性是灾难。

另外两件事:

  • 红绿色盲(deuteranopia / protanopia)会把红绿这一对压成同一种黄褐,红—绿并置对这类用户可能完全没有区分度。要区分状态,别只靠红绿,加明度差或形状差。
  • 残像鬼影:大面积高饱和补色并置的界面,用户视线移动后会看到短暂残影,在深色主题下尤其明显。反过来,这也是一条可用的检验手段——见第六节。

4. 示例:点彩派到底点出了什么

现在进入本文的核心。新印象派(Neo-Impressionism)是”补色”这个概念在绘画史上最著名的一次应用,教科书的说法是:修拉把互补色的小点并置,让它们在观者眼睛里”光学混合”,从而得到更亮的颜色。

这个说法有多可靠?我拿实际像素量了一遍。

4.1 修拉《大碗岛的星期日下午》:点很小,但两个点并不互补

修拉《大碗岛的星期日下午》(1884–86,芝加哥艺术学院)

修拉《大碗岛的星期日下午》(A Sunday on La Grande Jatte,1884–86,308.1 × 207.5 cm,芝加哥艺术学院,Public domain)。看什么:先看整体——河岸边约三十个人物,右下角一大片蓝绿色阴影。然后退远看:整幅画有一种轻微的”毛茸茸”的闪烁感,边缘不像平涂那样实。这个闪烁感就是点彩的招牌效果,也是本文要解释的东西。

《大碗岛》笔触放大

局部放大。看什么:(1)笔触*不是圆点,多数是短划、椭圆、不规则小斑,长度约 2–3 mm;(2)笔触之间留着缝,能看见底层的颜色透出来;(3)每一下基本是一个纯色,没有在笔上调匀。这三点是”点彩”的实际样貌——“Pointillism”这个名字本来是批评家用来嘲笑他们的,意思是”只会点小点”。*

我先量了整幅画的底色分布(长边归一到 900px,只统计有彩度的像素):

表 5|《大碗岛》色相分布

指标 数值
有彩像素占比 64.0%
平均彩度 56.7
色相角标准差 93.6°(非常大,说明全画色相铺得很开)
最大色相档 45–60°(黄绿),占 22.2%

色相标准差 93.6° 已经很大(四张画里仅次于西涅克的 116.6°)——整幅画确实”什么颜色都有”。但这不等于”相邻的点互补”。接着我量了相邻像素:

表 6|相邻像素(1px 间距)的色相角差 —— 笔触之间到底拉开了多少

作品 中位 ΔH 均值 ΔH P90 ΔH > 120° 占比 ΔH > 150° 占比
修拉《大碗岛》 7.6° 16.6° 42.1° 1.25% 0.53%
西涅克《费内翁像》 5.8° 15.2° 36.1° 2.30% 1.60%
修拉《埃菲尔铁塔》 2.2° 3.6° 7.7° 0.03% 0.01%
梵高《夜间咖啡馆》 1.6° 3.3° 7.3° 0.02% 0.01%
透纳《蓝色瑞吉山》(对照) 0.0° 0.6° 2.1° 0.00% 0.00%
达·芬奇《蒙娜丽莎》(对照) 2.2° 3.7° 8.7° 0.00% 0.00%

这是本文最重要的一个数字。 修拉的点与点之间,色相中位差只有 7.6°——远达不到”互补”。色相差超过 150° 的相邻像素,只占 0.53%(西涅克高一些,1.6%)。

也就是说:点彩画面上,绝大多数相邻的两个点,颜色是相近的。 修拉的”光学混合”确实存在,但它混的不是”红点 + 绿点”,而是”两个色相接近、明度或彩度略有差异的点”。

那教科书说的”光学混合”错了吗?没错,但要说准:并置产生的主要效果是同时对比 + 轻微的视觉混合,而不是严格的加色混合。 两个相距 2–3 mm 的点,在正常观看距离下落在视网膜上已经超出了单个感受野,它们不会被真正”加”起来;你能感到的是平均色被邻色轻微推挤——这就是那种”毛茸茸的闪烁”。这个判断在《同时对比》里已经给过,本文用数字补上了另一半:并不是因为没有并置,而是因为并置的两个点不够互补。

4.2 西涅克《费内翁像》:点得最”花”,也最接近互补

西涅克《费利克斯·费内翁像》(1890,MoMA)

西涅克《费利克斯·费内翁像》(Portrait de Félix Fénéon,1890,92.5 × 73.5 cm,纽约现代艺术博物馆,Public domain)。看什么:人物是侧面站立、面向左侧,穿橙黄色外套。真正要看的是*背景——整片背景是一圈一圈的漩涡和放射弧线,不是平的。这些弧线全是用小色点排出来的。*

《费内翁像》背景漩涡局部

局部。看什么:(1)弧形笔触本身就构成了*图形——漩涡线是画上去的,不是色的偶然堆积;(2)这些弧线由蓝、浅蓝、橙、黄、紫、绿、红、白等多种小色点组成,肉眼能分辨出单个色点;(3)色点排得很密,很多几乎相接,但仍看得出边界。*

这张画的量化结果很有意思:它的相邻像素 ΔH > 150° 的比例是 1.60%,四张画里最高——确实是”最敢把对立色点挨着放”的一张。但即便是它,中位差值也只有 5.8°。

所以西涅克的”花”是整体色相铺得宽(标准差 116.6°,全场最高),而局部点与点之间依然是渐变的。

4.3 修拉《埃菲尔铁塔》:点彩也可以很”乖”

修拉《埃菲尔铁塔》(约 1889,旧金山美术馆)

修拉《埃菲尔铁塔》(La Tour Eiffel,约 1889,24 × 15.2 cm,旧金山美术馆,Public domain)。看什么:这是一张*竖幅小画(约 A4 大小),铁塔用红、橙、褐的点状笔触画成,背景是浅蓝灰。注意它和《大碗岛》的差别——尺幅只有前者的百分之一级别,点也就细得多。*

《埃菲尔铁塔》点彩局部

*局部。看什么:能清楚看到彼此分离的短点笔触,颜色包括浅蓝、白、浅灰、黄、赭石、橙、红、粉、蓝,少量绿;点与点之间露出浅色底。这张画的相邻色相差只有中位 2.2°——比《大碗岛》还小一个量级。说明”点彩”并不是一种固定强度的手法,同一个画家在不同尺幅上,并置的激烈程度可以差很多。*

4.4 梵高《夜间咖啡馆》:这一次,教科书错了

现在到最关键的一个。几乎所有的色彩教材都会说:《夜间咖啡馆》是补色对比的典范——血红的墙对绿色的台球桌。 梵高自己在信里也确实这么写的。

我先把那段信原文核对了一遍。1888 年 9 月 8 日致弟弟提奥的信(编号 533)里写的是:

“I have tried to express the terrible passions of humanity by means of red and green. The room is blood red and dark yellow with a green billiard table in the middle…”
(我试图用红与绿来表达人类那些可怕的情感。房间是血红的和暗黄的,中间有一张绿色的台球桌……)

紧接着下一句更关键:

“The blood-red and the yellow-green of the billiard table, for instance, contrast with the soft tender Louis XV green of the counter…”
(比方说,台球桌的血红与黄绿,与柜台那种柔和的、路易十五式的绿形成对比……)

他自己写的是 “yellow-green”(黄绿),不是 green。 这个细节后面会变得很重要。

(另:9 月 9 日的第 534 封信里是另一段话——“an atmosphere like a devil’s furnace, of pale sulphur”,讲的是硫磺般的氛围。两封信常被混为一段,这里分开。)

梵高《夜间咖啡馆》(1888,耶鲁大学美术馆)

梵高《夜间咖啡馆》(The Night Café,1888,约 92 × 73 cm,耶鲁大学美术馆,Public domain)。看什么:绿天花板、红墙、黄绿地板、中央绿色台球桌、四盏柠檬黄的灯。先凭直觉看:这画是不是”红绿对冲”?大多数人的第一反应是”是”。下面我用像素说明为什么这个第一反应会骗人。

《夜间咖啡馆》红绿区域局部

局部。看什么:画面里同时有红和绿,这点没错——但请注意它们的*关系:红色偏砖红、红褐、橙红,绿色偏深墨绿、黄绿、灰绿;两者不是紧挨着等量并置,中间往往隔着赭黄、深色轮廓或大片黄绿地板。这跟”红块贴绿块”的教科书图示不是一回事。*

先说全画的色相分布(15° 一档,只算有彩度像素):

色相档 占比
0–15° 13.4% 深红
15–30° 9.2% 橙红
30–45° 32.2% 橙黄
45–60° 32.6% 黄绿
60–75° 4.4% 黄绿偏黄
75–90° 2.0% 黄
90–180°(真正的绿区) 5.8% 绿
180° 以上 0.4% 青蓝

65% 的彩色像素挤在 30°–60° 这一小段里——也就是说,这幅画在色相上极其集中,主体是同一个暖黄橙家族。真正的绿(90–180°)只占 5.8%。

这就解释了表 6 里那个奇怪的结果:梵高全画的色相角标准差只有 29.6°,是四张画里最小的;相邻像素中位差只有 1.6°,比修拉还小。一幅号称”补色对冲”的画,色相居然是全场最”平”的。

再看具体那两块。 我按 24×24 像素块扫全画,找 a* 最大(最红)和 a* 最小(最绿)的两批块:

L* a* b* (a*,b*) 色相角
最红的一批(30 块,多在墙面/吊灯) 30.6 +32.4 +28.7 41.6°
最绿的一批(30 块,多在天花板/柜台上缘) 42.2 −27.9 +12.6 155.8°
两簇之差 −11.6 +60.3 +16.2 相差 114.2°

代表色:

RGB sRGB 色相 Lab 色相
红簇 (120, 45, 20) 15.0° 45.3°
绿簇 (52, 114, 82) 149.0° 157.3°
相差 — 134.0° 112.0°

这才是全部问题的答案:这幅画里最红和最绿的两簇,色相相差 112°–134°,而不是 180°。它们确实对立,但对立得不到位——差了三四十度。

而梵高信里点名的那个对比”血红 vs 黄绿台球桌”更夸张。我直接取那两块:

取样 RGB sRGB 色相 L*
血红墙面(左侧暗部) (76, 53, 35) 26.3° 24.3
黄绿台球桌台面 (117, 96, 17) 47.4° 41.5
差 — 21.1° −17.2

色相只差 21°,亮度差 17 个 L*。 他说的”血红对黄绿”,在色相上几乎是一家人(都在黄橙区),真正的差别在明度和彩度。台球桌之所以”跳”出来,主要不是因为色相对冲,而是因为它比周围亮得多、黄得多。

那这幅画为什么看上去还是那么刺眼?因为它真正做对的是三件事:

  1. 明度上的极端对立:暗红墙(L*≈24)与亮黄地板/桌(L*≈41–48)拉开巨大台阶;
  2. 彩度上的极端饱和:平均彩度 83.4,是四张画里第二高;接近纯色的黄和橙大面积铺开;
  3. 那 5.8% 的真绿放对了位置——天花板和柜台一线,正好是视觉上”该退”的地方,反而成了最扎眼的补偿。

《夜间咖啡馆》灯具局部

灯具局部。看什么:灯是柠檬黄到橙黄,外圈有一圈更亮的黄橙笔触形成光晕,从天花板垂下。这里是全画最亮的地方(L* 最高的一批块就在这一带)——它是靠明度炸开画面的,不是靠色相对冲。你可以把这张图和上文的实测表对上:真正把画面”点着”的是光,不是补色。

这个结论并不否定梵高,反而更符合他自己写的话:他说的是 “red and green”(红与绿,大类别),接着立刻具体化成 “blood-red and yellow-green”(血红与黄绿)。他从来没说过那是 180° 的对冲色。 是我们后来读教科书的人,把”红与绿”自动补成了”补色”。

4.5 同一个画家、同一套技法,强度可以差很多

修拉《埃菲尔铁塔》整幅

《埃菲尔铁塔》整幅(约 1889,24 × 15.2 cm)。看什么:把它和《大碗岛》放在一起看——同样是点彩,这张的色相跨度小得多(渐近 ΔH 只有 43.1°,而《大碗岛》是 73.3°)。**”点彩”是一种技法,不是一个效果*;同一个画家用同样的手法,在不同尺幅上做出的强度可以差一整倍。*

顺带说一个实践上的推论:如果要在引擎里模拟点彩效果,“点的大小”和”并置的色相强度”是两个独立参数,不能只调一个。修拉的《埃菲尔铁塔》点更小,但并置强度反而更弱;《大碗岛》点更大,并置反而更强。这和”点越小越细腻”的直觉相反。

5. 原理内核:为什么补色会”自己冒出来”

5.1 生理层:三条对打通道

视网膜有三种视锥细胞,分别在长(L)、中(M)、短(S)波段敏感。但往下走一层,信号就不是”三个数”了,而是被重新组合成差值:

通道 计算方式 对应知觉
亮度 L + M 明—暗
红—绿 L − M 红 vs 绿
蓝—黄 S − (L + M) 蓝 vs 黄

注意这个结构:红与绿不是两个独立的信号,是同一条线的正负两端。 一根线只能往一个方向偏,所以你不可能同时”更红”又”更绿”——这就是为什么没有红绿色。

5.2 为什么残像是对立色

持续盯着一个颜色,把那一路信号用疲劳了(感受器适应 + 神经节细胞适应)。移开视线看中性背景时,背景本身是”三路都平”的,但你已经把其中一路压低,差值就倒向另一边——于是你看到了对立色。

所以后像的规律非常稳定:

  • 盯红 → 看白 → 浮出偏青的绿(不是纯绿——留意这个细节)
  • 盯黄 → 看白 → 浮出蓝
  • 盯黑 → 看白 → 浮出亮(正后像/负后像都可能有)
  • 盯青绿 → 看白 → 浮出红

一个诚实的补充:残像不能单独当作对色论的证明。 它是光化学残留、神经适应、微小眼动(microsaccades)几种机制叠在一起的结果,现代研究还在争论各占多少。把它当作”对色论的可视化演示”是合适的,当作”铁证”就过头了。

5.3 为什么”补色”会因模型而异

回到表 2、表 3 的分歧。根本原因在于:

  • 生理上的补色是”通道对端”,它的位置由神经响应决定,和色相坐标没有固定换算;
  • 色环上的补色是”几何对径”,它由画师的排布决定,可以在纸上任意挪;
  • Lab 里的补色是”a*b* 取反”,它由色彩空间的定义决定,是个数学操作。

三者只在某些色相段碰巧接近(红—青、蓝—黄),在其他段(黄绿)就分道扬镳。这就是为什么表 3 里黄色的两种算法能差到 ΔE76 ≈ 99。

5.4 为什么点彩”看起来”混了,其实没混

两个关键尺度:

  • 光学混合要求两个色点落在同一个感受野内,也就是间距要小到接近视觉分辨极限。这个极限可以算:人眼分辨率约 1 角分,在 50 cm 观看距离下约合 0.15 mm;
  • 修拉的点是 2–3 mm,比这个尺度大一个数量级以上。

所以实际发生的是:视网膜把一小片区域的颜色平均掉(空间平均),但同时对比又让每个局部被邻居推挤。结果是”整体色调对了,局部在抖”——这正是那种闪烁感。

我做了第三个测量来量化这件事:物理尺度上的 d50——画面上要走多远,两点的平均色相差才达到全画最大值的 50%。这个指标的好处是跟分辨率无关,因为它已经把像素换算成真实的厘米。

表 7|物理尺度 d50(在画布上的实际距离)

作品 画布尺寸 全画色相跨度的渐近值 d50 读法
修拉《大碗岛》 308.1 × 207.5 cm 73.3° 2.12 cm 要走两厘米,色相才拉开一半
西涅克《费内翁像》 92.5 × 73.5 cm 59.2° 0.67 cm 不到一厘米就拉开一半
修拉《埃菲尔铁塔》 15.2 × 24.0 cm 43.1° 0.12 cm 一两毫米就拉开一半(画小)
梵高《夜间咖啡馆》 约 92 × 73 cm 17.5° 1.32 cm 全画总共才 17.5°,一半是 8.75°
透纳《蓝色瑞吉山》(对照) 90.2 × 62.2 cm 5.8° 7.90 cm 全画近乎单色,这个 d50 没有解释力
达·芬奇《蒙娜丽莎》(对照) 53 × 77 cm 18.9° 2.95 cm 低饱和,主要靠明度

这张表要横着读,重点看第二列(渐近值),不是第三列。 梵高的 d50(1.32 cm)比《大碗岛》(2.12 cm)还小,但这不代表它对比更强——恰恰相反,它的总跨度只有 17.5°,一半就是 8.75°,随便走一走就到了。真正说明问题的是:整幅《夜间咖啡馆》走到最远处,平均色相差也只有 17.5°。

再补一个不依赖窗口大小的指标——2 cm × 2 cm 窗口内出现的色相跨度(把画面切成 2 厘米见方的小块,看每块里色相能铺多开):

表 8|2cm × 2cm 窗口内的色相跨度(中位数)

作品 窗口数 跨度中位 P25 P75
修拉《大碗岛》 65,296 105° 45° 165°
西涅克《费内翁像》 6,716 75° 30° 180°
修拉《埃菲尔铁塔》 308 180°(饱和) 180° 180°
梵高《夜间咖啡馆》 6,609 15° 15° 30°
透纳《蓝色瑞吉山》 3,015 0° 0° 15°

2 厘米见方的小块里,梵高的色相只能铺开 15°。 修拉在同样大小的一块里能铺开 105°。这是”并置”强度最干净的一个对比——它不受窗口大小膨胀的干扰。

《埃菲尔铁塔》那行是 180°(打满),因为它只有 15 × 24 cm,2 cm 窗口在画上占了很大比例,一个窗口就横跨好几个色区。这个数字说明小尺幅画作不能用同一个物理窗口去比较,需要按画幅比例归一——这也是我做这组测量时踩到的一个坑。

6. 落地清单(面向技术美术)

A. 要在引擎里算补色

  1. 别用 1.0 - color。那会连亮度一起翻,得到负片。
  2. 走 OKLCh 或 CIELAB:保持 L、色相 +180°、彩度保持或微降。
  3. 出界必须降彩度回收到色域内(沿 L 轴方向收),不要逐通道 clamp。表 3 里黄色那一行就是例子:精确补色根本不在 sRGB 里。
  4. 如果要贴近知觉上的补色,用表 4 的独特色相对位:红的对端在 173°(偏青的绿),不是 120°。

B. 要做”互补配色”

  1. 先把”互补”降级成”近似互补“:差 150° 左右比差 180° 好用。精确 180° 的等亮度并置会振动、留残影。
  2. 一定要加明度差或彩度差。 补色解决色相区分,解决不了亮度和可读性。
  3. 别只用红/绿编码状态。红绿色盲用户会把它们看成同类;加形状、加亮度、加图标。
  4. 测试方法:把两个颜色都转成灰度(去饱和),还能不能区分?不能就重做。

C. 要复现/验证这些测量

  1. 本文的数字都是把图片转成 HSV / CIELAB 之后逐像素统计出来的:色相分布、相邻像素色相差、物理尺度上的色相跨度、以及历史色环的对径角。
  2. 做尺度分析一定要先换算成物理尺寸。单纯在像素上比,一张 3840px 的图和一张 1955px 的图根本不可比。
  3. 提任何一个”这幅画用了互补色”的结论前,先量相邻像素色相差。这个故事告诉我们:视觉直觉和实测数字可以差得很远。

D. 一个便宜的构图检验法

  1. 把画面缩小、盯住中心 20–30 秒,然后看白墙。如果你看到的后像里,某个区域”跳”出来得特别明显,说明那块在明度或彩度上和周围拉得太开(不一定是色相)。这个土办法能快速找到画面的视觉重心是不是你想放的位置。

参考资料

文献与资料

  • Newton, Isaac. Opticks: or, A Treatise of the Reflexions, Refractions, Inflexions and Colours of Light. London, 1704.(色环见 Book I)
  • Goethe, Johann Wolfgang von. Zur Farbenlehre. 1810(德文初版);Theory of Colours,英译 1840。
  • Goethe, Farbenkreis zur Symbolisierung des menschlichen Geistes- und Seelenlebens,1809(手绘色轮,600 × 913 px 扫描件)。
  • Chevreul, Michel Eugène. De la loi du contraste simultané des couleurs. 1839.(原理)
  • Chevreul, Michel Eugène. Des couleurs et de leurs applications aux arts industriels à l’aide des cercles chromatiques. 1864.(本文引用的 Plate V / Plate VII 彩色谱盘出自此本,72 色;Plate VII 为 couleurs rabattues, à 2/10 de noir)
  • Hering, Ewald. 对色论(Opponent Color Theory),英文维基百科定年 1892;生卒 1834–1918。
  • Van Gogh, Vincent. 致 Theo van Gogh 书信,编号 533(1888-09-08,含 “blood-red and the yellow-green of the billiard table” 与 “terrible passions”)与编号 534(1888-09-09,含 “devil’s furnace, of pale sulphur”)。原文核对:webexhibits.org/vangogh/letter/18/533.htm、/534.htm。
  • 独特色相角度(carmine red 353°、cobalt green 128°、cobalt blue 228°、yellow 58°)引自对色论/独特色相相关条目。
  • 全部量化数据由对 Wikimedia Commons 原始扫描件的像素实测得到。

图片来源与授权

文件 作品 / 内容 授权 来源
01-newton-color-circle.jpg 牛顿色环(Opticks, 1704) Public domain File:Newton's color circle.png
12-goethe-color-wheel.jpg 歌德色轮(1809) Public domain File:Goethe, Farbenkreis zur Symbolisierung des menschlichen Geistes- und Seelenlebens, 1809.jpg
04-goethe-tafel.jpg 歌德《色彩学》图版 Public domain File:Goethe Tafel Farbenlehre.jpg
02-chevreul-circle-5.jpg 谢弗勒尔第一色谱盘(Plate V,1864,72 纯色) Public domain Science History Institute / DPLA
03-chevreul-circle-7.jpg 谢弗勒尔第三色谱盘(Plate VII,1864,掺 2/10 黑) Public domain Science History Institute / DPLA
06-opponent-process.jpg 对色论补色演示(CIELCh 校正版) CC BY-SA 4.0 File:Color opponent process theory contrast of complementary colors (corrected).png,作者 8-leaf clover
10-afterimage-flag.jpg 反色美国国旗 Public domain File:US flag(inverted).svg,作者 MikeRS
05-itten-wheel.jpg 伊顿十二色色轮 Public domain(PD-self,2008 矢量重绘) File:Farbkreis Itten 1961.svg,原图 MalteAhrens,矢量化 SidShakal
07-seurat-jatte.jpg 修拉《大碗岛的星期日下午》 Public domain File:A Sunday on La Grande Jatte, Georges Seurat, 1884.jpg
08-signac-feneon.jpg 西涅克《费利克斯·费内翁像》 Public domain File:Signac - Portrait de Félix Fénéon.jpg
09-vangogh-night-cafe.jpg 梵高《夜间咖啡馆》 Public domain File:Van Gogh - The Night Café (1888).jpg
11-seurat-eiffel.jpg 修拉《埃菲尔铁塔》 Public domain File:Georges Seurat 043.jpg

关于 06-opponent-process.jpg:该文件以 CC BY-SA 4.0 发布,使用时须署名并以相同协议共享;本文引用属于教学用途的转载,署名如上。

关于 05-itten-wheel.jpg:这是一张 2008 年由维基用户依据位图重绘的矢量图,上传者以 PD-self 发布。它不是 1961 年原版印刷品的扫描件,色值和原书可能有出入。引用时不要把它当成”伊顿原版色轮”,只能当作”十二色环的一种通行画法”。

关于 11-seurat-eiffel.jpg:该文件在 Commons 上的原始文件名为 Georges Seurat 043.jpg,经核对文件页标注为 La Tour Eiffel(法文)/ Eiffel Tower(英文),约 1889 年,油彩木板,24 × 15.2 cm。此前一度误认作《阿尼埃尔浴场》,已更正。

以下为局部裁剪图,授权继承对应原图:

文件 对应原作 裁切内容
c6-newton-full.jpg 牛顿色环 完整版:不等分扇区与 A–G 标记
c23-goethe-wheel.jpg 歌德色轮 六格等分与同心圆分层的对称性
c3-chevreul5-rim.jpg 谢弗勒尔第一色谱盘 外缘一格一色的独立扇形色块
c22-opponent-full.jpg 对色论演示图 四组色块与中性灰底
c11-seurat-dots.jpg 修拉《大碗岛的星期日下午》 短划笔触、留缝、单点单色
c14-feneon-arcs.jpg 西涅克《费利克斯·费内翁像》 背景漩涡弧线与多色并置
c21-eiffel-dots.jpg 修拉《埃菲尔铁塔》 点彩细节
c20-eiffel-full.jpg 修拉《埃菲尔铁塔》 整幅对照
c17-cafe-redgreen.jpg 梵高《夜间咖啡馆》 红绿区域的真实间距
c19-cafe-lamps.jpg 梵高《夜间咖啡馆》 吊灯光晕——画面最亮处

总结

问题 常见说法 实测/依据 结论
补色是多少度? 180° 独特色相里红—绿只有 135°,红—青是 173° 取决于模型;红绿互补误差 40°
红的补色是什么? 绿 RYB 给绿、RGB 给青、Lab 给青绿 先说清用哪套模型
补色能直接取反算吗? 1.0 - c 会连亮度一起翻,得到负片 要保 L、只转色相
谢弗勒尔的色环对径准吗? 准 平均 129.3° / 115.2°,不是 180° 历史色环是近似排布
点彩是”补色小点光学混合”吗? 是 相邻像素中位差 7.6°,>150° 的仅 0.53% 主要是平均 + 同时对比,不是严格加色
《夜间咖啡馆》是红绿补色吗? 是 最红/最绿两簇差 112–134°;”血红墙面 vs 黄绿台球桌”只差 21° 不是补色对冲,是明度 + 彩度 + 5.8% 真绿
橙青调色是补色吗? 是 约 150° 近似补色,正因不精确才好用
补色能解决 UI 对比度吗? 能 补色只拉色相,不拉亮度 不能,必须另加明度差

一句话带走:补色是眼睛的判断,不是色环的刻度。想知道一幅画(或一个配色)是不是真补色,别看色环,去量像素。