色彩理论普及 | 从十六进制编码到RGB色彩呈现

下面这张图展示了#FFE841这种颜色是如何被人眼识别为#FFE841所代表的黄色的。十六进制算出RGB，显示器调节三种颜色的输出比例，最终输出的光被人眼的SML三种锥形视觉受体吸收，混合理解成为了黄色。

下面，让我们来一步步地拆解并理解这个过程。

目录

1.电磁辐射

2.可见光

3.人眼对光照的感知

4.定义颜色

5.生物光学

6.颜色区间

7.莱特和吉尔德的颜色匹配实验

8.可见光区域与色度

9.色域和光谱轨迹

10.国际照明委员会的XYZ颜色空间

11.屏幕亚像素

12.SRGB

13.sRGB与十六进制编码

14.伽马矫正

15.从十六进制编码到人眼所见

一、电磁辐射

我们常说的伽马射线，X光，可见光，微波，雷达等等，都是电磁辐射的一种，只是代表了不同的波段。

电磁波最小的单位是光子，不同波段的光子能量不同，高频波的光子能量高。为了理解颜色，首先我们要理解电磁波。首先，让我们来仔细看看白炽灯的电磁波。

我们也许会想知道灯泡能辐射出多少能量。一个物体的辐射能量radiant flux (Phi_eΦe)是指它每秒产生的总能量，用瓦特W作为计量单位。一个100W的灯泡辐射能大约是80W，剩下的20W被转化为单纯的热能。

另一方面，不同波段的辐射能量是不同的。频谱能量spectral flux是指一个物体单元波段的辐射能量，具体如下图

使用积分可以算出包含区域为80W。

乍一看起来，白炽灯的转换效率有80%，还不错。但实际上，我们还要考虑这些电磁辐射是否是我们人眼的可见光。

二、可见光

人眼的可见光范围λ=380nm 到λ=750nm，因此在80W的区间内，实际的可见光能量只有8.4W。

所以白炽灯的效率是8.4%？然而实际还要更差。

三、人眼对光照的感知

就像白炽灯的辐射不是按波段均匀分布那样，人眼对光的感知度也不是按波段均匀分布的，实际分布如下图

鸟类可以看到300-400的紫外线，而人眼只能看到紫色380到红色750的波段。而且，在可见光波段的两端，人眼感受较弱。

把白炽灯在可见光段的辐射与人眼在可见光段的接受度叠加，我们算出了人眼实际感受到的亮度（这里引入灯光专业常用单位流明度 luminous flux）大约是2.4W=1600lm。Φvbulb=∫0∞yˉ(λ)⋅Φe,λbulb(λ)dλ=683.002Wlm⋅2.4W≈1600lm

白炽灯的效率是2.4W/100W，那么效率更高的荧光灯和LED如何呢？

上图可见，三种灯散发的电磁波段不同，荧光灯和LED灯的电磁辐射更重合人眼的可见波段。因此效率更高。白炽灯的效率一般是1-3%、荧光灯一般是10%、而LED最高可达20%。

四、定义颜色

我们如何定义颜色？当我手里拿着柠檬，我该如何通过电话告诉远方的朋友这柠檬看起来是哪种黄色？

有了之前几节的知识，我们知道可以通过波频来定义颜色，所有人眼感知的颜色的是不同光谱单色的组合。

举个例子，柠檬在阳光下的反射光波频大致如下图。（当然，具体情况涉及光源距离，人眼距离，物体大小等等因素，但这里我们用一个简化模型，只聚焦于光如何被眼睛识别）

接下来，给柠檬拍一张照片，上传到电脑并PS调节，直至看起来和手上的柠檬一样。这时，电脑屏幕发出的光和手上柠檬反射的光一样么？你也许会觉得既然看起来一样，这两种光也一样，但实际如下图

不同的光谱，看起来颜色一样，这种情况我们叫条件等色（metamer）

五、生物光学

人眼识别可见光靠的是两种细胞：锥细胞和杆细胞。杆细胞主要是在人处于暗处时识别光线，和颜色识别关系不大。因此我们只要关注锥细胞。

人眼有三种锥细胞，分别对不同的波长段敏感，分别定义为S、M、L锥细胞（short、medium、long）

下面我们把手上柠檬的反射光按三种锥细胞进行分解

然后是屏幕上的柠檬的光

由图可见，虽然两种方式进入人眼的光频不同，但实际锥细胞识别出来的波段，积分后的区域大小是一致的，这就是为什么两种方式看起来颜色相同的原因。

因此我们采用（S、M、L）作为我们的第一种颜色区间定义方式。(0.02、0.12、0.16)就是柠檬黄。

六、颜色区间

定义颜色区间，是为了让我们可以用数字具化的方式来讨论颜色。上一节我们引入了LMS颜色区间。然而，这种方式的实用性不高。

首先，区间内的有些颜色是实际不可能出现的，比如LMS（0,1,0）由于三个锥细胞相互重叠，任何一种波频总会对至少两个锥细胞产生影响。

也是因为这个因素，我们在荧幕上微调颜色时，很难做到精确地只刺激LMS中的单个细胞，换句话说，按人眼的方式制造硬件设备是很难的。

另一个历史问题是直到1990‘s人们才认识到锥细胞。因此1920‘s人们想出了另一种方式——RGB。

七、莱特和吉尔德的颜色匹配实验

大约1800‘s，人们就发现了三原色原理。因此1920‘s，莱特和吉尔德做了个实验。

实验如下图，他们控制红绿蓝三盏灯来混合，直到在白墙上的投影与另一种颜色的光看起来完全一样。

他们按5nm的幅度尝试了多种目标光，并把对应的红（700nm）、绿（546nm）和蓝（435nm）比例绘制成一条曲线，最终结果如下。这就是RGB颜色模式。

那么图中的负刻度曲线怎么理解呢？实验时发现，有些颜色无法通过红绿蓝三种光混合得出，只有把红色与目标光叠加才能做到两边一致。

由此实验，我们可以用RGB三色光制造出所有我们能看到的颜色，而LMS更适合表示我们如何识别各种颜色。接下来，我们把手上柠檬的反射光再次代入。

RGB可以帮我们定义波频上的可见色，但是那些不在波频上的呢？

八、可见光区域与色度

下图是上文的总结，我们用RGB来制造，用LMS来识别。但都只是针对光频谱上的颜色。

如果把RGB做在三维空间里，则如下图。可以看见（0,0,0）是黑色，（1,1,1）是白色。

如果按斜对角线切下一刀，则得到如图三角形。该三角形平面上每个点的RGB相加均为1。我们将这个三角作为标准光照下的颜色表，称之为色度。

色度是个很有用的属性，因为独立于光照。换句话说，不管把电脑屏幕调成什么亮度，色度是不变的。

有很多方式把这个二维的色度继续拆成两个单维度。比如HSL和HSV里常用的方式，就是把色度拆分为色相（hue）和饱和度（saturation）。如下图。

九、色域gamut和光谱轨迹

使用R+G+B=1的公式，我们可以将之前的光谱颜色转化为R和G的二维坐标图，也被称为光谱轨迹图，如下（在之前配色实验中使用的红绿蓝三色灯光在图中由星星表示）

如果把上一节的色度三角形放入其中，则如下图。

整个光谱轨迹内的区域代表了所有能被人眼识别的色相，而图中格子的区域（R<0）代表了用R（700nm），G（546nm），B（435nm）这三种光无法造出的颜色。图中波段在435-546nm的都无法被制造，其中就包括了青色（cyan）。

而右侧未被格子填充的区域我们定义为色域gamut。

十、国际照明委员会的XYZ颜色空间

1931年，国际照明委员会定义了两种颜色空间，一种是基于实验的RGB，还有一种则是XYZ。

XYZ的目的之一是将整个光谱轨迹中的可见光，转到一个【0,1】区间且均为正数的坐标，算法及结果如下图

和上节一样，格子区域代表了RGB无法创造的区域，图中三角为可造色域gamut。

十一、屏幕亚像素

如果你拿放大镜仔细看你的显示屏幕，你会发现像素栅栏，每一个像素都由三种亚像素组成：红绿蓝。

和之前实验中用的红绿蓝三色灯不同的是，这些亚像素并不产生纯的单色光，每一个亚像素都有着自己在光谱上的对应区域，而且不同的设备之间也有差异。

利用macbook的色彩同步功能，可以得到macbook显示屏的颜色轨迹图。注意到实际显示的三角形区域与轨迹边缘没有完全贴合，这也是因为亚像素产生的不是纯的单色光。

由于不同设备的亚像素的光谱波段会有差异，显示器会尽量趋近另一个色域SRGB。

十二、SRGB

sRGB——标准（standard）RGB，是由惠普和微软在1996年创立的，为了保证不同显示器的颜色显示效果一致。不再是按照之前实验的灯光RGB，标准的RGB如下：

可以看到，官方SRGB色域有一部分是超出了macbook显示屏的色域的，也就是说，当你在mac上的PS设定了这些颜色时，mac的屏幕无法真实的表现它们。为了弥补这一问题，Macbook似乎使用了一种调整过的sRGB色域

sRGB几乎是到处都在使用的默认色域，也是浏览器CSS规范支持的标准色域。

最终，我们可以开始研究，网站上的颜色是如何生成的。

十三、sRGB 十六进制编码

举个例子，#9B51E0 代表了sRGB色域中一个特定的颜色。按如下的步骤，我们可以把十六进制编码转化为对应的（R，G，B）坐标。

0x9B/0xFF = 0.61

0x51/0xFF = 0.32

0xE0/0xFF = 0.88

所以 #9BE1E0 也就是RGB(0.61, 0.32, 0.88)。

在电脑将这个值传到显示器设备之前，还有一步：伽马矫正。

十四、伽马矫正

对于sRGB色域中的每个坐标，我们希望确保同样间距的两对，有着相同的差距。举个栗子，我们希望（#030000与#040000）的差异看起来和（#040000与#050000）的差异一样。

然而，人类的眼睛在暗光时对细小的变化更敏感，而在亮光时比较迟钝。为了分析这是怎么一回事，我们假设我们想把灰色设定为8个阶级。如下即为一个常规的线性灰色变化。

如果我们只是简单的分段，然后取平均值Y=8⌊8E⌋，那么看起来就如下图：

可以看到，Y0与Y1的区别远比Y6与Y7之间的区别来的明显。

接下来，让我们换一种算法，即做一次平方。Y=(8⌊8E⌋)2.

新的算法很显然让不同亮度的区别也比较接近。

这种考虑光的能量，然后把它们重新匹配的行为就叫伽马矫正。比如蓝色一般看起来比较暗，黄色视觉上就比较亮，这些都需要矫正。

根据伽马方程式，我们可以得到下图，横轴为sRGB，纵轴为矫正过的sRGB

终于，我们完成了整个流程的最后一块拼图！

十五、从十六进制编码到人眼所见

我们终于回到了标题！

首先，我们把16进制的 #9B51E0, 转化为sRGB，即(0.61, 0.32, 0.88)。

然后进行伽马矫正，如上图，得到 (0.33, 0.08, 0.88）。这就是用在显示器的颜色。

然后这个颜色进入你的眼睛，被你的三种锥细胞吸收

最终，就变成了你看到的颜色啦

题图来自：Cora

原作者： Jamie-Wong 

英文链接：http://jamie-wong.com/post/color/