色彩管理: 如何讓自己的照片在網上正確地顯示？

12-06

做了一陣子功課有所收穫，自問自答分享一下。

色彩管理確實是個複雜的話題，前陣子我也被它弄得煩不勝煩。網上搜索一番發現相關文章都晦澀難懂，硬是啃完那些文章，我的問題解決了，但也發現這個話題其實完全可以用淺顯的方式來解釋，於是就分享出來給大家省點時間。
作為一個攝影愛好者，我的絕大部分照片都是用來在網上分享的，所以本次討論的重點是如何讓自己的照片在網上正確地顯示。
當然，也會有另外一小部分照片是自覺拍得特別好的，列印出來拿出去得瑟，但那個就不在此次討論範圍了。

本文對應的PPT可以到百度雲下載：
十分鐘搞懂色彩管理.pptx_免費高速下載

問題出在哪？
首先，模仿那張著名的CMOS尺寸示意圖，我們來粗略地比較一下幾個常見的色彩空間：

可見，各個色彩空間表達顏色的能力大相徑庭。而這種不同也正反映了我們平時使用的各種屏幕（顯示器、手機屏幕、iPad屏幕）顯示顏色的能力不同，同一個顏色代碼在不同屏幕上看上去極有可能是不同的顏色。所以我們不得不在若干個色彩空間之間轉換，而色彩不一致的問題，就出在轉換的過程中。
讓我們通過下一頁的圖表來看看一張照片從RAW文件到被人眼看到都經歷了哪些步驟。

* 勘誤：RAW本身是沒有色彩空間的，詳情見最後的增加的一頁

在這些步驟中，兩個紅色箭頭標出的就是最容易出問題的地方，因為它們都會把圖片在兩個色彩空間之間轉換。
第一個紅箭頭代表的是P圖階段，第二個紅箭頭代表的是看圖階段，接下來我們就針對這兩個階段來研究一些對策。

校色是前提
無論你用的是什麼顯示器，都必須經過校正才能顯示出正確的顏色。

誰能告訴我上面幾個色塊里哪個是標準的紅色？反正我是不能，不要相信自己的眼睛，因為它太容易被騙，讓校色儀來解決這個問題。
還有人說專業P圖用的都是蘋果，那我買個蘋果的顯示器或者筆記本不就行了。蘋果的OSX在顏色管理方面確實比WINDOWS要先進一點點，但不代表它的顯示器就會一直顯示正確的顏色，就拿我自己的兩台MBP來說，都是偏黃的，而且各有各的偏。所以無論你是用DELL、EIZO還是蘋果的顯示器，請校色！

插播老段子一則：啊不不，張總，是這樣的，再貴的顯示器都要校色的。

校色儀太貴？
淘寶上紅蜘蛛100塊租一天，可以把電腦、手機、iPad、筆記本甚至電視機全都校一遍。

顯示器ICC文件
通過校色，我們可以得到一個ICC文件，這個文件是針對被校正的那台顯示器生成的一個色彩空間描述文件。有了這個文件，各種軟體就有了在不同色彩空間之間轉換的依據。

有人問，同樣型號的顯示器，我把別人生成的ICC文件拷貝過來用可以嗎？
想得美！每台顯示器或多或少都有點區別，同一批次可能行得通，但批次這東西誰說得清。
另外，廠家給你提供的那個默認的ICC文件其實就是省事的做法，因為逐台校色實在太費時間，所以這個事情得自己做。校色後WINDOWS長啥樣

就拿我的WINDOWS機器舉個栗子，經過校色之後的系統設置如圖（控制面板-&>顏色管理，即可進入該界面）

首先，在設備列表裡選中你的顯示器(DELL U2413)
然後你會在ICC配置文件列表裡看到若干個項目：

Dell U2413(HDMI)-1(默認值)
這個就是校色儀生成的配置文件，設置為默認值的意思就是該文件在系統里生效了，你現在在顯示器上看到的任何顏色都是用這個ICC文件轉換出來的。
Dell U2413 Color Profile, D6500
這個是DELL提供的通用ICC文件，你可以試試把這個設為默認，會發現屏幕會有非常明顯的變化（人眼的不可靠啊。。）
sRGB IEC61966-2.1
這個就是WINDOWS默認的色彩空間了，也是網路通用的色彩空間（微軟一廂情願地希望用sRGB來統一宇宙色彩空間，但被現實無情地鄙視了）

那麼多ICC配置文件，用哪個？
無論你在系統的ICC列表裡看到多少個配置文件，遵循以下原則：

如果校色了，那麼用校色儀生成的那個ICC文件，這個一定是首選。
如果沒有校色的條件，那麼用顯示器廠商提供的通用ICC文件。

只有以上兩個是最接近真實的方法，網上一部分教程建議把色彩空間統一設置為sRGB是非常錯誤的做法，那樣做的效果只是讓同一張圖片在你自己電腦的不同軟體上看起來是一樣的，但世界上的其他人看到的跟你都不一樣！

--------------------------------下面進入P圖階段-----------------------------------

P圖階段（Photoshop）

P圖階段所用到的軟體，比如Photoshop、Lightroom等都對色彩空間有很好的支持。先說Photoshop，進入色彩設置界面（編輯-&>色彩設置），在顯示器顏色的設置中，RGB三原色所對應的ICC配置應該與上一節里所展示的WINDOWS設置一致。

當你在PS里打開一張圖片的時候，你很有可能遇到這個對話框：

以下三張圖分別對應著從上到下三個選項的效果：

無論如何都不要選第三項，因為它粗暴地放棄了色彩管理，那張圖看起來也非常假

不得不說的是，有人還就喜歡把圖調成這種重口味的，哈哈，但即便是這個審美傾向，也不應該選這個

剩下的兩個，乍一看選任何一個都可以，因為看上去效果是一樣的，顏色自然而真實，下面將介紹它們之間的區別。

首先，被打開的圖片是一張內嵌了ICC色彩配置的RAW文件，而那個ICC就是常見的Adobe RGB。而我的顯示器校正以後的ICC簡稱為U2413，這也是Photoshop和Windows當前生效的色彩配置。兩個選項的作用分別是：

使用圖片內嵌的色彩配置
PS處理圖片的時候用的是原有色彩空間Adobe RGB，僅在顯示的時候轉換為U2413
把圖片從自己的色彩空間轉到
PS色彩空間 PS直接把圖片里的顏色從Adobe RGB轉換到U2413，顯示的時候就不需要再轉了

看上去非常繞，事實上以上兩項無論你選哪個，影響的都只是PS的內部運算，而在顯示的時候，PS都會把顏色轉換到U2413，所以最終看到的效果都是一樣的。

選哪個？
簡單來說，就跟我們追求大的動態範圍是一個道理，如果圖片內嵌的色彩空間大於你當前的色彩空間，那麼保留。比如在這個例子里，Adobe RGB是比U2413要豐富的，那我們選第一項來保留原有色彩空間。而如果原圖內嵌的僅僅是sRGB這樣的貨色，那轉成U2413這樣的廣色域也未嘗不可。

還能再簡單點嗎？
能，一律選第一項！

P圖P得差不多就可以導出成JPG了，Ctrl+Shift+Alt+S就進入了導出JPG的界面，紅框里的區域就是關鍵：

務必要勾選「轉換到sRGB」

sRGB就是瀏覽器里看圖片的最保險的色彩空間，因為WINDOWS默認色彩空間就是這個，而WINDOWS又是最被廣泛使用的操作系統。各個顯示器廠家在生產的時候，也盡量保證sRGB色彩空間顯示出來不會太離譜。可以說，把圖片導出到sRGB色彩空間的這個做法，就是針對網路瀏覽的最佳實踐，所以請務必勾選。
至於那個下拉框里的四個選項，是用來預覽導出後的圖片在不同條件下面查看的效果，從上到下解釋一下：

在IE和WINDOWS上看的效果（僅限於你自己的機器）
在古董MAC下看的看的效果
在支持完整色彩管理的瀏覽器下看的效果，比如Chrome和Firefox（近似別人看到的效果）
在你自己的顯示器上看的效果（同時也是別人看到的效果）

請以第四項的效果為準，同時可以參考第三項的效果，頭兩項則可忽略。

這些天殺的軟體啊，給我那麼多選項做什麼，老子只要最make sense的那個！

P圖階段（Lightroom）
Lightroom相對傻瓜化，根本找不到任何與色彩管理相關的設置，它的工作方式是保留原圖的色彩空間，顯示的時候轉換為系統默認的色彩空間，導出JPG的時候一律轉成sRGB。我覺得這個工作流非常正確，保留原圖色彩屬性，用正確的顏色預覽方便P圖，導出為網路通用色彩空間，完美。
所以在一台經過校色的顯示器上，你在Lightroom裡面看到的就是正確的顏色，導出以後可能會稍有偏差（主要是沒那麼鮮艷了），但也非常接近原有效果了。
如果你使用LIGHTROOM，恭喜，你啥都不用做，相信它就好。

有人會問，為什麼LR導出來的圖片放在IE裡面看，會異常鮮艷呢？
答案是你很有可能使用了廣色域顯示器，接下來進入看圖部分。

看圖階段

有沒有發現導出的JPG放到瀏覽器里就變得異常鮮艷呢？這就是之前困擾我許多天的問題，我翻閱很多文章，來回倒騰系統設置，甚至重新P圖，非常挫敗，所以得解時幾乎內牛滿面啊。。。
首先，那個把圖片顯示得異常鮮艷的瀏覽器極有可能是IE或者各種帶殼的IE（比如騰訊瀏覽器、360瀏覽器等所有以IE為內核的瀏覽器。。。），因為IE的顏色管理是半吊子。它雖然支持的ICC版本最全（版本2和4都支持），但它在顯示的時候，漏掉了最重要的一步，也就是把圖片從sRGB轉換為顯示器的色彩空間（還是拿我舉個栗子，就是之前提到的U2413）。
接下來讓我們來仔細分析並想一些對策。

讓我們來複習一下這張圖，理論上瀏覽器應該把圖片從sRGB轉換為顯示器色彩空間（U2413）來顯示。但IE偏不這樣，它直接把未經轉換圖像數據直接丟給顯示器了，這就相當於一個中國人看一部印度字幕的美國電影，就是這麼滑稽。背後原因不得而知，以下純屬個人猜想：

微軟自己主導sRGB，所以一切到此為止
轉換要時間的啊，為了性能，不轉了，反正大部分人看不出來

而所有其他瀏覽器都做得很到位，無論是Chrome、Firefox還是Safari，都會兢兢業業地做色彩空間地轉換，讓你看到真實的效果。

這個問題有多嚴重？
這個問題並不嚴重，因為僅在使用廣色域顯示器的情況下，這個問題才變得顯眼。而廣色域顯示器並不是那麼普及，大部分人用的還是是普通（非廣色域）顯示器。對於普通顯示器，由於它們在生產的時候就是針對sRGB色彩空間的，所以直接把sRGB的圖像數據往上丟也是行得通的，即便沒有那麼準確，但也八九不離十。
所以，如果你以正常流程P圖、導出JPG，那麼絕大部分人看到的都是正常的顏色。
而如果你正在使用廣色域顯示器，千萬不要罵它，廣色域可是好東西，讓你以最豐富的色彩空間來處理圖片，所以只要解決那一點點不太和諧的看圖問題就好了。

如何用廣色域顯示器在WINDOWS里看到真實的色彩呢？
無論是IE還是WINDOWS資源管理器里的預覽，圖像都不做色彩空間轉換。但是「Windows圖片查看器」除外，它和其他幾個瀏覽器一樣，會老老實實地做色彩轉換，所以用它看到的圖片，就是正確的顏色。
其次，各種第三方看圖軟體，比如ACDSee和IrfanView，默認是不做色彩空間轉換的。所以你要做的是到更改它們的設置，把色彩管理的選項給勾起來。
如圖所示，我自己用的是IrfanView，到設置裡面把相應的選項勾上即可（當然會需要到官網下載一點額外的插件，相信難不住聰明的你的）

最後，盡量避開IE及其馬甲，改用Chrome、Firefox或Safari等對色彩空間有完整支持的瀏覽器，以它們的顯示效果為準。

如果你用蘋果

如果你使用的是蘋果電腦（裝Windows的除外），那麼恭喜你，無論是P圖還是看圖，唯一需要做的事情就是校色。
即便不校色，Mac的顯示效果也是非常接近真實的。
OSX接管了所有顏色管理的事情，不需要用戶操心。
這就是那麼多人愛用蘋果來做圖的原因。

擴展閱讀 – RAW文件的色彩空間
文章在知乎上引起了一些討論，有專業人士指出本文的一些錯誤，非常感謝。
RAW文件本身記錄的是相機感測器（CMOS）對光線的物理反應，所以它本身是沒有套用在任何色彩空間的。
那麼問題來了，相機的色彩空間會影響RAW嗎？
答案是不會，這個和相機內設置的色溫是類似的效果，隻影響機內直出的JPG。

本文提到RAW的時候直接套用了Adobe RGB色彩空間確實欠妥，因為色彩空間是在Adobe Camera Raw(ACR)插件在解析RAW文件的時候套用上去的。我們不僅可以查看，還可以改變ACR的工作方式。

如圖所示，紅框里的就是ACR渲染RAW時候的設置，用的是Adobe RGB色彩空間，每個通道的深度是16位。
點擊它就可以進行進一步設置。

這是ACR的設置界面，列表裡面有四種色彩空間供選擇。
個人認為，色彩空間的選擇，應當盡量與當前顯示器的顯示能力相匹配，選擇過大或過小的色彩空間，都會造成色彩的不準確或損失。

Adobe RGB，市面上的廣色域顯示器，大部分是針對該色域設計的，能夠表達99%的色彩。所以如果是用的廣色域顯示器，可選擇Adobe RGB。
ProPhoto RGB是比Adobe RGB更加寬廣的色彩空間，寬廣到大部分顯示器無法顯示，所以選擇它意義不大。
再就是sRGB，如果你的顯示器是針對sRGB校準的，那麼選擇這個色彩空間也是可以的。
ColorMatch RGB與sRGB比較接近，如果你都沒有聽說過，那忽略它吧。

最後，希望本文能幫到你。
本文主要參考了以下文章：
WEB BROWSER COLOR MANAGEMENT Tutorial

期待與各位攝友交流
新浪微博：@李少俠本人
無忌：Romex
Flickr: Flickr: 李少俠"s Photostream
Lofter: 李少俠

兩個謬誤
1，RAW並不是Adobe RGB色彩空間的，在ACR濾鏡中解碼後得到的圖片為PROPHOTO
RGB，比AdobeRGB大得多。
2，PS的工作空間應該選擇的是AdobeRGB，然後每次通過ACR解碼出來的Prophoto
RGB導入PS後應先自動轉為AdobeRGB（輸出用），潤色後保存為sRGB和AdobeRGB兩個版本
sRGB網路使用，AdobeRGB輸出用。

題主說的很對，之前色彩管理一直困擾我，現在照著題主做就解決了，我就舉我的例子來說明吧。我平時在筆記本上用sai畫畫，但是Thinkpad渣渣屏幕色彩泛白的厲害，用紅蜘蛛校色後，又出現一個新問題，就是sai裡面的顏色導成jpg後偏差嚴重。

Sai這個軟體本身不帶顏色管理，所以說用它導出jpg時沒有使用校色的文件設置，導致生成的jpg跟sai裡面的顏色不一致。圖1為sai中的圖片導出為jpg後的對比，在校過色的筆記本上看的。我們可以發現兩張圖片頭髮的顏色明顯不同，雖然jpg在ps裡面打開時頭髮的顏色的rgb值跟sai裡面讀取的顏色是一樣的。

圖1

下面我按照題主的方法，在sai裡面把圖片保存成psd，通過psd的顏色管理來導入顯示器的參數，這時sai和ps顯示的顏色是一致的，最後保存jpg。無論是否選擇勾選轉換為srgb，生成的圖片用windows自帶的照片查看器看是一樣的(勾選轉換為srgb的圖片千萬別用PS打開，因為你的PS已經導入顯示器的參數，這時看這張圖會產生類似負負得正的效果，產生顏色偏差)。那麼我們還需要勾選這個選項嗎，答案是必然的。這時我們需要第二台電腦來做對比，我把圖片都拷貝到一台未經過校色的台式機中。

圖2沒有勾選轉換為srgb的情況，同一張圖分別用sai和ps打開。雖然兩張圖片中頭髮的rgb值是一樣的，但是可以明顯看到區別。

圖2

勾選轉換為srgb後如圖3所示，這時兩個軟體的顯示偏差就很小了，相同地方的顏色的rgb值基本相同。

圖3

所以說，圖片給別人看的話，一定要勾選轉換為srgb。勾選轉換為srgb的目的就是怕一些軟體顯示不正常，比如我的sai。

最後我將筆記本的原圖和台式機上的jpg對比，圖片的顏色基本一致，很滿意。但是相同地方的顏色的rgb值卻是不同的，這說明校色後，如果導出jpg沒有使用校色文件參數，導出的圖片的色彩永遠會有偏差的。

我畫的這張圖是網上找的一張圖描了練練手的，侵刪。原圖放在下面。

網上展示，不管你用那種，最後輸出時一定要用sRGB

我想問一下我的屏是PA249Q，有三個模式ARGB SRGB和標準模式，買了校色儀是切換到ARGB還是SRGB還是標準模式下校色呢？平時使用呢？

感謝分享。在PS里使用「儲存為Web所用格式」Shift+Ctrl+Alt+S這個功能，在預覽窗口就可以看到模擬在網路上的看到的效果，所以應用於網路上的照片都可以用這個功能保存

謝謝老師的總結！我有個疑問：導出的JPG放到IE瀏覽器里就變得異常鮮艷，和IE瀏覽器沒有把圖片從sRGB轉換為廣域色顯示器的色彩空間怎麼聯繫起來？我還是看不出來因果關係？

看了這麼多色彩管理的，還是無忌後期板塊的巫師寫的閑話色彩空間最靠譜，沒有之一。

您好，我覺得應該選擇最大的色彩空間ProPhoto RGB。原因1是我們可以用softproofing來調整照片使照片符合顯示器所能呈現的色彩空間。原因二是說不定以後廣色域顯示器發展的更牛，可以看到更多的色彩。原因三是牛逼印表機的色彩空間超過了Adobe RGB。Lightroom默認色彩空間是ProphotoRGB肯定是有它們的考量的。

如果你想要在網上分享的話，是沒必要做色彩管理的。
就算你自己做的滴水不漏，app分分鐘把圖給你壓成屎。
就算你把家裡所有的顯示屏都用蜘蛛校過，別人家的手機平板你管得了嗎？
由它去吧。

網上的都是正確顯示，說色彩管理是要涉及列印的，怎麼讓列印出來的和你屏幕看到的一致！光談屏幕不涉及印表機根本就是白談！