为什么你的视觉稿导出后，颜色就变灰了？

平时在 PS/Sketch 上设计页时觉色明亮艳丽，是导出或上传至标志平台时画变灰暗，其实是软件颜色配影响。

视觉走查是设计师在页面被开发来时进行的细节检查与汇总，针对没有还原设计稿的页面细节反馈给工程师，并断循环这一步过程直到问题被修复，从而确保被开发来的页面与最初的设计稿一致。

工程计在面对不同的个颜色，工程的是个颜色的数据，计的是个颜色的视觉色彩，因为 PS  Sketch 软件上不同的颜色配置会出现同色值却不同的视觉体验，因此理好 PS/Sketch 、iPhone 实预览插件、标注三者颜色配置，是计协助开发的细节之一。

场景一

常在使用蓝湖或 pxcook 进行页面标注，软件默认无色彩管理，因此识别的色值与 PS 颜色配置「做色彩管」、Sketch 里的色彩描述「RGB-sRGB IEC61966-2.1」是一致的。

场景二

平常在手机预览一优的文章与品时，对优的页面进行采集，但 iPhone 截屏图彩式却是 Display P3，等到 PS/Sketch 打开 iPhone 截屏图时出现「嵌的置文件不匹」，丢弃不匹的置文件之画面显得灰暗。

△ 手机视图（左）PS视图（右)

是因为 iOS 系统下截屏得到的图，其彩置文件是 Display P3，与 PS/Sketch 里的 sRGB 不同，因此丢弃不匹的置文件之画面显得灰暗。

于是使用了 PS 进了以下 5 案测试，Sketch 理。

测试一

PS里：编辑→颜色设→RGB-sRGB IEC61966-2.1 环境下打开图片。

颜色设里工作空 RGB 设为「显示RGB-sRGB IEC61966-2.1」时，色管理案 RGB 会自动「关」闭，这个时候，电脑屏幕上 PS 显示颜色与 iPhone 实时预览颜色致。此时 PS 打开 iPhone 截屏图片会出现「嵌入配文件不匹配」，丢弃不匹配配文件后画显灰暗。

△ PS视图（左）手视图（）PS打开截屏图（右）

测试二

PS里：编辑→颜色设Adobe RGB（1998）并「保留嵌入配文件」环境下打开图片。

颜色设里工作空 RGB 设为「Adobe RGB（1998）」，色管理案 RGB 选择「保留嵌入配文件」，PS 打开 iPhone 系统下截屏图片不会再出现弹窗，截屏图片在 PS 上显示颜色正常， iPhone 实时预览变灰暗。

△ PS视图（左）手视图（）PS打开截屏图（右）

测试三

PS里：编辑→颜色设 Adobe RGB（1998）环境下打开图片，再调回颜色设 RGB-sRGB IEC61966-2.1 环境下处理图片。

图片正被打开，iPhone 实时预览显示正，但由于建画布颜色设置与截屏图片颜色设置同，因此将截屏图层复制至建画布或者进行色彩取时会被自转成「显示器RGB-sRGB IEC61966-2.1」的颜色设置，色值虽然一样，但是画面明显灰暗。

△ 保留色彩配置（左）做色彩管（右）

△ 同颜色配置的同色值颜色

测试四

PS里：编辑→颜色设置 Adobe RGB（1998）环境打开图片，再调颜色设置 RGB-sRGB IEC61966-2.1环境里在截屏件处图片。

图片正常被开，iPhone 实预览显示正常，在截屏文件上进行计，可正常吸取颜色。

传至蓝或 pxcook 行页面标注，平台标注会自动丢弃不匹配的颜色配置文件，转化「显示器RGB-sRGB IEC61966-2.1」下的颜色设置，标注平台的页面数显示灰暗。

△ PS视图（左）手机视图（中）标注平台视图（右）

方案五 —— 完成同步

PS：编辑→颜色置 Adobe RGB（1998）环下开图片，再调回颜色置 RGB-sRGB IEC61966-2.1，使用脑截屏对机截屏文件进行截屏，粘贴至不做色彩管理的新建画布，色值虽然进行了改变，但经过脑截屏的页面色彩机截屏色彩一致，可正常吸取颜色。上传至蓝湖或 pxcook 进行页面标注，标注上的色彩数值页面效果一致。

△ PS视图（左）标注视图（右）

补充

由于 Sketch 处方式同，就一一截图解释。

Sketch 色彩置修改路径如下：

• Sketch →偏好设置→sRGB IEC61966-2.1
• 文件→修改颜色描述文件→sRGB IEC61966-2.1

tip：Sketch 可执行操作「查/替换颜色」对有同数值颜色进行处。

欢迎关注作者的公众号：「大tip」