《顏色：從十六進位制編碼到人眼所見》
原文在Jamie-Wong的個人網站上http://jamie-wong.com/post/color/ 。嘗試翻譯，有所簡化。 
下面這張圖展示了#FFE841這種顏色是如何被人眼識別為#FFE841所代表的黃色的。十六進位制算出RGB，顯示器調節三種顏色的輸出比例，最終輸出的光被人眼的SML三種錐形視覺受體吸收，混合理解成為了黃色。
下面，讓我們來一步步地拆解並理解這個過程。
以下是文章目錄
-
電磁輻射
-
可見光
-
人眼對光照的感知
-
定義顏色
-
生物光學
-
顏色區間
-
萊特和吉爾德的顏色匹配實驗
-
可見光區域與色度
-
色域和光譜軌跡
-
國際照明委員會的XYZ顏色空間
-
螢幕亞畫素
-
SRGB
-
sRGB與十六進位制編碼
-
伽馬矯正
-
從十六進位制編碼到人眼所見
一、電磁輻射
我們常說的伽馬射線，X光，可見光，微波，雷達等等，都是電磁輻射的一種，只是代表了不同的波段。 
電磁波最小的單位是光子，不同波段的光子能量不同，高頻波的光子能量高。為了理解顏色，首先我們要理解電磁波。首先，讓我們來仔細看看白熾燈的電磁波。
我們也許會想知道燈泡能輻射出多少能量。一個物體的輻射能量radiant flux (\Phi_eΦe)是指它每秒產生的總能量，用瓦特W作為計量單位。一個100W的燈泡輻射能大約是80W，剩下的20W被轉化為單純的熱能。
另一方面，不同波段的輻射能量是不同的。頻譜能量spectral flux是指一個物體單元波段的輻射能量，具體如下圖
使用積分可以算出包含區域為80W。
乍一看起來，白熾燈的轉換效率有80%，還不錯。但實際上，我們還要考慮這些電磁輻射是否是我們人眼的可見光。
二、可見光
人眼的可見光範圍λ=380nm 到λ=750nm，因此在80W的區間內，實際的可見光能量只有8.4W。
所以白熾燈的效率是8.4%？然而實際還要更差。
三、人眼對光照的感知
就像白熾燈的輻射不是按波段均勻分佈那樣，人眼對光的感知度也不是按波段均勻分佈的，實際分佈如下圖
鳥類可以看到300-400的紫外線，而人眼只能看到紫色380到紅色750的波段。而且，在可見光波段的兩端，人眼感受較弱。
把白熾燈在可見光段的輻射與人眼在可見光段的接受度疊加，我們算出了人眼實際感受到的亮度（這裡引入燈光專業常用單位流明度 luminous flux）大約是2.4W=1600lm。Φvbulb=∫0∞yˉ(λ)⋅Φe,λbulb(λ)dλ=683.002Wlm⋅2.4W≈1600lm
白熾燈的效率是2.4W/100W，那麼效率更高的熒光燈和LED如何呢？
上圖可見，三種燈散發的電磁波段不同，熒光燈和LED燈的電磁輻射更重合人眼的可見波段。因此效率更高。白熾燈的效率一般是1-3%、熒光燈一般是10%、而LED最高可達20%。
四、定義顏色
我們如何定義顏色？當我手裡拿著檸檬，我該如何通過電話告訴遠方的朋友這檸檬看起來是哪種黃色？
有了之前幾節的知識，我們知道可以通過波頻來定義顏色，所有人眼感知的顏色的是不同光譜單色的組合
舉個例子，檸檬在陽光下的反射光波頻大致如下圖。（當然，具體情況涉及光源距離，人眼距離，物體大小等等因素，但這裡我們用一個簡化模型，只聚焦於光如何被眼睛識別） 
接下來，給檸檬拍一張照片，上傳到電腦並PS調節，直至看起來和手上的檸檬一樣。這時，電腦螢幕發出的光和手上檸檬反射的光一樣麼？你也許會覺得既然看起來一樣，這兩種光也一樣，但實際如下圖 
不同的光譜，看起來顏色一樣，這種情況我們叫條件等色（metamer） 
五、生物光學
人眼識別可見光靠的是兩種細胞：錐細胞和杆細胞。杆細胞主要是在人處於暗處時識別光線，和顏色識別關係不大。因此我們只要關注錐細胞。
人眼有三種錐細胞，分別對不同的波長段敏感，分別定義為S、M、L錐細胞（short、medium、long） 
下面我們把手上檸檬的反射光按三種錐細胞進行分解 
然後是螢幕上的檸檬的光
由圖可見，雖然兩種方式進入人眼的光頻不同，但實際錐細胞識別出來的波段，積分後的區域大小是一致的，這就是為什麼兩種方式看起來顏色相同的原因。
因此我們採用（S、M、L）作為我們的第一種顏色區間定義方式。(0.02、0.12、0.16)就是檸檬黃。
六、顏色區間
定義顏色區間，是為了讓我們可以用數字具化的方式來討論顏色。上一節我們引入了LMS顏色區間。然而，這種方式的實用性不高。
首先，區間內的有些顏色是實際不可能出現的，比如LMS（0,1,0）由於三個錐細胞相互重疊，任何一種波頻總會對至少兩個錐細胞產生影響。
也是因為這個因素，我們在熒幕上微調顏色時，很難做到精確地只刺激LMS中的單個細胞，換句話說，按人眼的方式製造硬體裝置是很難的。
另一個歷史問題是直到1990‘s人們才認識到錐細胞。因此1920‘s人們想出了另一種方式——RGB。
七、萊特和吉爾德的顏色匹配實驗
大約1800‘s，人們就發現了三原色原理。因此1920‘s，萊特和吉爾德做了個實驗。
實驗如下圖，他們控制紅綠藍三盞燈來混合，直到在白牆上的投影與另一種顏色的光看起來完全一樣。 
他們按5nm的幅度嘗試了多種目標光，並把對應的紅（700nm）、綠（546nm）和藍（435nm）比例繪製成一條曲線，最終結果如下。這就是RGB顏色模式。 
那麼圖中的負刻度曲線怎麼理解呢？實驗時發現，有些顏色無法通過紅綠藍三種光混合得出，只有把紅色與目標光疊加才能做到兩邊一致。
由此實驗，我們可以用RGB三色光製造出所有我們能看到的顏色，而LMS更適合表示我們如何識別各種顏色。接下來，我們把手上檸檬的反射光再次代入。 
RGB可以幫我們定義波頻上的可見色，但是那些不在波頻上的呢？
八、可見光區域與色度
下圖是上文的總結，我們用RGB來製造，用LMS來識別。但都只是針對光頻譜上的顏色。 
如果把RGB做在三維空間裡，則如下圖。可以看見（0,0,0）是黑色，（1,1,1）是白色 
如果按斜對角線切下一刀，則得到如圖三角形。該三角形平面上每個點的RGB相加均為1。我們將這個三角作為標準光照下的顏色表，稱之為色度
。
色度是個很有用的屬性，因為獨立於光照。換句話說，不管把電腦螢幕調成什麼亮度，色度是不變的。
有很多方式把這個二維的色度繼續拆成兩個單維度。比如HSL和HSV裡常用的方式，就是把色度拆分為色相（hue）和飽和度（saturation）。如下圖。
九、色域gamut和光譜軌跡
使用R+G+B=1的公式，我們可以將之前的光譜顏色轉化為R和G的二維座標圖，也被稱為光譜軌跡圖，如下（在之前配色實驗中使用的紅綠藍三色燈光在圖中由星星表示） 
如果把上一節的色度三角形放入其中，則如下圖。 
整個光譜軌跡內的區域代表了所有能被人眼識別的色相，而圖中格子的區域（R<0）代表了用R（700nm），G（546nm），B（435nm）這三種光無法造出的顏色。圖中波段在435-546nm的都無法被製造，其中就包括了青色（cyan）。
而右側未被格子填充的區域我們定義為色域gamut。
十、國際照明委員會的XYZ顏色空間
1931年，國際照明委員會定義了兩種顏色空間，一種是基於實驗的RGB，還有一種則是XYZ。
XYZ的目的之一是將整個光譜軌跡中的可見光，轉到一個【0,1】區間且均為正數的座標，演算法及結果如下圖 
和上節一樣，格子區域代表了RGB無法創造的區域，圖中三角為可造色域gamut。
十一、螢幕亞畫素
如果你拿放大鏡仔細看你的顯示螢幕，你會發現畫素柵欄，每一個畫素都由三種亞畫素組成：紅綠藍。 
和之前實驗中用的紅綠藍三色燈不同的是，這些亞畫素並不產生純的單色光，每一個亞畫素都有著自己在光譜上的對應區域， 而且不同的裝置之間也有差異。
利用macbook的色彩同步功能，可以得到macbook顯示屏的顏色軌跡圖。注意到實際顯示的三角形區域與軌跡邊緣沒有完全貼合，這也是因為亞畫素產生的不是純的單色光。 
由於不同裝置的亞畫素的光譜波段會有差異，顯示器會盡量趨近另一個色域SRGB。
十二、SRGB
sRGB——標準（standard）RGB，是由惠普和微軟在1996年創立的，為了保證不同顯示器的顏色顯示效果一致。不再是按照之前實驗的燈光RGB，標準的RGB如下： 
可以看到，官方SRGB色域有一部分是超出了macbook顯示屏的色域的，也就是說，當你在mac上的PS設定了這些顏色時，mac的螢幕無法真實的表現它們。為了彌補這一問題，Macbook似乎使用了一種調整過的sRGB色域 
sRGB幾乎是到處都在使用的預設色域，也是瀏覽器CSS規範支援的標準色域。
最終，我們可以開始研究，網站上的顏色是如何生成的。
十三、sRGB 十六進位制編碼
舉個例子，#9B51E0 代表了sRGB色域中一個特定的顏色。按如下的步驟，我們可以把十六進位制編碼轉化為對應的（R，G，B）座標。
0x9B/0xFF = 0.61
0x51/0xFF = 0.32
0xE0/0xFF = 0.88
所以 #9BE1E0 也就是RGB(0.61, 0.32, 0.88)。
在電腦將這個值傳到顯示器裝置之前，還有一步：伽馬矯正。
十四、伽馬矯正
對於sRGB色域中的每個座標，我們希望確保同樣間距的兩對，有著相同的差距。舉個栗子，我們希望（#030000與#040000）的差異看起來和（#040000與#050000）的差異一樣。
然而，人類的眼睛在暗光時對細小的變化更敏感，而在亮光時比較遲鈍。為了分析這是怎麼一回事，我們假設我們想把灰色設定為8個階級。如下即為一個常規的線性灰色變化。
如果我們只是簡單的分段，然後取平均值Y=8⌊8E⌋，那麼看起來就如下圖： 
可以看到，Y0與Y1的區別遠比Y6與Y7之間的區別來的明顯。
接下來，讓我們換一種演算法，即做一次平方。Y=(8⌊8E⌋)2. 
新的演算法很顯然讓不同亮度的區別也比較接近。
這種考慮光的能量，然後把它們重新匹配的行為就叫伽馬矯正。比如藍色一般看起來比較暗，黃色視覺上就比較亮，這些都需要矯正。
根據伽馬方程式，我們可以得到下圖，橫軸為sRGB，縱軸為矯正過的sRGB
終於，我們完成了整個流程的最後一塊拼圖！
十五、從十六進位制編碼到人眼所見
我們終於回到了標題！
首先，我們把16進位制的 #9B51E0, 轉化為sRGB，即(0.61, 0.32, 0.88)。
然後進行伽馬矯正，如上圖，得到 (0.33, 0.08, 0.88）。這就是用在顯示器的顏色。 
然後這個顏色進入你的眼睛，被你的三種錐細胞吸收 
最終，就變成了你看到的顏色啦