色彩空间配置和用法介绍 – 色彩管理色彩空间配置|UI设计

上一节色彩管理请查看：色域、颜色精度、灰度系数和颜色空间转换
我们可以相信色彩管理是专业设计工具的一个基本特征——在选择颜色、决定对比度和评估易读性时，能够依靠你所看到的是至关重要的。前两篇文章介绍了色彩管理的基础知识，本文详细介绍了许多流行设计工具中屏幕设计所需的设置。
你需要的资源和你设计的平台可能会决定最好的色彩管理方法，以及你应该使用的色彩空间。
如果你正在设计一个网站，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，因为他们都可以影响显示精度，而你正在设计，当然也要禁用原彩显示。

文章图片
Sketch在48版之前，sketch没有色彩管理。如果你正在运行一个较旧的版本，请更新。当前版本的sketch是色彩管理，它可以设置为工作在sRGB或Display P3。默认情况下，Sketch的首选项被设置为创建“非托管/Unmanaged”新文档。若你不想要这个，根据你的需要，将其设置为sRGB或Display P3。
我建议使用sRGB作为默认行为，即使你选择在某些文档中使用Display P3。

文章图片
若要将颜色配置文件分配给现有文档，请从“文件”菜单中选择“修改色彩配置”，如果文档没有彩色管理，将分配新的配置文件。
如果一个文档已经设置为sRGB或Display P3，你将被询问是否要分配或转换文档中的颜色。
理解导出工作表中的Save For Web选项的作用非常重要，因为Sketch中的描述有点不准确。即使关闭了Save For Web，也不会保存EXIF数据，而且只有在一种情况下，在导出的映像中包含了ICC配置文件。
当从sRGB文档导出png时，如果启用了Save For Web，则包含一个gamma块。如果禁用了Save For Web，则包含一个sRGB块。我建议在从Sketch导出sRGB png时禁用Save For Web，因为sRGB块是对文件内容的更好描述。sRGB块比gamma块小3个字节，因此将Save For Web关掉可以转换成一个稍微小一点的文件。

文章图片
当从Display P3文档导出png时，如果启用了Save For Web，则包含一个gamma块。如果禁用了Save For Web，则包含一个ICC配置文件块。我建议在从Sketch导出Display P3 png时禁用Save For Web，因为包含一个ICC配置文件对于Display P3文件是必不可少的(如果没有ICC配置文件，大多数浏览器和平台都假定图像是sRGB)。
PhotoshopPhotoshop是有色彩管理的，它可以设置为sRGB或Display P3。即使你需要构建Display P3文档，将sRGB设置为默认值也是一个明智的选择。为此，在编辑菜单下选择颜色设置，然后确保工作空间设置为sRGB，并为RGB文档选择保留嵌入式配置文件。使用Gamma禁用混合文本颜色也是一个好主意。

文章图片
若要将颜色配置文件分配给现有文档，请从“编辑”菜单中选择“指定配置文件”。若要转换为颜色配置文件，请从“编辑”菜单中选择“转换为配置文件”。

文章图片
当使用Photoshop通过Save For Web或Export As导出Display P3 png时，请确保打开“Embed ICC profile”，并禁用“Convert to sRGB”。我还测试了通过生成器导出，不认为它用ICC配置文件保存图像，无论使用什么设置。因此，生成器不能用于Display P3资源。
Save for Web和Export的设置如下所示。

文章图片
Illustrator Illustrator有色彩管理，它可以设置为工作在sRGB或Display P3。即使你需要构建Display P3文档，将sRGB设置为默认值也是一个明智的选择。为此，在编辑菜单下选择颜色设置，然后确保工作空间设置为sRGB，并为RGB文档选择保留嵌入式配置文件。
若要将颜色配置文件分配给现有文档，请从“编辑”菜单中选择“指定配置文件”。若要转换为颜色配置文件，请从“编辑”菜单中选择“转换为配置文件”。
用ICC配置文件从Illustrator中保存png是不可能的，因此它不适合导出Display P3资源。在屏幕的导出中没有与色彩管理相关的设置，所以如果你正在保存sRGB png，则不需要更改任何内容。“另存为Web”确实有一个“转换为sRGB”选项，但是如果你的文档是sRGB，那么这个选项将不起作用。
XDAdobeXD没有色彩管理，也没有色彩管理设置。
Adobe可能已经编写了更多的色彩管理应用程序，并且在色彩管理方面比其他任何公司都有更多的经验。非常令人失望的是，在Adobe的主要界面设计工具中没有任何色彩管理。。
Affinity Designer Affinity Designer有色彩管理，它可以设置为工作在sRGB或Display P3，默认的RGB颜色配置文件可以在首选项中的颜色部分中设置。
若要将文档分配或转换为颜色配置文件，请从“文件”菜单中选择“文档设置”。文档的颜色配置文件可以在Color选项卡中找到。

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

文章图片
Affinity Designer执行导出设置声明要执行的操作，能够包含sRGB图像的sRGB块是很好的，但这不是必需的。
FigmaFigma没有色彩管理，也没有色彩管理设置。Figma桌面应用程序在显示的配置文件中显示颜色—如果你的目标是sRGB，那么文档在Display P3屏幕上看起来太亮了(使用Figma desktop 3.5.3进行测试)。通过Chrome使用Figma(测试版本为64.0.3282.186)或通过Safari(测试版本为11.0.3)可以正确显示所有颜色，但前提是你的目标是sRGB。
如果你的目标是Dipaly P3，我认为不可能正确显示这些颜色。Figma在Firefox中运行时不支持颜色管理。Firefox中可能有一些设置可以改善这种情况，并与Chrome和Safari的工作方式相匹配。
Electron2.0.6添加了一个颜色校正标志，这意味着所有颜色将被视为sRGB，并正确转换为显示器的颜色空间，要在Figma中启用此功能，请运行以下命令:

defaults write com.figma.Desktop ColorCorrectRendering -bool true

应该注意的是，这是一个非常局部的解决方案，而不是全面或适当的色彩管理。
InVision StudioInVision Studio没有色彩管理，也没有色彩管理设定。
InVision Studio现在附带启用了Electron ColorCorrectRendering标志，这使得它在色彩管理方面与Figma不相上下。
比较目前，只有三个被测试的设计工具有完整的sRGB和Display P3工作流程。
对于下面的图表，“sRGB canvas”意味着应用程序可以在画布上正确显示sRGB颜色，“Display P3 canvas”的含义相同，但用于Display P3。
“sRGB PNG”意味着应用程序可以导出带有正确颜色和sRGB块的PNG图像，或者根本不包含ICC配置文件，因为没有配置文件数据的PNG通常被假定为sRGB。如果一个应用程序不能在画布上正确地显示颜色，那么就给它一个通行证是非常仁慈的，但这就是我所做的。
“Display P3 PNG”表示该应用程序可以导出颜色正确的PNG图像和嵌入的Display P3 ICC配置文件。