原文在Jamie-Wong的个人网站上http://jamie-wong.com/post/color/ 。尝试翻译，有所简化。

下面这张图展示了#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）。这就是用在显示器的颜色。

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

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