前端網(wǎng)頁(yè)制作中，瀏覽器顏色顯示存在色差怎么辦，蘋果電腦和非蘋果電腦顯示

時(shí)間：2024-01-29 02:05:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2024-01-29 02:05:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

前端網(wǎng)頁(yè)制作中，瀏覽器顏色顯示存在色差怎么辦，蘋果電腦和非蘋果電腦顯示顏色不一樣怎么解決？：題主這個(gè)問(wèn)題其實(shí)困擾了不少設(shè)計(jì)師及將圖片分享到網(wǎng)站上的攝影師，所以小編決定來(lái)答一波~~




瀏覽器圖片顏色與實(shí)際顏色不符，可能是瀏覽器的問(wèn)題。

事實(shí)上，瀏覽器也會(huì)受到色彩管理系統(tǒng)的控制。當(dāng)圖片上傳到互聯(lián)網(wǎng)上時(shí)，可能由于圖片與瀏覽器的色彩空間不匹配，超過(guò)瀏覽器顯色范圍極限的色彩信息會(huì)丟失，從而產(chǎn)生色彩失真的情況。

題主可以嘗試從以下兩個(gè)方面來(lái)解決：

① 如果圖片采用Adobe RGB色域，建議改成sRGB色域范圍

目前，Windows系統(tǒng)及大部分瀏覽器只支持顯示sRGB色域，如果圖片是采用Adobe RGB色域范圍，建議改為sRGB色域范圍。




因?yàn)閃indows的默認(rèn)色彩空間是sRGB，互聯(lián)網(wǎng)web環(huán)境的默認(rèn)色彩空間也是sRGB。如果在設(shè)計(jì)中使用了Adobe RGB而不進(jìn)行色彩管理，將設(shè)計(jì)作品傳送到互聯(lián)網(wǎng)上，色彩可能會(huì)顯灰，出現(xiàn)嚴(yán)重色偏現(xiàn)象。




② 保存時(shí)圖片加入ICC配置文件并儲(chǔ)存為WEB所用格式，之后使用能支持ICC加載的瀏覽器。

ICC（international color consortium）配置文件是一種描述設(shè)備色彩特性的數(shù)據(jù)文件，主要用于各種設(shè)備之間保持色彩傳遞的一致性。

如果顯示器校色了，那么用校色儀生成的那個(gè)ICC文件；如果沒有校色的條件，那么用顯示器廠商提供的通用ICC文件。

使用支持ICC加載的瀏覽器時(shí)，通過(guò)色彩管理系統(tǒng)對(duì)ICC文件進(jìn)行重新轉(zhuǎn)換與處理，可以輸出不錯(cuò)的色彩，但如果完全不進(jìn)行色彩空間的轉(zhuǎn)換，實(shí)際差異會(huì)非常大。

附上由Web browser color management test提供的瀏覽器色彩管理測(cè)試：

http://cameratico.com/tools/web-browser-color-management-test/

大家只要把這個(gè)鏈接復(fù)制到自己使用的瀏覽器地址欄就可進(jìn)行測(cè)試~

幾款主力瀏覽器Chrome、IE、Firefox、Safari的測(cè)試結(jié)果可看本站文章停止扯淡?。÷勶@示器色彩管理（四）

懶得戳開原文的老鐵，可以看看下面小編做一回搬運(yùn)工整理的內(nèi)容~

Chrome：支持v2 ICC profile的圖片，無(wú)法將untagged的圖片和CSS元素正確默認(rèn)為sRGB色彩空間

IE11：支持v2 ICC profile和v4 ICC profile，能夠識(shí)別tagged和untagged的圖片和CSS元素，卻無(wú)法正確按我們的意圖將圖片的ICC Profile映射到顯示器Gamut上，而是將顯示器Gamut默認(rèn)為是sRGB色彩空間（也就是把ProPhotoRGB的(255,0,0)與sRGB的(255,0,0)直接劃等號(hào)對(duì)應(yīng)，但ProPhotoRGB的色彩范圍比sRGB廣，因此飽和度會(huì)降低）

Firefox：添加插件后，既能夠正確識(shí)別ICC v2和v4，也能正確識(shí)別Untagged的圖片和CSS元素。且能用Perceptual方式將各種Profile的圖片映射到顯示器的Gamut上，色彩管理能力最優(yōu)。

Safari：只能對(duì)Tagged圖片進(jìn)行轉(zhuǎn)換，無(wú)法轉(zhuǎn)換untagged的圖片和CSS元素。




瀏覽器和顯示器的手動(dòng)分割線>>>>>>>>>>>>>>>>>>




嘮完瀏覽器的毛病，再來(lái)嘮嘮顯示器的問(wèn)題~

題主感覺蘋果和非蘋果電腦顏色不一致，我猜可能是兩臺(tái)屏幕的色彩顯示能力不一致。

因?yàn)?f3f3f3偏灰色，#fff偏白色，如果大色塊仍無(wú)法區(qū)分，說(shuō)明顯示器色彩不夠準(zhǔn)確。

打個(gè)比方：

準(zhǔn)確色彩是0，蘋果筆記本屏顯色彩可能是0或者1（取決于你用的哪一款，Pro相對(duì)來(lái)說(shuō)色彩更為準(zhǔn)確，可能達(dá)到0的標(biāo)準(zhǔn)），普通顯示器的色彩顯示能力一般較弱可能是-1。那么顯而易見，因?yàn)轱@色不準(zhǔn)，兩臺(tái)屏幕之間有差值，導(dǎo)致色彩不一致。




解決顯示器色彩不準(zhǔn)的一般方法如下：

① 使用校色儀校色

可參考本站回答筆記本電腦屏幕色差如何調(diào)校？




但校色的意義，是將屏幕的色彩調(diào)整到面板的最佳顯示狀態(tài)。因此，校色的效果，是會(huì)受到屏幕本身的條件基礎(chǔ)限制，如果屏幕本身?xiàng)l件不足，比如色域只有60%~70%sRGB，也無(wú)法調(diào)整到100%sRGB。

因此，如果是因?yàn)轱@示器屏幕本身?xiàng)l件不夠而出現(xiàn)的色差，可以采用另一個(gè)方法來(lái)彌補(bǔ)這個(gè)弊端——選擇專業(yè)顯示器。

② 選擇專業(yè)顯示器

因?yàn)槭怯糜趯I(yè)設(shè)計(jì)，普通顯示器的色彩等參數(shù)并不能滿足設(shè)計(jì)的需求。因此在選擇外接顯示器時(shí)，必須考慮專業(yè)顯示器。

關(guān)于專業(yè)顯示器要如何選擇，可以參考本站回答怎么挑選做設(shè)計(jì)用的顯示器，要看哪些參數(shù)呢？




以上解答希望能對(duì)各位老鐵有所幫助啦，有說(shuō)得不對(duì)的，還請(qǐng)各位大神溫柔指正(〃’▽’〃)