UI该如何设置颜色配置文件（色彩空间）

相信很多同学在做设计的时候会发现同样的色值在不用设备不同设计软件上会有不用的色差，特别是在团队协作或者交付开发的时候，明明是同样的色值却呈现出不用颜色，为此十分苦恼；本文将从4个方面简明阐述什么是色彩配置及工作中我们应该怎么做，来缓解你的重度强迫症。

·什么是色彩配置文件（色彩空间）

·UI常用色彩配置文件

·怎么选择色彩配置文件

·Ps、sketch如何修改色彩配置

 

1.什么是色彩配置文件（色彩空间）

这里省略官方废话（兴趣的同学自行百科），简单来讲不同的厂家和设备因为技术不同会调试出不同的效果，支持的色彩配置文件（色彩空间）也不同。色彩配置文件（色彩空间）是指显示设备能表现的各种色彩数量的集合，越广阔的文件能显示的色彩种类就越多。

 

2.UI常用色彩配置文件

UI常用的色彩配置文件为sRGB和Display P3。

sRGB

微软联合HP、三菱、爱普生等厂商联合开发的sRGB(standard Red GreenBlue)通用色彩标准，sRGB代表了标准的红、绿、蓝，即CRT显示器、LCD面板、投影机、打印机以及其他设备中色彩再现所使用的三个基本色素。对于Windows来说，它是缺省的色彩模式。它也是HTML 3.2 和Cascading Style Sheets 1.0的标准色彩模式。

sRGB标准定制较早，sRGB色彩空间大概只有标准的CIE 1931 XYZ色彩空间的1/3, 而且观察色域范围你就会发现一个很严重的问题，sRGB对于绿色部分色域覆盖非常少。这个就导致一个很严重的问题，那就是对花草森林等场景的色彩表现力不足。但由于应用较早，目前设备基本都支持sRGB。

Display P3

Display P3是DCI-P3妥协后的标准，由于互联网上的媒体内容仍以sRGB为绝对主流，为了兼顾sRGB图片的显示效果，许多P3的显示设备也不得不做出了一些妥协。苹果自iPhone7/7 Plus系列的手机产品开始配备。

Display P3使用了DCI-P3更广的色域；但是其标准色温是D65，标准Gamma值被设定为2.2（DCI P3的Gamma值为2.6），这两项都是与sRGB相同的，其目的就是为了适应sRGB图像的显示。DCI-P3规定的标准白色会比Display P3更偏黄一些，且Display P3由于更低Gamma值整体画面风格会更亮一些。

sRGB与Display P3色域对比

 

 

总结

Display P3是DCI-P3妥协后的标准，Display P3的标准色域更广，更为先进，缺点是不能兼容所有设备和技术；相比之下sRGB几乎兼容所有设备和技术。

 

 

3.怎么选择色彩配置文件

色域并不是谁比谁更好，每个色域都有其特定的专精用途，我们只需要选择合适自己的色彩配置文件就好了。选择上分三个维度：个人使用<团队协作<显示设备及实现技术。

个人使用

个人使用看个人喜好用什么色彩配置文件都可以，也可以选择按系统默认不配置色彩配置（非托管）。

团队协作

如设计师之间的协作，为保证输出效果一致，需选择一致的色彩配置文件，sRGB或Display P3均可。

显示设备及实现技术

对于UI同学来说应该注意项目所支持的设备及技术情况；如果实现的设备及技术均支持Display P3的情况下可以选择Display P3标准，否则建议使用兼容范围更广的sRGB，特别需要注意的是目前的网页HTML只支持sRGB标准。

 

4.Ps、sketch如何修改色彩配置

Ps、sketch的色彩配置分为系统色彩配置及文档色彩配置，文档色彩配置优先于系统色彩配置，即系统和文档的配置文件不同时用的是文档的色彩配置文件。

 

ps色彩文件配置

系统色彩配置：编辑-颜色色值，在工作空间建处修改。

文档色彩配置：编辑-指定配置文件。

 

文档色彩配置可以在新建文件时选择。

 

转化为配置文件：指保持颜色不变，更改文件后转化色值。

 

 

sketch色彩文件配置

系统色彩配置：sketch-首选项-画布，在色彩配置处修改。

 

文档色彩配置：文件-更改配置文件；分配指色值不变更改配置文件，颜色会有变化；转化指保持颜色不变，更改文件后转化色值。

 

关于颜色配置今天就讲到这里，我们下期再见啦～