顯示器顏色不正常(顯示器顏色不正常怎么辦)
學習顏色一直是UI設計師們非常敏感的問題，我至今仍忘不了那天，一位萌新設計師在走查UI時，給我提了好幾個Bug，大多是顏色有差異問題，我當時的第一反應是去檢查代碼，排查了半天確認自己沒有寫錯色值后，我就在想會不會是取色的問題？于是我做了個試驗，在網頁上設置一個背景色，然后用Chrome自帶的取色器吸了一下這個背景色，結果差點令我懷疑人生：
仔細看這個吸出來的color數值和上面設置的并不相同，為什么屏幕取色會有誤差？我第一反應是找臺別的電腦試試，于是我把這個網頁保存后發給幾個同事一通測試，最終在一臺Windows電腦上發現取色正常，而Mac電腦全軍覆沒。
盡管事實似乎已經指向了一個罪魁禍首，可疑慮沒有在我心中消除。難道是蘋果電腦的屏幕色彩有問題？屏幕也能影響到程序的事件？
要搞懂這些問題，首先得清楚，為什么會有色差？
色彩差異的原因導致在不同設備上產生色彩差異的原因大致有以下幾個因素：
1. 系統色彩管理導致顏色差異2. 軟件色彩管理模式不同導致的顏色差異3. 顯示設備品質差異導致的顏色差異毫無疑問，第三點是最容易理解的，但它的影響只是人眼看到的感受不同，對于屏幕取色不會有影響，那是不是其它兩個因素導致的色差問題呢？
系統色彩管理導致色差顏色一般會在顯示屏上表現為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一天，希望與你共同成長~
發布于：2022-11-23，除非注明，否則均為原創文章，轉載請注明出處。