前端要懂的色域知识

水榭花轩

“前端也要面对“五彩斑斓的红”这种世纪难题了吗？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.notebookcheck.net/The-Best-Notebook-Displays-As-Reviewed-By-Notebookcheck.120541.0.html)看看，Notebookcheck是一本国际性的硬件评论杂志，链接里有不少最近笔记本的屏幕色准测评数据（数据真实性没考证，请大家理性对待）。可以看出其实苹果系的MBP其实在笔记本里屏幕色准不是最顶尖的，不过已经是不错的水平。在手机方面，最近的一加8系列的屏幕号称做到了平均ΔE小于1，而小米10则号称ΔE小于1.1，这样的水平已经很不错了。不过笔者没有以上者两款机子，有用过的同学可以来说说感受。广色域这几年的苹果手机、部分安卓旗舰、以及一些显示器都号称支持了广色域，那么广色域到底是什么呢？业界目前没有对这个概念有定义。一般来讲，支持除了sRGB外的色域，如Display-P3、AdobeRGB，都可以称为广色域。这里尤其要说说苹果全家桶，它们都支持了Display-P3色彩标准。为什么要把sRGB取而代之？因为这个标准比较旧，支持的色彩太少，不够“好看”。Display-P3的“红色”、“绿色”会更多。图6Display-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如果您的手机是iPhone7以后的机型、MBP、一加手机等，可以看到第一张红色中间有个webkit的logo，否则看到的只是一张纯红色的。前端能用上广色域吗？答案是肯定的。不过目前只有Safari（UIWebView）支持的比较好。图7CSS写法：.rect{background:rgb(255,0,0);/*此行代码可兼容不支持color()语法的浏览器*//*背景色：红色*/background:color(display-p3100);}这个语法属于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){/*Docolorfulstuff.*/}当然@supports特性查询也是可以的：@supports(color:color(display-p3111)){/*Docolorfulstuff.*/}在js部分，可以用以下代码判断浏览器是否支持Display-P3色域：if(window.matchMedia("(color-gamut:p3)").matches){//Addyourcode.}Display-P3颜色和sRGB颜色如何互相转换？最直接的方式是在开发者工具里右键颜色即可。图11顺便提一下，MacOS也自带了一个转换颜色计算器：ColorSyncUtility（色彩同步实用工具）。图12web用上广色域在的生产流程里，主要牵涉到以下4个颜色配置：输入和生产，Sketch/Photoshop、相机等显示器：即设计师显示器文档：即本身输出（展示端）：如用户手机、用户电脑显示器等前三步属于生产端，要说把控，其实都可以把控好。关键是用户手机是否支持。除了iOS外，目前安卓的色彩管理并不统一，国内的安卓厂商只有一加做的不错。所以想在web里使用Display-P3的，要接受大量安卓手机的色彩管理是sRGB的事实，呈现的时候会丢失一部分色彩信息。看上去会没那么鲜艳。另外，还要注意前端开发过程中，压缩工具可能会自动去掉文件的“颜色描述”信息，而且CDN一般也会去掉这类元数据，然后又会被设备以sRGB去展示……图13未来人对于色彩的追求肯定是越丰富越好，目前在Display-P3、AdobeRGB等广色域的标准加持下，很多终端实现了丰富的色彩输出。但这些标准是尽头吗？可能并不是。比如国际电信联盟无线电通信部门在2012年制定的Rec2020(BT2020)标准，其色域范围可在图3查看。这是一个超高清电视的色彩标准，此标准基本包含了Display-P3、AdobeRGB等现在常见的色域。不过一个色彩标准的普及并不是简单的事，需要内容生产端、用户设备端、软件服务端（如Photoshop/webkit）等行业各个链路的支持，有机会也有阻力，考验着各家厂商的能力。总结如果设计师想在web尝试Display-P3，可在CSS渐进式增强使用，要注意补全fallback颜色web可用Display-P3，注意“颜色描述”元数据不要被干掉电影院放映的电影色彩更像苹果设备的色彩参考资料TheBestNotebookDisplay https://www.notebookcheck.net/The-Best-Notebook-Displays-As-Reviewed-By-Notebookcheck.120541.0.htmlWideGamutColorinCSSwithDisplay-P3 https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/计算机色彩知识调研（一）：色域 https://blog.csdn.net/Jacky_chenjp/article/details/83031544AppleDisplayP3色空间解析 https://zhuanlan.zhihu.com/p/39990465ICCProfiles http://color.support/iccprofiles.html