颜色一直是UI设计师非常敏感的问题。我仍然无法忘记有一天，一位可爱的新设计师走过UI，给了我几个错误，其中大部分是颜色差异。我当时的第一反应是查看代码。查了半天确定没有写错颜色值，心想是不是颜色选择器的问题。问题？于是我做了一个实验，在网页上设置一个背景色，然后用Chrome自带的颜色选择器吸取背景色。不一样，为什么屏幕颜色选择有误？我的第一反应是找另一台电脑试试，于是把这个网页保存下来，发给几位同事测试。最后发现在一台Windows电脑上选色正常，但是Mac电脑全部刷完了。虽然事实似乎指向了罪魁祸首，但我心中的疑虑并没有消除。会不会是苹果电脑的屏幕颜色有问题？屏幕也能影响节目的事件吗？要了解这些问题，首先要了解为什么会出现色差？色差的原因不同设备造成色差的原因一般有以下几个因素：系统色彩管理造成的色差软件色彩管理模式造成的色差不同的显示设备质量差异造成的色差毫无疑问，第三点是最容易理解，但它的作用只是人眼感知的差异，不会影响画面的颜色选择。是其他两个因素造成的色差吗？系统色彩管理导致色差。颜色在显示器上通常显示为RGB颜色（即红色、绿色和蓝色三种原色）或LSB/L（色调、饱和度和亮度）。如果你把颜色从一个颜色空间转换到另一个颜色空间，其实这个颜色空间会尽量去适配你想要的颜色，让它们尽可能在同一个位置（由于颜色空间的变化，其实就是转换后颜色不完全一样）。也就是说，RGB值会根据这个颜色空间的定义而变化，并不稳定。现在我们明白了，应该是Mac系统的色彩管理模式有问题。打开Mac的屏幕设置，我们可以看到描述文件中默认的并不是标准的RGB模式：如果我们想让屏幕的颜色值和我们预期的一致，就应该将描述文件改为sRGBIEC61966-2.1软件颜色模式导致色差Chrome颜色配置我们之前更改了系统的颜色配置，重启谷歌浏览器即可正常拾色：这其实是因为谷歌浏览器默认的颜色配置是系统的配置，软件也可以有自己的颜色配置。比如在谷歌浏览器中，我们可以打开这个地址来修改颜色配置，这样就不需要更改系统配置了：chrome://flags/#force-color-profileSketchColorProfileSketch默认的颜色配置文件是“不受管理”。Unmanaged不会附加任何颜色配置属性，因此如果不主动设置，与GoogleChrome一样呈现的颜色会因系统配置而有所不同。Sketch中的颜色配置设置：Photoshop颜色配置Photoshop中的颜色配置设置：创建文件时设置颜色模式和色域（知道是平面还是操作）查看UI，我卡的就是这个。不过这件事也让我明白了屏幕色彩的问题。我希望你永远不会遇到这样一个不专业的设计师。看完有收获，别忘记点赞再走。说了这么多，UI妹子提出页面色差问题怎么办？自信点（偷偷查代码有没有错别字），直接问她颜色值是不是RGB模式取的，对方一脸懵怎么办？看完这篇文章，你不知道该怎么办了吗？以上就是文章的全部内容，希望对大家有所帮助！觉得文章写得好，可以点赞收藏。也欢迎您关注。我会持续更新更多有用的前端知识和实用技巧。一日茶无味，愿与你共同成长~
