前端要懂的色域知识

前端也要面对“五彩斑斓的红”这种世纪难题了吗？

rgb(255, 0, 0)真的是红色吗

现在有个 CSS 色值：rgb(255, 0, 0)，请问一下各位，在网页上展示的是什么颜色？

各位可能不用思考就马上能够脱口而出：红色！

But，各位有没有想过，这个色值可能不是“红色”，至少不是你想象中的那种“红色”？

什么？！前端也要面对“五彩斑斓的红”这种世纪难题了吗？

色彩空间

人眼能看到的所有颜色是某些特定波长的光，这些所有的颜色称为颜色空间。色彩空间如何描述？使用最广泛的颜色空间图是国际照明委员会（CIE）在1931年制定的：

图1

需要说明的是，色彩空间其实不是一个类似“马蹄形的二维图像”，真实的色彩空间是一个三维空间，只不过三维空间不利于理解和比较，所以习惯上用的是其通过一定数学转换的二维空间图。

色域

或者称之为色彩标准，在近几十年来有不同的机构发展出了不同色彩标准。

图2

每种色彩标准是不同行业主导的，比如 sRGB，这是高清电视、PC、专业图像处理的色彩标准，由微软主导。这个标准也是前端最常接触的色彩标准，也是计算机世界支持最广泛的色彩标准之一。

而 DCI-P3 则是由米高梅、迪士尼、华纳等影业巨头联合推出的数字电影色彩标准之一。

而 Display-P3（类似 DCI-P3 ）则是苹果主导的色彩标准，已广泛用在其软件产品和硬件产品上。

图3

从图3可以看出来，某个色彩标准是色彩空间的某个子集。比如 sRGB，仔细观察它的色彩范围形成的三角形（或多边形）区域，其绿、红、蓝顶点是其所能呈现最绿、最红、最蓝的颜色。

这个三角形区域（色彩配置）一般在系统里可以找到，比如 MacOS 下，在“设置——显示器——颜色”里面：

图4

打开这个色彩描述文件，可以看到里面定义了白色、黑色，以及红、绿、蓝所在的色彩空间的三维坐标：

图5

所以经过上面的介绍，也就能解答文章开头提出的问题了， 在不同的色彩空间下，“最红”的颜色看上去不全是一样的 。

色准

假如你手头有两部电脑，在硬件一样、色彩配置一样的情况下，红色 rgb(255, 0, 0) 看上去也会是一样的吗？

答案是不可能完全一样。

这里牵涉到的一个概念是色准：色彩显示准确度。记作 ΔE，一般来讲，设备的 ΔE 越小越好。想知道你的笔记本电脑的屏幕色准是多少？可以在这里 https://www.no tebookch ec k.net/The-Best-Notebook-Displays-As-Reviewed-By-Notebookcheck.120541.0.html 看看，Notebookcheck 是一本国际性的硬件评论杂志，链接里有不少最近笔记本的屏幕色准测评数据（数据真实性没考证，请大家理性对待）。可以看出其实苹果系的 MBP 其实在笔记本里屏幕色准不是最顶尖的，不过已经是不错的水平。

在手机方面，最近的一加8系列的屏幕号称做到了平均 ΔE 小于1，而小米10则号称 ΔE 小于1.1，这样的水平已经很不错了。不过笔者没有以上者两款机子，有用过的同学可以来说说感受。

广色域

这几年的苹果手机、部分安卓旗舰、以及一些显示器都号称支持了广色域，那么广色域到底是什么呢？

业界目前没有对这个概念有定义。一般来讲，支持除了 sRGB 外的色域，如 Display-P3、 Adobe RGB，都可以称为广色域。

这里尤其要说说苹果全家桶，它们都支持了 Display-P3 色彩标准。为什么要把 sRGB 取而代之？因为这个标准比较旧，支持的色彩太少，不够“好看”。Display-P3 的“红色”、“绿色”会更多。

图6

Display-P3 使用了 DCI-P3 的色域，标准色温是 D65（6500K），标准 Gamma 值被设定为2.2（DCI-P3 为 2.6）。为了最大程度兼容 sRGB，所以其色温和 Gamma 值都和 sRGB 一致，并没有照搬 DCI-P3 标准。所以 DCI-P3 规定的标准白色会比 Display-P3 更偏黄一些，且 Display-P3 由于更低 Gamma 值整体画面风格会更亮一些。

如何知道您的笔记本是否支持 Display-P3 广色域？可以打开一下网址去看一下效果：

https://webkit.org/blog-files/color-gamut/comparison.html

如果您的手机是 iPhone 7 以后的机型、MBP、一加手机等，可以看到第一张红色图片中间有个 webkit 的 logo，否则看到的只是一张纯红色的图片。

前端能用上广色域吗？

答案是肯定的。不过目前只有 Safari（UIWebView）支持的比较好。

图7

CSS写法：

.rect {

background: rgb(255, 0, 0); /* 此行代码可兼容不支持color()语法的浏览器 */

/* 背景色：红色 */

background: color(display-p3 1 0 0);

}

</pre>

这个语法属于 CSS4 的内容，而 CSS 不像 ECMAScript 那样迭代比较快，估计要普及需要一定时间。

这里有一个demo： https://codepen.io/cos2004/pen/Vwewyjw （不支持该语法的浏览器页面会是一片白色）

图8

方形是 Display-P3 的红色，中间的 “Tencent” 文字是普通 sRGB 的红色。

而单击选择颜色时，以色盘的白线分割，左下部分是 sRGB 颜色。这里也可以看出来 Display-P3 的“红色”、“绿色”比 sRGB 多不少：

图9

图10
也可以用媒体查询来判断是否支持广色域：

@media (color-gamut: p3) {

 /* Do colorful stuff. */

}

当然 @supports 特性查询也是可以的：

 (color: color(display-p3 1 1 1)) {

 /* Do colorful stuff. */

}

在 js 部分，可以用以下代码判断浏览器是否支持 Display-P3 色域：


(window.matchMedia("(color-gamut: p3)").matches) {

 // Add your code.

}

Display-P3 颜色和 sRGB 颜色如何互相转换？最直接的方式是在开发者工具里右键颜色即可。

图11

顺便提一下，MacOS 也自带了一个转换颜色计算器：ColorSync Utility（色彩同步实用工具）。

图12

web 图片用上广色域

在图片的生产流程里，主要牵涉到以下4个颜色配置：

输入和生产，Sketch/Photoshop、相机等
显示器：即设计师显示器
文档：即图片本身
输出（展示端）：如用户手机、用户电脑显示器等

前三步属于生产端，要说把控，其实都可以把控好。关键是用户手机是否支持。除了 iOS 外，目前安卓的色彩管理并不统一，国内的安卓厂商只有一加做的不错。所以想在 web 里使用 Display-P3 的图片，要接受大量安卓手机的色彩管理是 sRGB 的事实，呈现的时候会丢失一部分色彩信息。看上去会没那么鲜艳。

另外，还要注意前端开发过程中，图片压缩工具可能会自动去掉文件的“颜色描述”信息，而且图片 CDN 一般也会去掉这类元数据，然后图片又会被设备以 sRGB 去展示……