设计色彩管理（下）

色彩管理是专业设计工具的一个基本特性——在选择颜色、决定对比度和评估易读性时，能够依赖于你所看到的是什么是至关重要的。最后两篇文章(第1部分和第2部分)介绍了颜色管理的基础知识。本文详细介绍了流行的设计工具中设计所需的设置。

设计面向的对象决定了色彩的管理和色彩空间的使用。

如果你在设计网站，CSS和SVG的默认色彩空间是sRGB，因此你的相关文件的色彩空间应该设置为sRGB。CSS level 4可能会支持更多的颜色空间，SVG将来可能会支持。如果您正在编写一个基于web的应用，那么现在也要使用sRGB。

如果你正在设计iOS、Android或Mac的应用程序，也应该使用sRGB。在某些情况下，你可能选择或被要求使用宽色域的配置文件，比如Display P3，但这些情况仍然相当少见。如果选择使用Display P3，那么你仍然需要一套sRGB的色彩设置，这样就会使应用程序二进制文件要大得多(Xcode可以为iOS和macOS生成，应用瘦身可以有所帮助)。如果您使用的是代码绘制元素，那么Android、iOS和macOS都支持宽色域的配置文件(但支持根据你需要的操作系统版本而有所不同)。

Display P3和其他颜色空间将变得更加常见，但最简单的方法是：如果你不确定，就使用sRGB。颜色管理问题调试起来非常麻烦，所以一开始设置色彩空间是很重要的，并确保所有团队成员对他们的工具和文档使用相同的色彩设置。

分配或转换

在更改文档的颜色配置文件时，通常可以采用两种方法——分配配置文件或转换配置文件。它们都有各自的用途，取决于具体情况。

为文档分配一个配置文件可以保持原始颜色值不变(#ff0000将保持#ff0000)，但是色彩表现会随着新的颜色配置文件的应用而改变，相当于简单地给文档加个新的色彩空间的标签。这就像说“这个文档是sRGB”而不改变文档本身的内容。

转换配置文件正好相反——原始颜色值改变，但色彩表现尽可能的相同（转换配置文件需要对每个颜色数值进行读取、转换和写入；源文件和目标文件之间可能会出现一些舍入和裁剪）。由于颜色配置文件的转换是不可逆的，所以在转换之前最好对文档进行备份。

系统设置

在Mac上，「系统偏好设置」中的「显示器」选项可以更改与显示器的颜色配置文件。设置不会改变显示器本身，只会改变系统认为的显示器的属性。你应该设置为默认选项(“彩色LCD”、“iMac”或类似的设置，在列表的顶部)，或者使用校准设备。不建议修改这些默认的设置。

我还建议禁用自动调整亮度、夜视、f.lux（根据经纬度调节显示器色温的软件）等功能，因为做设计的时候，这些都会影响显示的准确性；当然也要禁用2018Mac更新的 True Tone 功能。

Sketch

在Sketch 4.8之前，Sketch没有色彩管理功能。如果你使用的是旧版本Sketch，请更新。Sketch的当前版本有色彩管理功能，它可以设置为在sRGB或Display P3下工作。默认情况下，Sketch新建的文件是没有色彩管理的。根据需要，你可以将色彩空间设置为sRGB或Display P3。

我建议将sRGB用作默认，你可以在某些文档中单独设置为Display P3。

为现有文档分配颜色配置文件，请从「File」中选择「Change Color Profile」。如果文档之前没有颜色管理，将分配新的颜色配置文件；如果一个文档已经设置为sRGB或Display P3，您将被询问是否要分配或转换文档中的颜色。

理解「Save For Web」的作用是很重要的，因为Sketch中的描述有点不准确。即使「Save For Web」未被勾选，也没有EXIF数据被保存；而且只有一种情况下，导出的图片中包含ICC配置文件。

sRGB色彩配置的文档导出png时，如果启用了「Save For Web」，会包含一个gamma块。如果禁用了「Save For Web」，则包含一个sRGB块。我建议导出png时禁用Save For Web，因为sRGB chunk是对文件内容的更好描述。sRGB块比gamma块小3字节，因此关闭Save For Web会导致文件稍微小一些。

Photoshop

Photoshop有色彩管理，可设置为在sRGB或Display P3下工作。即使你偶尔需要色彩空间为Display P3的文档，最好仍将sRGB设置为默认。在「编辑」菜单下选择「颜色设置」，然后将工作空间设置为sRGB，并为RGB文档选择保留嵌入概要文件；同时最好禁用「用灰度系数混合文本颜色」(原因如下)。

若要为现有文档分配颜色配置文件，请从「编辑」菜单中选择「分配配置文件」。要转换为颜色配置文件，请从「编辑」菜单中选择「转换为配置文件」。

Bjango Photoshop动作包含“快速转换”和“分配到sRGB和Display P3”的动作。

当用Photoshop通过菜单栏的「文件」-「导出」-「导出为web所用格式」或「导出为」导出Display P3的png时，请确勾选「嵌入颜色文件」，并禁用「转换为sRGB」。我还测试了通过「生成」导出，这种方式并不会保存颜色文件，因此不能用于Display P3。

上述「导出为web所用格式」和「导出为」的设置如下

illustrator

Illustrator有色彩管理，它可以设置为在sRGB或Display P3工作。即使你偶尔需要色彩空间为Display P3的文档，最好仍将sRGB设置为默认。在「编辑」菜单下选择「颜色设置」，然后将工作空间设置为sRGB，并为RGB文档选择保留嵌入概要文件；

若要为现有文档分配颜色配置文件，请从「编辑」菜单中选择「分配配置文件」。要转换为颜色配置文件，请从「编辑」菜单中选择「转换为配置文件」。

Illustrator不能导出包含颜色文件的png图片，因此它不适合导出Display P3图片。在「导出为屏幕所用格式」中没有与颜色管理相关的设置，所以如果您正在保存sRGB的png，就不需要设置。「存储为web所用格式」确实有一个“转换到sRGB”选项，但如果文档是sRGB则没有任何影响。

image.png

XD

Adobe XD没有颜色管理，也没有颜色管理设置。

Adobe已经编写了很多的有颜色管理的应用程序，并且比其他任何公司都有更多的色彩管理经验。但令人失望的是，Adobe的主打界面设计工具中竟没有任何颜色管理功能。希望Adobe能尽早加入这方面功能，大家可以通过这个投票来支持XD的颜色管理功能。

Affinity Designer

Affinity Designer有颜色管理，可以设置为sRGB或Display P3。默认的RGB颜色配置文件可以首选项的颜色部分设置。

要将文档分配或转换为颜色配置文件，请从“文件”菜单中选择“文档设置”。文档的颜色配置文件可以在Color选项卡中找到。

Affinity Designer的导出选项非常特殊，可以完全控制保存的内容。对于sRGB的png，我建议每个通道使用8bit，没有元数据，也没有颜色配置文件。对于DisplayP3的png，我建议每个通道使用16位，没有元数据，并包含颜色配置文件。根据使用的不同可能略有变化。

Affinity Designer可以完全执行导出设置的操作。如果能够为sRGB图像包含一个sRGB块就好了，但这不是必需的。

image.png

Figma

Figma没有颜色管理，也没有颜色管理设置。Figma桌面应用程序在呈现显示器的颜色——如果是sRGB文件，那么在Display P3屏幕上会看起来更鲜艳(使用Figma desktop 3.5.3进行测试)。在Figma在Chrome中（测试版本为64.0.3282.186）或通过Safari（测试版本为11.0.3）能正确显示所有颜色，但前提是sRGB。

如果你的目标是Display P3，则不能正确显示这些颜色。在Firefox中运行Figma时不进行颜色管理。Firefox中可能有一些设置可以改善这种情况，并与Chrome和Safari的工作方式相匹配。

InVision Studio

InVision Studio没有色彩管理，也没有色彩管理设置。

比较

目前，测试的设计工具中只有三种具有完整的sRGB和显示P3工作流。

下图中，“sRGB canvas”表示应用程序可以在画布上正确显示sRGB颜色。“Display P3 canvas”的意思是相同的，但用于Display P3。

“sRGB PNGs”表示应用程序可以导出带有正确颜色和sRGB块的PNG图像，或者根本不包含色彩配置文件，因为没有配置文件数据的PNG通常被认为是sRGB。如果一个应用程序不能在画布上正确显示颜色，那么至少它就可以在这方面（正确导出）进行改进。

“Display P3 PNGs”表示应用程序可以导出正确颜色的PNG图像并嵌入的Display P3的颜色配置文件。

上述比较只涉及到表面的功能——WebP导出、图像导入、位深度以及其他许多因素也应该加入比较。考虑到色彩管理的“要么全有，要么全无”的性质，仅部分功能支持往往无济于事，需要一个从开始到结束完整的管理。

总的来说，设计工具在色彩管理方面做得还不够，亟待改善。

-- 翻译自 bjango --