--- # System prepended metadata title: 色彩管理到底在管什麼 --- # 色彩管理到底在管什麼 可能各位會聽到有人在說這個螢幕有廣色域、P3 色域，或是有人在抱怨印刷品有色差之類的，這些就是日常中常常會出現的色彩管理議題。 不過在討論如何管理色彩之前，我們先來看看人類看到的顏色是怎麼樣的。 > 本文會使用不少網路上收集的圖片及文字，如果你不希望你的作品被使用請聯絡筆者 > a20034294@gmail.com 謝謝。 > 本文的內容比較基礎，並可能有部分錯誤，還望各路大神指正。 ## 人眼看到的顏色 人類有三種視錐細胞，分別會對不同的頻率產生不同的反應，根據這些刺激會讓你在腦中看到不同的顏色。 而這些刺激值經過一些人體實驗以及數學的變換之後，可以簡單的換為 $X、Y、Z$ 值約略對應於紅色、綠色和藍色（但要留意 $X、Y、Z$ 值並不是真的看起來是紅、綠和藍色，而是從紅色、綠色和藍色導出來的參數） 不過 $XYZ$ 只能代表刺激值，沒辦法代表顏色，因為人眼還有明度的判斷能力，例如說很強的 600nm 紅光跟較弱的 600nm 紅光看起來會是一樣的顏色，因此會再針對 $XYZ$ 做一次轉換： $x = \frac {X}{X+Y+Z}$ $y = \frac {Y}{X+Y+Z}$ $z = \frac {Z}{X+Y+Z} =1-x-y$ 既然 $z$ 是從 $x、y$ 導出，我們可以省略 $z$ 並畫出以下的圖 ![image](https://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/CIE1931xy_blank.svg/652px-CIE1931xy_blank.svg.png) >CIE 1931色彩空間色度圖。外側曲線邊界是光譜（或單色）光軌跡，波長用奈米標記。注意描繪的顏色依賴於顯示這個圖象的設備的色彩空間，沒有設備能有足夠大色域來在所有位置上提供精確的色度表現。 ## CIE 1931 CIE 1931 色彩空間色度圖有一個很重要的特性：可以利用圖上的任意兩點的顏色，經過不同強度的混合，做出兩點間連線上的任意顏色。(這也是為什麼常見的螢幕色域圖會是漂亮的三角形而不是奇怪的形狀，螢幕的三原色會分別對應到 CIE 1931 的三個點，連線後即為該螢幕的色域表現) ## 說回色彩管理 不管在任何設備上，以現今的技術水準都無法表現出所有人眼可以看到的顏色，而且不同的設備間能夠顯示的顏色數量也會有所差異，所以人們定義出了各種色彩標準，例如常常聽到的 sRGB、DCI-P3、AdobeRGB，目的就是希望可以在不同裝置上看到相同的顏色，而不會出現 "你說的藍到底是什麼藍？(45,37,235) 啊。對啊那怎麼看起來不一樣?"，這種事。 ### 測試一 ![](https://i.imgur.com/J6xrqZa.png) 假設你的裝置與使用程式支援色彩管理與廣色域顯示，你將可以看到圖片中央有一個 Android Logo 的機器人，但由於此圖包含的色域較大(P3)，所以若你使用的裝置只能顯示到 sRGB 色域，將會將超過的部分截除，因此就看不到機器人。 > 若你無法看到，可以使用 chrome 瀏覽器，並在 [chrome://flags](chrome://flags) 裡頭把 Force color profile 改成 P3，若為電腦版的 chrome 請開啟 chrome 的硬體加速。 ![](https://i.imgur.com/PTlgwaM.jpg) 上圖顯示了幾種常見色域的範圍關係，我們可以由此圖看出各種色彩標準，我找了幾張圖，不過每張都畫的不太一樣，這張是我看起來比較正常的，仔細看的話除了 REC.2020(HDR 常用的色彩標準)以外都有很多交叉的地方，這代表每種色彩標準不是只是包含的關係，每種色彩標準都有其擅長的部分，雖然我們可以用面積來大約評斷這個色彩空間大不大，但並不是絕對的標準。在選購裝置時也請注意看所標示的色域(color gamut)是指面積還是實際的色彩覆蓋(覆蓋不可能超過 100%)，假設是實際的色彩覆蓋的話絕對不會出現什麼 125% sRGB 的鬼話。 由於在網路中常見的色彩標準是 sRGB，所以在挑選非廣色域螢幕的時候也可以看一下 sRGB 的**覆蓋率**，假設只有標示 NTSC 72% 然後跟你唬爛說就等於 sRGB 100% 的一定是騙人的，sRGB 100% 肯定是可以當作賣點的，如果廠商有達到就一定會寫出來。 > 更不要提 NTSC 45%，那個螢幕超爛，筆者就是某 ACXR 的受害者。 由於廣色域螢幕在生活中越來越常見，例如 iPhone、iMac、Macbook Pro 或是許多像是 Google、Asus、Samsung 的手機都有支援廣色域，那如果你的裝置色彩管理沒有做好會怎麼樣呢(做好色彩管理 $\neq$ 支援廣色域)？你看到的顏色可能會過艷或過淡。這裡我用最近常見的 sRGB、P3，來做示範。 ### 測試二 > 由於要讓你看出差異，所以你等下看到的圖片可能會過艷或過淡。 原圖： ![](https://i.imgur.com/n82EmEp.jpg) 調整原圖中的色彩空間(讓電腦以為這張圖中的 RGB 是在某個標準底下)： ![](https://i.imgur.com/QX25T5e.jpg) 我將左圖的色彩空間指定為 Rec709(色域等於 sRGB 但 gamma 不同)，右圖指定為 Display P3(色域等於 DCI-P3 但 gamma 與白點不同)，指定過後電腦就會知道要怎麼將**圖片內儲存的 RGB 數值轉換到螢幕實際顯示數值**應該可以在圖中看出右圖的顏色較為鮮豔，因為 P3 的顯示範圍較廣，左圖較淡的原因是由於我的軟體支援色彩管理，所以他發現左圖所使用的色彩空間較小，若要在色彩空間較大的螢幕顯示的話，必須使用較不鮮豔的 RGB 數值。 ### 測試三 下圖我以前面的 android 機器人圖片為例子，這裡選擇的區域是外圍不包含機器人的部分，可以看到在 sRGB 螢幕下，必須使用**超過** 255 才能表達這個顏色(因此右邊顯示被截)，但在 P3 的螢幕中就只需要 237 來表示。 ![](https://i.imgur.com/39HKZjw.png) ![](https://i.imgur.com/WOQ09DC.png) ## Gamma 前面有提到 Gamma 這個詞，實際上，人眼對於光的感知也不算是線性的 ![](https://i.imgur.com/Lt0GqXL.jpg) 為了可以讓 RGB 的數值更接近人類感受的均勻灰階，需要對螢幕顯示的亮度做一點變換，照上圖來說的話：你所感覺到的 0.5 亮度，大約在線性光中只有 0.2 左右(應該是指能量，不確定)，因此就有了 Gamma 將你所認知的亮度(RGB 數值->0~1)，轉換為實際亮度。 例如： $Gamma = 2.2\ 時\ 實際亮度=RGB數值^ {2.2}$ 2.2 是一個常見的 Gamma 值，按照以上數學公式，Gamma 值越高，整體會看起來偏暗，越低則相反。 在色彩管理中，假設你想在 Gamma 設定為 1.8 的螢幕中，顯示一張 Gamma 為 2.2 的圖片，就必須將顯示的 RGB 數值調低一些。 ## 結論 色彩管理就是根據不同的色彩描述，調整螢幕實際顯示的數值，並盡可能的將同樣的內容在不同裝置上顯示出一樣的顏色(也可以推廣到印刷業，不過我沒有接觸過)。 另外，目前的 Android 與 Windows 的色彩管理都做得很爛，有些地方有，有些地方沒有，看看蘋果信仰是否又充值了呢？ 試著在你的裝置上面設定色彩設定檔吧(.icc)，可以到你的螢幕的官方網站下載，並且安裝在電腦上 Windows: https://support.microsoft.com/zh-tw/help/4462979/windows-about-color-management Mac: 系統偏好設定 > 顯示器 > 顏色，若你是使用 Apple 原廠的螢幕，他應該有幫你選好，不過還是可以點選其他的來看看效果。 然後趕快發現自己的螢幕、系統很爛，換新，買買買買買。 --- 作者：Ian Sung email：a20034294@gmail.com 歡迎轉載以及指正