共计 1399 个字符，预计需要花费 4 分钟才能阅读完成。
色彩始终是 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 一天，心愿与你独特成长~
