色彩空间（二）：CIE 色度图与色域

上一篇文章《色彩空间（一）：色彩空间基础》 中我们了解到，设计软件调制的颜色会以色值的形式传递给计算机，比如：rgba(255, 0, 0, .8) 或 #FF0000。但问题在于，单单是色值本身还不足以准确表达特定的色彩，我们还需要了解一下 “色彩空间” 这个概念。

CIE 色度图

实际上，rgb(255, 0, 0) 或者 #FF0000 这样的色值参数，仅仅只是告诉计算机显示设备：请你展示纯红色，不掺杂一点蓝也不掺杂一点绿的纯红色。此时，显示设备会尽自己的全力去显示一个 100% 饱和度的纯红色，但不同的显示设备，他们的展示效果是不同的，其中某些显示设备的红色看起来可能会比另外一些更鲜艳（比如手机屏幕看起来比电脑屏色彩艳丽）。这就带来了一个问题：RGB 色值的表现是基于显示设备的，不同的显示设备对 RGB 的表达能力有所不同，虽然他们接受到的色值参数是一致的，但呈现出来的颜色的视觉感受却并不相同，换言之就是他们并没有展示出相同的颜色，那到底哪个红色才是准确的呢？

实际上这个问题早在 1931 年就得到了解决，为了定义一种与设备无关的颜色模型，让色彩能够脱离设备而准确定义，1931 年国际照明委员会（CIE）的色彩科学家们在 RGB 模型基础上，通过数学的方法推导出了理论的 RGB 三基色，并以此创建了一个标准的色彩系统。而这一色彩系统的常见展示方式，就是 CIE 色度图（CIE chromaticity diagram）（如下图），我们之后所讨论的色彩空间往往都是基于这个色度图去展示的。

你可能会很好奇为什么 CIE 色度图会长这个样子，一个看起来没什么规则的奇怪三角形，之前的圆形色盘不是更美观吗？事实上这个形状是通过数学计算得来的，之所以计算结果长这样，其中一个重要规则是 “感知均匀性（perceptual uniformity）”，说人话就是这个形状更容易表现色彩之间的关系。还是没明白？没关系，我们举个例子:

比如下图（图一）中如果 A 点（绿色） 和 B 点（红色）两个点的颜色等比例混合，那么得到的新的颜色黄色一定在 A 点和 B 点连线的中点 E 点上，反观（图二）在圆形色盘（非感知均匀性图形）上去连接纯绿色 A 和纯红色 B 两个点，他们的中点 E 并不是纯黄色，纯黄色在圆周 F 点上；换言之，如果 A 点和 B 点两个颜色通过任意比例混合，那么得到的新的颜色也必然在 A B 两点的连线上。也就是说，（图三）R G B 三个点的颜色通过任意比例混合，他们所表现出来的新颜色也必然在这个三角范围内。

了解了以上内容，理解接下来的色彩空间的部分就容易多了。

色彩空间

标准的色彩系统是基于人类的可视色彩范围制定的，并以此为基础绘制出 CIE 色度图，而事实上目前的显示技术并没有办法展示所有的可视色彩，不同的显示设备都只能展示可视色彩中的某一部分，这就是我们要说的 “色彩空间（Color Space）”，前面我们提到的同一个色值在不同的显示设备上看起来颜色不一样，主要也是因为他们有着不同的色彩空间，只能重现自己空间内的色彩。

实际上影响不同设备展示色彩不同的原因有很多，除了色彩空间之外，还有色域、色深、色准、流明等因素……

目前无法显示所有可视色彩的主要原因是没有设备能发出 纯绿、纯红、纯蓝色（单一波长）的光，激光是目前最接近纯色的光，所以你知道电影院的“激光放映厅”有什么不同了吗？

通过上面的内容我们知道，一个显示设备所能表现的色彩丰富程度取决于它展示红、绿、蓝三原色的极限能力，因此由 R G B 三个点组成的三角形，就是该设备所能表现的全部色彩的区域（上图三），我们称之为——色彩空间。

R G B 三个点越接近于图形的边界，那么该色彩空间也就越大，所有的色彩空间都是 “可视色彩空间” 的子集，比如 sRGB、Adobe RGB、Display P3 和 CMYK 就是 4 个典型的色彩空间，不过我们主要探讨的是基于 RGB 的色彩空间，CMYK 并不是 RGB 色彩空间。下图是 sRGB 和 Display P3 在 CIE 色度图上的对比：

从对比中我们可以看出，sRGB 的色彩空间要比 Display P3 小一些，所有在 sRGB 中可以被描绘的色彩都能被 Display P3 所展现，而某些在 Display P3 中的颜色却并没有办法通过 sRGB 来体现。如果你还是有一点模糊，那我们通过苹果的色彩管理器看一下 “纯红色” 在不同色彩空间的对比关系，就更清晰了：

上图中，浅灰色区域代表的是 Display P3 色彩空间，彩色区域代表的是 sRGB 色彩空间， 我们可以看出，同样是纯红色的色值 #FF0000，在 Lab 标准色彩空间中，他们所处的位置并不相同。在 sRGB 当中，纯红色 #FF0000 其实只相当于 Display P3 的 #EA3323（不同的空间转换算法，色值可能会有微小偏差）；也就是说 P3 中色值为 #EA3323 的颜色看起来和 sRGB 当中 #FF0000 差不多，P3 的纯红色 #F0000 要更加纯，饱和度更高一些；P3 的纯红色 #FF0000 在 sRGB 当中没有办法展示出来，非要让它展示，它也只能竭尽自己的全力，使用 #FF0000 这个色值来展示，但颜色却并不相同。更可怕的是，P3 色彩空间超出 sRGB 的接近于纯红的所有颜色，都会被 sRGB 以 #FF0000 来展现，原本肉眼可区分的几个颜色，在 sRGB 里都变成了同一个颜色，会出现色彩失真的问题。

下文会有一个图片来展示失真问题，如果你使用的是 sRGB 色域显示屏，你会 “有幸” 看到失真的效果。
另外我们还能看出，红色和绿色在这两个色彩空间中差异最大，也就是说如果采用蓝色调作为界面主色的话，在不同的色彩空间设备上差异会小一些，相反，采用红色和绿色，表现差异会比较大，越是饱和度高的红、绿色，差异越明显。

所以我们说单是色值本身还不足以准确表达特定的色彩，我们需要色值配合它所处的色彩空间才能更加准确的表达。

事实上定义色彩空间的关键指标有很多，除了 R G B 三个点指定的色彩范围之外，还有 白点、Gamma 等，为了简化理解，本文我们只考虑色彩范围。

接下来，我们简单了解一下几个典型的色彩空间，这也是我们在生活中可能会经常打交道的几个色彩空间（买手机、买显示器的时候如果留意的话会经常看到这些字眼）：

常见彩空间

sRGB

sRGB（Standard RGB）是由微软联合爱普生、惠普等联合开发的一个通用色彩标准，由于微软的强大影响力，这一标准被很多厂商所采用，对于 Windows 和 Mac 来说，它是缺省的色彩模式，也是 HTML 3.2 、CSS 1.0 和 SVG 的标准色彩模式。也就是说，如果你输出的色值参数没有指明色彩空间，会默认以 sRGB 的色彩空间为他们匹配颜色。另外，一些不错的显示器，也会以 sRGB 作为色彩空间标准。

NTSC

NTSC 色彩空间要比 sRGB 大得多，不过这种色彩空间很少用于显示器设备，更多的是用于和其他色彩空间进行比较，从而描述其他色彩空间的色彩覆盖率，比如：100% sRGB 相当于 72% NTSC，本色彩空间未在上图中标明。

DCI P3

Display P3 是 Apple 在 DCI P3 基础上参考了 sRGB 而修订出的自己的标准，其色域更广，从 iPhone 7 开始，苹果的电子设备大部分已经采用 Display P3 色彩空间（MacBook Air 依旧以 sRGB 为标准，所以 MacBook Air 不是很适用于做色彩设计相关的生产工作），本文中讨论的 P3 主要指 Display P3。

Adobe RGB

Adobe RGB 色彩空间是一种由 Adobe 公司开发的色彩空间，开发的目的是为囊括 CMYK 彩色印刷色彩空间，从而能在显示器等设备的 RGB 颜色模式上较为准确地显示印刷色彩，它和 P3 类似，拥有更加宽广的色彩空间，能展现更鲜艳的色彩。目前已经被很多单反相机、显示器等设备作为标准。Adobe RGB 和 P3 各有所长，从上图中可以看出，Adobe RGB 在绿色上的表现更出色，而 P3 则在红色上的表现更突出。

色域

通常 “色域” 一词会被经常用来指代 “色彩空间”，比如：“这个显示器采用的是 P3 色域”，这样表达是没有问题的，但如果更准确一点的话，“色域” 是指你的设备所能显示的色彩范围在某个 “色彩空间” 中所占的百分比。比如一个显示器的色域是 90% sRGB，那意思就是说，这个显示器能显示出的色彩范围在 sRGB 色彩空间中占了 90% 的面积。在同一色彩空间里，色域越高的显示器，所能显示的色彩范围就越广。

了解了色域，你可能就知道以后该如何选购显示器了，理论上色域越广，显示器的色彩还原度越高（当然色准、色深、亮度等也很重要）。

什么样色域的屏幕算得上好屏幕呢？

• 达到 100% sRGB 以上色域的屏幕，算得上不错的屏幕；
• 达到 90% Adobe RGB 以上的屏幕，属于非常优秀的屏幕；
• P3 色域的苹果显示设备，属于非常优秀的屏幕；

一款优秀的 27 寸 5K分辨率 P3色域显示器价格可能近万元，所以有人开玩笑说：iMac 算是买显示器送电脑，在某果设备中，性价比算比较高的。

另外我还制作了一个简单的图片可以帮助你检查你当前使用的屏幕色域情况，图片是基于 P3 色彩空间绘制的，图中共有 3 个与背景色接近的表情大图标：

如果你的显示设备能清晰辨别第三个表情图标，说明你的显示设备很优秀，已经达到了 P3 或 Adobe RGB 色域标准；如果你的显示设备能隐约看到第二个微笑图标，说明你的显示设备还不错，已经达到了 100% sRGB 色域标准；如果只能看到第一个图标，说明还没有达到近 100% sRGB 标准，使用该显示器从事对色彩比较敏感的设计工作可能会受影响；如果连第一个都难以分辨若隐若现，说明你的显示器色域覆盖度比较差，有可能还不到90% sRGB，如果工作中经常与色彩打交道，建议更换。

看不到上图中的图标，也不能完全说明显示器就不好，但至少能说明色域覆盖比较差。实在看不见就别死盯着看了，伤眼睛。

DIC P3 色域可能也看不到最后一个图标，这一点我还不太确定，因为我在 MIX 2S 手机屏上就看不到，但官网参数描述 MIX 2S 的显示屏为 DCI P3 色域。我猜测是某米说的是概念，因为并没写具体百分比，毕竟 90% 的 P3 也算 P3，纯粹猜测，如果有读者知道原因，欢迎指点。

未来趋势

可能在过去开展 UI 领域的设计与开发工作时，即使我们不了解色彩空间的概念也没什么关系，实际工作中不出现在太大的问题，但是采用广色域（P3、Adobe RGB）作为标准已然已经是电子设备的发展趋势，越来越多的厂商开始采用广色域来代替 sRGB 色域。如果我们依旧不去进行色彩空间的适配和色彩管理，将会出现越来越多的色差与色彩失真问题。即便我们依旧采用 sRGB 色彩空间作为项目的主空间，我们也必须清楚为什么要这么做，相比使用 P3 色彩空间有何不同… 这也是为什么 Sketch 在 48 版本新增色彩管理功能的主要原因。

未来还可能会出现各种各样新的色彩空间标准，为了使得不同的设备展示效果尽可能与设计一致或者尽可能发挥显示设备的能力，我们就必须通过设计软件的色彩管理来进行色彩空间的设定。

---

到这里，第二篇关于色彩空间的内容笔记就讲完啦~