色彩系统与视觉设计 - Reverier 的博客

起源

光，~~一种用来拯救世界的信仰~~ 通常指的是人类眼睛可见的电磁波，视知觉 就是对于可见光的知觉。

可见光只是电磁波谱上介于 400nm - 700nm 之间的部分（也有一些资料定义不同，较窄的定义在 420nm - 680nm 之间，较宽的定义在 380nm - 800nm 之间），在教材上通常以这样一张频谱图来表示：

可见光 - 电磁波谱

每种不同的波长对应的颜色各不相同，因此我们可以根据这个原理制作显示设备，只要找到一种在可控条件下发射不同波长的光的方法就可以了。但是这个想法不现实，首先是设备大小问题。想要制造出任意波长的光需要比较复杂的设备和条件，而这样制造出来的光线还只能显示单个像素。想象一下用这样的技术制造出一个标准 1080p 显示器，设备本身的大小会十分感人。

在进一步探索后，20 世纪 30 年代，国际照明委员会（英文：International Commission on Illumination，法文：Commission internationale de l’éclairage，采用法文缩写：CIE）设计了一套色彩系统，用于描述人眼所能感受到的色彩，并对其进行量化。

经过医学研究，人眼感知色彩主要依靠三种色锥细胞，分别对应红、绿、蓝三种颜色，后来将其称为光的三原色。所以，使用三种原色的光线就可以混合出五彩斑斓的颜色。在此基础上，CIE 设计了一个实验，使用四个光源来量化颜色，并招募志愿者通过人眼感知对色彩进行匹配，称之为颜色匹配实验。从这个试验中，CIE 最终构建出了一套色彩模型，称为 CIE 1931 xyz 色彩空间，也可以直接称为 CIE 1931 色彩空间。

色彩实验

实验过程大致如下：

通过三个单色光源（红、绿、蓝）发射出三种光线，照射到一个白色的试验板上，汇聚成一个色彩光斑；
通过另一个单色光源调整出待测光线，照射在刚刚光斑的附近形成另一个光斑；
使用黑色的不透光材料作为两个光斑的分界线，并移动光源使两个光斑靠在一起；
实验者通过同时观察左右光斑，并根据观测结果不断调整三个单色光源的强度，使得两个光斑看起来显示出同一种颜色；
记录三个单色光源的强度，这样就得到了一个颜色的 RGB 值，被称为三刺激值。

更加直观的视频描述可以参考这里，以下实验图像也来自于此。

色彩实验

在这个实验中，实验者们发现了一个问题：一些待测光线的色彩是无法通过三原色混合出来的，例如下面的例子，想要混合出这种绿色，似乎需要继续降低红光，但是红色光源已经完全关闭了：

待测光线的色彩是无法通过三原色混合出来

于是实验者通过将红色光源移到右边进行混色，并通过调整使得两边色彩一致：

通过将红色光源移到右边进行混色

最终就可以确定出这个颜色的三刺激值了，只不过红色是负的。

在获取了大量的实验数据后，CIE 在亮度 - 波长坐标系中绘制出了这样 3 条曲线：

色彩混合结果

在这个曲线图中，λ 轴代表波长，y 轴代表亮度，而三条色彩曲线则代表了要混合出视觉上与此波长光线同等时，红、绿、蓝三种光线的强度。

CIE 1931 RGB 色彩空间

我们发现了一个问题，在这个坐标系中表示颜色很不直观。于是，CIE 又在以 RGB 亮度为轴的三维坐标系中绘制出了这些点：

color_space_rgb

这样，我们就得到了一个色彩空间定义，称为 CIE 1931 RGB 色彩空间。

格拉斯曼定律

格拉斯曼定律是一个关于光学理论的经验法则，它说明了人类对色彩的感知（大约）是线性的。

简单来说，取两个单色可见光，那么这两个可见光在 RGB 色彩空间里可以用两个坐标 $Color_1 = (R_1, G_1, B_1)$ ， $Color_2 = (R_2, G_2, B_2)$ 来表示，那么这两个色彩混合一起得到的色彩就可以依照以下的简单加法公式计算出来：

Color_1 + Color_2 = (R_1 + R_2, G_1 + G_2, B_1 + B_2)

这个公式就是格拉斯曼定律的简单表达。但是请注意格拉斯曼定律是由实验总结得出的，由于现代医学技术的限制，我们无法直接严格证明色彩空间就是一个线性空间。

格拉斯曼定律的更一般形式可以表达为：

\begin{align} &R = \int_{0}^{\infty}I(\lambda)\bar{r}(\lambda)d\lambda \\\\ &G = \int_{0}^{\infty}I(\lambda)\bar{g}(\lambda)d\lambda \\\\ &B = \int_{0}^{\infty}I(\lambda)\bar{b}(\lambda)d\lambda \end{align}

其中， $I(\lambda )$ 为该光束对波长的强度分布； ${\bar {r}}(\lambda )$ ， ${\bar {g}}(\lambda )$ ， ${\bar {b}}(\lambda )$ 则分别为人眼中三种锥状细胞对不同波长的反应强度。

CIE 1931 XYZ 色彩空间

在构建了人类视觉的 RGB 模型之后，CIE 特别委员会的成员希望开发出与 CIE RGB 色彩空间有关的另一个色彩空间，它假定格拉斯曼定律是成立的，这意味着新的色彩空间能够通过线性变换有关于 CIE RGB 色彩空间。

于是，CIE 1931 XYZ 色彩空间诞生了。在这个色彩空间中，X、Y、Z 三个坐标轴的定义是：

\begin{align} &X = \int_{0}^{\infty}I(\lambda)\bar{x}(\lambda)d\lambda \\\\ &Y = \int_{0}^{\infty}I(\lambda)\bar{y}(\lambda)d\lambda \\\\ &Z = \int_{0}^{\infty}I(\lambda)\bar{z}(\lambda)d\lambda \end{align}

在这个新的色彩空间中，大部分定义与 RGB 色彩空间是相同的，但 XYZ 坐标轴则是歪过来的，这套坐标轴相对于 RGB 坐标轴的大致图例如下：

color_space_xyz

在这个色彩空间中，所有的点都在第一卦限中，因此避免了负值。不过如果仅仅只是为了将所有的点都放在第一卦限中，那其实可以有很多种选择。而 XYZ 色彩空间如此选择的一个重要原因是 Y 轴精确满足了“CIE 标准适应光观察者”（CIE 1926）的适应光发光效率函数（光度函数） $V(\lambda)$ 。

光度函数描述了人眼对于不同波长光的平均视觉灵敏度，可用于将辐射能量转化为可见光的计算。

从 XYZ 色彩空间中，我们可以通过以下的变换得到 RGB 色彩空间：

\begin{align} &\left[\begin{array}{c} X\\\\ Y\\\\ Z\\\\ \end{array}\right]=\frac{1}{b_{21}} \left[\begin{array}{ccc} b_{11}&b_{12}&b_{13}\\\\ b_{21}&b_{22}&b_{23}\\\\ b_{31}&b_{32}&b_{33} \end{array}\right] \left [\begin{array}{c}R \\\\ G\\\\ B\end{array}\right] \\\\ &\left[\begin{array}{c} X\\\\ Y\\\\ Z\\\\ \end{array}\right]=\frac{1}{0.17697} \left[\begin{array}{lll} 0.49&0.31&0.20\\\\ 0.17697&0.81240&0.01063\\\\ 0.00&0.01&0.99 \end{array}\right] \left [\begin{array}{c}R\\\\ G \\\\ B\end{array}\right] \end{align}

插话：绝对色彩空间

绝对色彩空间 就是不依赖任何外部因素就可以准确表示颜色的色彩空间。

RGB 色彩模型（这里指的不是 CIE 1931 RGB 色彩空间）就是一个非绝对色彩空间，因为它的三个坐标轴并没有量化意义，一种颜色是通过 RGB 三种颜色通过调整亮度混合出来的，而这些颜色并不是标准、精确的定义。在两个不同计算机显示器上，同一个 RGB 颜色可能看起来大不相同。为了表示 RGB 色彩在绝对色彩中的位置，其中一种方法是定义一个 International Color Consortium（ICC）色彩配置文件，目前这种方法是业界标准，广泛采用的 RGB 配置文件有 sRGB、Adobe RGB 等。

插话：白点

白点（white point），在技术文档中常被称作参考白色（reference white）或目标白色（target white），用来在处理颜色时定义白色。白点通常是在色彩空间中的一个点，它定义了色彩空间中的 中性白色，并且也定义了色彩空间中的亮度。

白点不是一个绝对的概念，比如说在午后日光的照射下，色彩整体会偏向暖色；而在阴天或者室内冷色 LED 灯的环境下，色彩整体会偏向冷色。但是白点在视觉中的感知是不变的，因此在不同的光照环境下，白点的色彩定义也会有所不同。

在 sRGB 色彩空间中，白点的定义模拟了平均北方天空的日光条件，是以地球上不同地点对日光进行光谱辐射的大量数据为基础，总结出的一组相对光谱功率分布数据，色温为 6500K，近似平均昼光。我们把这个白点称为 D65 白点（Daylight Neutral）。

HSL 和 HSV 色彩空间

HSL（Hue 色相；Saturation 饱和度；Lightness 亮度）和 HSV（Hue 色相；Saturation 饱和度；Value 明度）都是将 RGB 色彩模型中的点表示在圆柱坐标系中的方法。这两种表示法试图做到比基于笛卡尔坐标系几何结构的 RGB 模型更加直观。

其中，Lightness 和 Value 都是表示颜色的亮度，但是它们的含义有所不同，参考下图：

hsl_hsv_models

HSV 以人类更熟悉的方式封装了关于颜色的信息：“这是什么颜色？深浅如何？明暗如何？”，因此在早期被广泛应用于设计行业与计算机设计中。但是 HSV 仍旧是 RGB 色彩空间的线性变换，RGB 模型的缺点 HSV 也并没有解决，对于亮度/明度相同的颜色来说，人眼感受到的视觉亮度不一定相同。

CIE Lab* 色彩空间

显然，RGB 色彩空间很适合机器实现，只需要使用三个单色灯泡即可。但是对于需要量化色彩的设计行业而言，RGB 色彩空间却显得不那么直观。在 RGB 色彩空间里，人眼对于红色的感知程度相对较低，而对绿色的感知程度则相对较高，这导致了使用 RGB 色彩空间进行色彩搭配的时候，很难保证所选择的色彩能够带给用户“匹配”的感觉，例如很亮的绿色 #00FF00 和很亮的红色 #FF0000 放在一起时，人类倾向于感知到绿色的亮度更高。

red_green_comp

如上图，显然红色背景下的白色字体可读性更好，而绿色背景下可读性差多了。这是因为红色的视觉亮度更低，与白色的对比度更高。

如果想要得到一套对于人眼而言亮度更加均匀的颜色，那么使用 RGB 色彩空间是没有办法直观进行计算的，只能通过设计师的直觉慢慢进行调整，最终得到一个近似的结果。这么做导致调色的过程费事费力，而且最终的效果和设计师本身的经验和水平有很大关系。

CIE 1931 色彩空间的另一个问题是，它并没有给出估量颜色差别的直接方式。

测量两个颜色之间的差别的想法是 D.L. MacAdam 开发的并总结于 MacAdam 椭圆的概念中，而在 XYZ 色彩空间中，两个颜色之间的欧氏距离并不能很好地表示人类视觉系统对于两个颜色之间的差异的感知。基于 MacAdam 的工作，在 1960 年开发了 CIE L*u*v* 色彩空间，并经过改良后得到了 CIE L*a*b* 色彩空间。

CIELAB 色彩空间（英语：CIELAB color space） 又写为 L*a*b*，是 CIE 在 1976 年定义的色彩空间，是惯常用来描述人眼可见的所有颜色的最完备的色彩模型。

在这个模型中，L* 代表颜色的亮度（Lightness）（ L* = 0 指示黑色而 L* = 100 指示白色），a* 和 b* 代表颜色的 色度偏移（a* 指示颜色在红色/品红到绿色之间的位置，负值指示绿色，正值指示品红；b* 指示颜色在黄色和蓝色之间的位置，负值指示蓝色，正值指示黄色）。这个色彩模型用于充当做参照的设备无关的模型，用于描述颜色的感知。

L*a*b* 色彩空间也可以表达为 L*c*h*，其中 L* 的含义不变，而 c* 代表颜色的色度（Chroma），色度的含义与灰度类似，取值越高颜色越鲜艳；而 h* 代表颜色的色相（Hue），色相的含义与角度类似，更改色相就可以遍历色彩。下图展示了 L*a*b* 色彩空间在 L* 取不同值的色彩分布，只展示可充入 sRGB 色域的颜色（因此可以显示在典型的计算机显示器上）。每个正方形的每个轴取值于 -128 到 127。

Lab_color_space

颜色距离

在 L*a*b* 色彩空间中，两个颜色之间的欧氏距离可以很好地表示人类视觉系统对于两个颜色之间的差异的感知。在 L*a*b* 中的均匀改变对应在感知颜色中的均匀改变。我们定义两个颜色的欧氏距离为 $\Delta E*_{ab}$ ，那么两个颜色 $(L_1^*, a_1^*, b_1^*)$ 和 $(L_2^*, a_2^*, b_2^*)$ 之间的距离就是：