设计色彩管理(上)

作者: 粒粒 | 来源:发表于2018-08-24 12:54 被阅读1次

    如果有人让你制作一个高为50的咖啡桌,你觉得应该怎么制作?50千米?50英尺?50英寸?50毫米?也可能是50厘米吧……你不能确定到底是什么单位,但是通过常识我们知道对于咖啡桌来说50千米、50英尺、50英寸都太大了,但是50毫米又太小。

    由此可见,在传达数值的时候一定要说清楚单位,否则只是告诉别人“50”这个数值,是没有意义的,只有“50厘米”才传达了具体的桌子的高度。

    本文旨在给设计师和开发者介绍软件的色彩管理,如果你能理解上述例子,那么你也理解了色彩管理概念的重要性——单说色彩数值是不足以描述色彩的,需要有色彩空间的描述。

    不透明的纯红色可以以很多方式描述:网页中是 #ff0000 或者 rgb(255,0,0);iOS系统中是 UIColor(red:1, green:0, blue:0, alpha:1);Android系统中是Color.valueOf(0xffff0000);所有这些书写形式都是在描述同一种色彩。

    然而,这些数值和文章开头例子中的数值“50”类似,都没有单位。“纯红色”是没有意义的,不同显示器对红色的显示程度不同,有些显示器表现的红色就更加鲜艳浓厚。如果想让纯红色在不同的显示器上看起来相同,就应该了解色彩的测量单位;就像开头例子中增加“厘米”单位一样,给色彩增加测量单位,以便人们对色彩在光谱中对应的位置有所感受。

    色彩空间

    颜色空间是将物理世界中的特定色彩映射到设备的测量系统,例如显示器。你听说过“sRGB”,“Adobe RGB”,“Display P3”或者“DCI-P3”吗?这些就是色彩空间,他们就相当于开头例子中的“厘米”。“sRGB”是很多设备的标准色彩空间;“Adobe RGB”,“Display P3”和“DCI-P3”是更宽色域的色彩空间,一般出现在新出的或者更贵的设备上。

    色彩空间比二维的测量单位更加复杂,它不仅仅是定义一个尺度,它在可见光谱中为红、绿、蓝设置了一个白点、范围和尺度,以及其他各种属性。有许多方法可以可视化颜色轮廓,但使用3D船体是一种常见并有用的方式来显示色彩空间。

    下面是sRGB和Display P3的对比图,sRGB显示的颜色比显示P3要少;通过下图的可以看出sRGB是怎样被P3对应和被包含的。

    sRGB是下图中彩色的部分,Display P3是外层的更大的白色的部分。

    任何可以用sRGB描述的色彩都可以用Display P3描述。sRGB的#ff0000在Display P3中是#ea3323(使用不同转换方法这个数值可能会略有不同)

    然而,有些在Display P3中的有色彩在sRGB中就不存在。Display P3的色域更广能表现的色彩更多,特别是深红色和绿色(小编:从上图可以看出P3在绿色和红色部分的面积更大)。Display P3中的#ff0000用sRGB的十六进制数值无法表示,因为这个色彩在sRGB的色域范围之外。(小编:上图中展示了sRGB和P3中的#ff0000,即纯红色在色彩空间中的位置)

    我希望上面的3D图能说明这个重要的观点——当把色彩放到色彩空间去描述的时候,这个色彩就是绝对的、有意义的,包含的信息也是更全面的,也给到设备有足够的色彩信息去尽量准确地显示色彩。

    用sRGB作标准

    前文我说过数值没有单位或色彩没有色彩空间是没有意义的。但是这也不是绝对正确的。在很多情况下,如果没有提供色彩空间,会有一个默认的色彩空间。

    在网页中,sRGB就是CSS和SVG默认的色彩空间。考虑到浏览器的行为,这个问题会变得更加复杂,但情况正得到改善。未来的规则可能会允许使用其他色彩空间。显示P3 CSS颜色可以定义为颜色(P3 1.0 0 0 0)。

    在iOS和Android系统中,sRGB也是默认的色彩空间。但是一般运行这两种系统的设备会支持比sRGB更广的色域和色彩空间。同时sRGB是部分macOS系统的默认色彩空间(由于一些遗留问题,macOS上情况要复杂一些)。

    图片和视频

    到现在我们一直在讨论色彩,这个规律同样适用于图片和视频。很多情况下,图片和视频应该包含色彩描述文件,否则通常默认为sRGB。为了节省磁盘空间,用户界面图像通常会省略嵌入的颜色配置文件,这是因为没有配置文件的行为是已知的。

    宽色域的未来

    在过去,设计师和开发人员在不了解色彩管理工作原理的情况下也能凑合着过,但在未来就不会了。广域显示器的普及意味着色彩管理错误现在更加严重,也更加普遍。如果你有一台新的MacBook Pro或iMac,并在某些应用中的颜色看起来过于饱和,可能就是这个原因。

    如果你正在开发web、iOS和Android应用程序,那么现在有必要了解项目所处的颜色空间,并设置适合你的设计和开发环境。你很可能在sRGB下工作,这是一个好的选择;但当转换发生时,你要清楚你工作在什么色彩空间。

    如果在一个色彩空间中选择颜色,而不通过转换直接在另一个色彩空间使用这些颜色,色彩的显示就会不正确。在使用没有色彩管理的工具时这种情况经常发生,因为它只是默认色彩空间是sRGB然后简单地复制色值。如果出现这种情况,那么在设计图中看起来很好看的颜色,在实际运行的软件中就会看起来很暗淡。

    盒子中的皮克斯

    可汗学院(Khan Academy)的《盒子里的皮克斯》(Pixar in a Box series)系列视频介绍了色域知识,是很好的学习色彩空间的视频;如果你想测试下你对这方面知识的了解,视频还包括一些测试。

    如果您以前不了解色彩管理,我希望本文对您有所帮助。如果你仍然感到困惑,可以联系我问我问题。接下来,我们将深入探讨gamma值、舍入误差以及它们与颜色管理的关系。

    -- 翻译自 bjango --

    相关文章

      网友评论

        本文标题:设计色彩管理(上)

        本文链接:https://www.haomeiwen.com/subject/lmubiftx.html