如果有人让你做一个咖啡桌,他们指定桌腿的高度为50,你认为这意味着什么?50公里吗?50英尺吗?50英寸?50毫米?可能是50厘米。你不能确定,但你可以根据这张桌子的用途来猜测——50公里、50英尺和50英寸对于一张咖啡桌来说太大了,50毫米则太小了。
文章图片
如果他们指定了测量系统就更好了。“50”本身是一个没有意义的值,但是“50cm”提供了桌腿的绝对物理特性。
本文旨在为软件设计人员和开发人员介绍色彩管理。如果你理解了上面的例子,那么恭喜你,你现在理解了最重要的色彩管理概念——色彩的值单独不足以描述一个颜色,你需要一个颜色值和它存在的空间的描述。
【色彩空间基本概念 – 色彩管理】一个完全是红色,没有绿色,没有蓝色和完全不透明的颜色可以用多种格式书写。在web上可以是#ff0000或rgb(255, 0,0),在iOS上可以是UIColor(red:1,green:0,blue:0, alpha:1)。而且,在Android上它可以是Color.valueOf(0xffff0000)。它们都是同一件东西的不同形式——全强度的红色,没有绿色,也没有蓝色。
然而,这些值与上面的“50”类似——它们没有度量单位。“完全红”是没有意义的。什么红色?不同的显示器有不同的红色最大强度。有些品种的红酒比其他品种更有活力,颜色更深。如果你想让红色在不同的显示器上看起来相似,我们需要知道单位的度量。我们需要与上面的“cm”相对应的颜色,以了解这种红色在可见光谱中的对应关系。
色彩空间(颜色空间)色彩空间允许我们将物理世界中的绝对色彩映射到特定于设备(如显示器)的测量系统。你听说过“sRGB”、“Adobe RGB”、“Display P3”或“DCI-P3”吗?这些都是色彩空间,它们与上面的“cm”相似,sRGB是许多设备的标准色彩空间。Adobe RGB、Display P3和DCI-P3是更广泛的色域空间(色域,gamut),现在可以在更新或更昂贵的设备上找到它们。
文章图片
色彩空间比度量单位更复杂。他们不仅定义了一个比例,他们还为可见光谱中的红、绿、蓝设置了白点、范围和比例,以及其他各种属性。有许多方法来可视化色彩轮廓,但使用3D模型是一个常见和有用的方式来显示他们。
下面是sRGB和Display P3的比较。sRGB显示的颜色比Dispaly P3少,当它们以这种方式进行比较时,就有可能看到sRGB如何适应Display P3。
sRGB的颜色如下所示,Dispaly P3是较大的白色鬼影形状。
文章图片
任何被描述为sRGB的颜色也可以被描述为Dispaly P3。sRGB中的#ff0000是
DispalyP3中的#ea3323(根据使用的转换方法,该值可能略有不同,但范围更广的值不变)。
然而,在Dispaly P3空间中有一些颜色是sRGB空间中没有的。Dispaly P3的色域更宽,可以代表更多颜色,特别是深红色和绿色。#ff0000在Dispaly P3中不能被描述为sRGB十六进制值,因为它超出了sRGB范围。
我正在尽我最大的努力坚持最基本的,但我希望上面的3D图展示了一个重要的点——当你分配一个颜色配置文件给一个颜色值,它变得绝对,因而它有更多的意义,它为显示它的设备提供了尽可能精确地重现颜色所需的一切。
sRGB标准上面的值没有度量单位,或者没有颜色空间,严格来说不是这样的。在许多情况下,如果没有提供颜色空间,则假定存在默认的颜色空间。
在web上,sRGB是CSS和SVG的标准颜色空间。当你将浏览器行为考虑在内时,情况会变得稍微复杂一些,但是情况正在改善。未来的规格可能也会允许颜色使用其他颜色空间,CSS颜色可以定义为颜色(P3 1.0 0 0)。
在iOS和Android上,sRGB也是默认设置,但都支持更宽的色域和颜色空间。在macOS上,sRGB是默认的(由于一些遗留问题,情况要复杂一些)。
图像和视频到目前为止,我们一直在讨论单色值,但是同样的概念也适用于图像和视频。在许多情况下,图像和视频应该嵌入颜色配置文件。如果没有,通常认为是sRGB。为了节省磁盘空间,用户界面图像经常忽略嵌入的颜色配置文件,因为没有配置文件的行为是已知的。
一个更宽的色域在过去,设计师和开发人员在不了解色彩管理如何工作的情况下也能应付过去,但在未来情况就不同了。宽色域显示器的普及意味着色彩管理错误现在更加严重,也更加普遍。如果你有一台新的MacBook Pro或iMac,而且某些应用程序的颜色看起来过于饱和,这可能就是原因。
如果你正在开发web、iOS和Android应用程序,现在有必要了解项目所在的色彩空间,并设置适合的设计和开发环境。你可能在sRGB中工作,但这是一个积极的选择,这很重要。重要的是,你要知道转换是否发生以及何时发生。
如果颜色是在一个颜色空间中选择的,然后分配一个不同的颜色空间,而不是转换,他们将看起来不正确。这种情况经常发生在使用一个不在宽色域显示中管理颜色的工具时,然后将值复制到项目中,在那里它们被假定为sRGB。如果发生这种情况,颜色在设计工具中看起来会很生动,而在运行中的应用程序中会很单调。
如果你以前不懂色彩管理,我希望这篇文章对你有所帮助,接下来,我们将更深入地讨论gamma、舍入误差以及它们与颜色管理的关系。
推荐阅读
- 色域、颜色精度、灰度系数和颜色空间转换 – 色彩管理
- sketch toolbox(常用插件合集 – Sketch入门UI设计教程)
- sketch使用渐变(线性和径向渐变 – Sketch入门UI设计教程)
- sketch符号和导出画板 – Sketch入门UI设计教程
- 使用Python中的不同图表进行数据可视化
- Java中的数据类型详细解读和指南
- C++中的数据类型范围及其宏详细指南
- NumPy Python中的数据类型对象(dtype)
- Python中的进度条如何实现和使用()