当UI走查说页面色值错误时，先别急着检查代码
原创
颜色一直是UI设计师们非常敏感的问题，我至今仍忘不了那天，一位萌新设计师在走查UI时，给我提了好几个Bug，大多是颜色有差异问题，我当时的第一反应是去检查代码，排查了半天确认自己没有写错色值后，我就在想会不会是取色的问题？于是我做了个试验，在网页上设置一个背景色，然后用Chrome自带的取色器吸了一下这个背景色，结果差点令我怀疑人生：
仔细看这个吸出来的color数值和上面设置的并不相同，为什么屏幕取色会有误差？我第一反应是找台别的电脑试试，于是我把这个网页保存后发给几个同事一通测试，最终在一台Windows电脑上发现取色正常，而Mac电脑全军覆没。
尽管事实似乎已经指向了一个罪魁祸首，可疑虑没有在我心中消除。难道是苹果电脑的屏幕色彩有问题？屏幕也能影响到程序的事件？
要搞懂这些问题，首先得清楚，为什么会有色差？
色彩差异的原因
导致在不同设备上产生色彩差异的原因大致有以下几个因素：
- 系统色彩管理导致颜色差异
- 软件色彩管理模式不同导致的颜色差异
- 显示设备品质差异导致的颜色差异
毫无疑问，第三点是最容易理解的，但它的影响只是人眼看到的感受不同，对于屏幕取色不会有影响，那是不是其它两个因素导致的色差问题呢？
系统色彩管理导致色差
颜色一般会在显示屏上表现为RGB色（也就是三原色红，绿和蓝）或者是LSB/L（色相，饱和度和亮度）。
如果你把颜色从一种色彩空间转成另一个色彩空间，实际上，这个色彩空间会尽可能适配你要的颜色，让他们尽可能的在同一个位置（由于色彩空间的改变，其实转化后的颜色并不能完全一致）。也就是说这个RGB的数值会根据这个色彩空间的定义而做出改变，它并非是稳定的。
现在我们就明白了，应该是Mac的系统色彩管理模式有问题，打开Mac的屏幕设置，我们看到描述文件这里默认的并不是标准的RGB模式：
如果我们要想屏幕取色值和我们预期的一致，应该把描述文件改为 sRGB IEC61966-2.1
软件色彩模式导致的色差
Chrome色彩配置
前面我们改变了系统的色彩配置，重启了谷歌浏览器取色就正常了:
这其实是因为谷歌浏览器默认的色彩配置是取用系统的配置，而软件也可以有自己的颜色配置，例如在谷歌浏览器中我们可以打开这个地址来修改颜色配置，这样就可以不用改动系统配置了：
chrome://flags/#force-color-profile
Sketch色彩配置
Sketch默认的色彩配置为“非托管”。非托管不会附加任何色彩配置属性，所以和谷歌浏览器一样呈现的颜色因系统配置产生差异，如果不主动设置的话。
Sketch中的颜色配置设定：
Photoshop色彩配置
Photoshop中的颜色配置设定：
设置颜色模式 | 创建文件时的色域选择 |
|---|---|
结束
后来我才知道那天UI设计是请假了，他们找了个会PS的(不知道是平面还是运营)来走查UI，这才把我给坑了。不过这个事情也让我搞懂了屏幕色彩的问题，希望你永远不会遇到这种不专业的设计师，如果看完有所收获，不要忘记点个赞再走哟。
说了这么多，当UI妹子提出页面颜色有差异问题时，怎么办？自信一点（偷偷查下代码有没有写错），直接反问她是不是在RGB模式下取的色值，对方一脸懵逼怎么办？看完这篇文章，你还不知道应该怎么做吗？
以上就是文章的全部内容，希望对你有所帮助！如果觉得文章写的不错，可以点赞收藏，也欢迎关注，我会持续更新更多前端有用的知识与实用技巧，我是茶无味de一天，希望与你共同成长~
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。