顔色一直是UI設計師們非常敏感的問題，我至今仍忘不了那天，一位萌新設計師在走查UI時，給我提了好幾個Bug，大多是顔色有差異問題，我當時的第一反應是去檢查代碼，排查了半天确認自己沒有寫錯色值後，我就在想會不會是取色的問題？于是我做了個試驗，在網頁上設置一個背景色，然後用Chrome自帶的取色器吸了一下這個背景色，結果差點令我懷疑人生：

仔細看這個吸出來的color數值和上面設置的并不相同，為什麼屏幕取色會有誤差？我第一反應是找台别的電腦試試，于是我把這個網頁保存後發給幾個同事一通測試，最終在一台Windows電腦上發現取色正常，而Mac電腦全軍覆沒。

盡管事實似乎已經指向了一個罪魁禍首，可疑慮沒有在我心中消除。難道是蘋果電腦的屏幕色彩有問題？屏幕也能影響到程序的事件？

要搞懂這些問題，首先得清楚，為什麼會有色差？

導緻在不同設備上産生色彩差異的原因大緻有以下幾個因素：

1. 1. 系統色彩管理導緻顔色差異
2. 2. 軟件色彩管理模式不同導緻的顔色差異
3. 3. 顯示設備品質差異導緻的顔色差異

毫無疑問，第三點是最容易理解的，但它的影響隻是人眼看到的感受不同，對于屏幕取色不會有影響，那是不是其它兩個因素導緻的色差問題呢？

顔色一般會在顯示屏上表現為RGB色（也就是三原色紅，綠和藍）或者是LSB/L（色相，飽和度和亮度）。

如果你把顔色從一種色彩空間轉成另一個色彩空間，實際上，這個色彩空間會盡可能适配你要的顔色，讓他們盡可能的在同一個位置（由于色彩空間的改變，其實轉化後的顔色并不能完全一緻）。也就是說這個RGB的數值會根據這個色彩空間的定義而做出改變，它并非是穩定的。

圖片來源網絡

現在我們就明白了，應該是Mac的系統色彩管理模式有問題，打開Mac的屏幕設置，我們看到描述文件這裡默認的并不是标準的RGB模式：

如果我們要想屏幕取色值和我們預期的一緻，應該把描述文件改為 sRGB IEC61966-2.1

前面我們改變了系統的色彩配置，重啟了谷歌浏覽器取色就正常了:

這其實是因為谷歌浏覽器默認的色彩配置是取用系統的配置，而軟件也可以有自己的顔色配置，例如在谷歌浏覽器中我們可以打開這個地址來修改顔色配置，這樣就可以不用改動系統配置了：

chrome://flags/#force-color-profile

Sketch默認的色彩配置為“非托管”。非托管不會附加任何色彩配置屬性，所以和谷歌浏覽器一樣呈現的顔色因系統配置産生差異，如果不主動設置的話。

Sketch中的顔色配置設定：

Photoshop中的顔色配置設定：

後來我才知道那天UI設計是請假了，他們找了個會PS的(不知道是平面還是運營)來走查UI，這才把我給坑了。不過這個事情也讓我搞懂了屏幕色彩的問題，希望你永遠不會遇到這種不專業的設計師，如果看完有所收獲，不要忘記點個贊再走喲。

說了這麼多，當UI妹子提出頁面顔色有差異問題時，怎麼辦？自信一點（偷偷查下代碼有沒有寫錯），直接反問她是不是在RGB模式下取的色值，對方一臉懵逼怎麼辦？看完這篇文章，你還不知道應該怎麼做嗎？

以上就是文章的全部内容，希望對你有所幫助！如果覺得文章寫的不錯，可以點贊收藏，也歡迎關注，我會持續更新更多前端有用的知識與實用技巧，我是茶無味de一天，希望與你共同成長~

,