下面這張圖展示了#FFE841這種顏色是如何被人眼識別為#FFE841所代表的黃色的。十六進(jìn)制算出RGB，顯示器調(diào)節(jié)三種顏色的輸出比例，最終輸出的光被人眼的SML三種錐形視覺受體吸收，混合理解成為了黃色。

下面，讓我們來一步步地拆解并理解這個過程。

目錄

1.電磁輻射

2.可見光

3.人眼對光照的感知

4.定義顏色

5.生物光學(xué)

6.顏色區(qū)間

7.萊特和吉爾德的顏色匹配實驗

8.可見光區(qū)域與色度

9.色域和光譜軌跡

10.國際照明委員會的XYZ顏色空間

11.屏幕亞像素

12.SRGB

13.sRGB與十六進(jìn)制編碼

14.伽馬矯正

15.從十六進(jìn)制編碼到人眼所見

一、電磁輻射

我們常說的伽馬射線，X光，可見光，微波，雷達(dá)等等，都是電磁輻射的一種，只是代表了不同的波段。

電磁波最小的單位是光子，不同波段的光子能量不同，高頻波的光子能量高。為了理解顏色，首先我們要理解電磁波。首先，讓我們來仔細(xì)看看白熾燈的電磁波。

我們也許會想知道燈泡能輻射出多少能量。一個物體的輻射能量radiant flux (Phi_eΦe)是指它每秒產(chǎn)生的總能量，用瓦特W作為計量單位。一個100W的燈泡輻射能大約是80W，剩下的20W被轉(zhuǎn)化為單純的熱能。

另一方面，不同波段的輻射能量是不同的。頻譜能量spectral flux是指一個物體單元波段的輻射能量，具體如下圖

使用積分可以算出包含區(qū)域為80W。

乍一看起來，白熾燈的轉(zhuǎn)換效率有80%，還不錯。但實際上，我們還要考慮這些電磁輻射是否是我們?nèi)搜鄣目梢姽狻?

二、可見光

人眼的可見光范圍λ=380nm 到λ=750nm，因此在80W的區(qū)間內(nèi)，實際的可見光能量只有8.4W。

所以白熾燈的效率是8.4%？然而實際還要更差。

三、人眼對光照的感知

就像白熾燈的輻射不是按波段均勻分布那樣，人眼對光的感知度也不是按波段均勻分布的，實際分布如下圖

鳥類可以看到300-400的紫外線，而人眼只能看到紫色380到紅色750的波段。而且，在可見光波段的兩端，人眼感受較弱。

把白熾燈在可見光段的輻射與人眼在可見光段的接受度疊加，我們算出了人眼實際感受到的亮度（這里引入燈光專業(yè)常用單位流明度 luminous flux）大約是2.4W=1600lm。Φvbulb=∫0∞yˉ(λ)?Φe,λbulb(λ)dλ=683.002Wlm?2.4W≈1600lm

白熾燈的效率是2.4W/100W，那么效率更高的熒光燈和LED如何呢？

上圖可見，三種燈散發(fā)的電磁波段不同，熒光燈和LED燈的電磁輻射更重合人眼的可見波段。因此效率更高。白熾燈的效率一般是1-3%、熒光燈一般是10%、而LED最高可達(dá)20%。

四、定義顏色

我們?nèi)绾味x顏色？當(dāng)我手里拿著檸檬，我該如何通過電話告訴遠(yuǎn)方的朋友這檸檬看起來是哪種黃色？

有了之前幾節(jié)的知識，我們知道可以通過波頻來定義顏色，所有人眼感知的顏色的是不同光譜單色的組合。

舉個例子，檸檬在陽光下的反射光波頻大致如下圖。（當(dāng)然，具體情況涉及光源距離，人眼距離，物體大小等等因素，但這里我們用一個簡化模型，只聚焦于光如何被眼睛識別）

接下來，給檸檬拍一張照片，上傳到電腦并PS調(diào)節(jié)，直至看起來和手上的檸檬一樣。這時，電腦屏幕發(fā)出的光和手上檸檬反射的光一樣么？你也許會覺得既然看起來一樣，這兩種光也一樣，但實際如下圖

不同的光譜，看起來顏色一樣，這種情況我們叫條件等色（metamer）

五、生物光學(xué)

人眼識別可見光靠的是兩種細(xì)胞：錐細(xì)胞和桿細(xì)胞。桿細(xì)胞主要是在人處于暗處時識別光線，和顏色識別關(guān)系不大。因此我們只要關(guān)注錐細(xì)胞。

人眼有三種錐細(xì)胞，分別對不同的波長段敏感，分別定義為S、M、L錐細(xì)胞（short、medium、long）

下面我們把手上檸檬的反射光按三種錐細(xì)胞進(jìn)行分解

然后是屏幕上的檸檬的光

由圖可見，雖然兩種方式進(jìn)入人眼的光頻不同，但實際錐細(xì)胞識別出來的波段，積分后的區(qū)域大小是一致的，這就是為什么兩種方式看起來顏色相同的原因。

因此我們采用（S、M、L）作為我們的第一種顏色區(qū)間定義方式。(0.02、0.12、0.16)就是檸檬黃。

六、顏色區(qū)間

定義顏色區(qū)間，是為了讓我們可以用數(shù)字具化的方式來討論顏色。上一節(jié)我們引入了LMS顏色區(qū)間。然而，這種方式的實用性不高。

首先，區(qū)間內(nèi)的有些顏色是實際不可能出現(xiàn)的，比如LMS（0,1,0）由于三個錐細(xì)胞相互重疊，任何一種波頻總會對至少兩個錐細(xì)胞產(chǎn)生影響。

也是因為這個因素，我們在熒幕上微調(diào)顏色時，很難做到精確地只刺激LMS中的單個細(xì)胞，換句話說，按人眼的方式制造硬件設(shè)備是很難的。

另一個歷史問題是直到1990‘s人們才認(rèn)識到錐細(xì)胞。因此1920‘s人們想出了另一種方式——RGB。

七、萊特和吉爾德的顏色匹配實驗

大約1800‘s，人們就發(fā)現(xiàn)了三原色原理。因此1920‘s，萊特和吉爾德做了個實驗。

實驗如下圖，他們控制紅綠藍(lán)三盞燈來混合，直到在白墻上的投影與另一種顏色的光看起來完全一樣。

他們按5nm的幅度嘗試了多種目標(biāo)光，并把對應(yīng)的紅（700nm）、綠（546nm）和藍(lán)（435nm）比例繪制成一條曲線，最終結(jié)果如下。這就是RGB顏色模式。

那么圖中的負(fù)刻度曲線怎么理解呢？實驗時發(fā)現(xiàn)，有些顏色無法通過紅綠藍(lán)三種光混合得出，只有把紅色與目標(biāo)光疊加才能做到兩邊一致。

由此實驗，我們可以用RGB三色光制造出所有我們能看到的顏色，而LMS更適合表示我們?nèi)绾巫R別各種顏色。接下來，我們把手上檸檬的反射光再次代入。

RGB可以幫我們定義波頻上的可見色，但是那些不在波頻上的呢？

八、可見光區(qū)域與色度

下圖是上文的總結(jié)，我們用RGB來制造，用LMS來識別。但都只是針對光頻譜上的顏色。

如果把RGB做在三維空間里，則如下圖?？梢钥匆姡?,0,0）是黑色，（1,1,1）是白色。

如果按斜對角線切下一刀，則得到如圖三角形。該三角形平面上每個點的RGB相加均為1。我們將這個三角作為標(biāo)準(zhǔn)光照下的顏色表，稱之為色度。

色度是個很有用的屬性，因為獨立于光照。換句話說，不管把電腦屏幕調(diào)成什么亮度，色度是不變的。

有很多方式把這個二維的色度繼續(xù)拆成兩個單維度。比如HSL和HSV里常用的方式，就是把色度拆分為色相（hue）和飽和度（saturation）。如下圖。

九、色域gamut和光譜軌跡

使用R+G+B=1的公式，我們可以將之前的光譜顏色轉(zhuǎn)化為R和G的二維坐標(biāo)圖，也被稱為光譜軌跡圖，如下（在之前配色實驗中使用的紅綠藍(lán)三色燈光在圖中由星星表示）

如果把上一節(jié)的色度三角形放入其中，則如下圖。

整個光譜軌跡內(nèi)的區(qū)域代表了所有能被人眼識別的色相，而圖中格子的區(qū)域（R<0）代表了用R（700nm），G（546nm），B（435nm）這三種光無法造出的顏色。圖中波段在435-546nm的都無法被制造，其中就包括了青色（cyan）。

而右側(cè)未被格子填充的區(qū)域我們定義為色域gamut。

十、國際照明委員會的XYZ顏色空間

1931年，國際照明委員會定義了兩種顏色空間，一種是基于實驗的RGB，還有一種則是XYZ。

XYZ的目的之一是將整個光譜軌跡中的可見光，轉(zhuǎn)到一個【0,1】區(qū)間且均為正數(shù)的坐標(biāo)，算法及結(jié)果如下圖

和上節(jié)一樣，格子區(qū)域代表了RGB無法創(chuàng)造的區(qū)域，圖中三角為可造色域gamut。

十一、屏幕亞像素

如果你拿放大鏡仔細(xì)看你的顯示屏幕，你會發(fā)現(xiàn)像素柵欄，每一個像素都由三種亞像素組成：紅綠藍(lán)。

和之前實驗中用的紅綠藍(lán)三色燈不同的是，這些亞像素并不產(chǎn)生純的單色光，每一個亞像素都有著自己在光譜上的對應(yīng)區(qū)域，而且不同的設(shè)備之間也有差異。

利用macbook的色彩同步功能，可以得到macbook顯示屏的顏色軌跡圖。注意到實際顯示的三角形區(qū)域與軌跡邊緣沒有完全貼合，這也是因為亞像素產(chǎn)生的不是純的單色光。

由于不同設(shè)備的亞像素的光譜波段會有差異，顯示器會盡量趨近另一個色域SRGB。

十二、SRGB

sRGB——標(biāo)準(zhǔn)（standard）RGB，是由惠普和微軟在1996年創(chuàng)立的，為了保證不同顯示器的顏色顯示效果一致。不再是按照之前實驗的燈光RGB，標(biāo)準(zhǔn)的RGB如下：

可以看到，官方SRGB色域有一部分是超出了macbook顯示屏的色域的，也就是說，當(dāng)你在mac上的PS設(shè)定了這些顏色時，mac的屏幕無法真實的表現(xiàn)它們。為了彌補這一問題，Macbook似乎使用了一種調(diào)整過的sRGB色域

sRGB幾乎是到處都在使用的默認(rèn)色域，也是瀏覽器CSS規(guī)范支持的標(biāo)準(zhǔn)色域。

最終，我們可以開始研究，網(wǎng)站上的顏色是如何生成的。

十三、sRGB 十六進(jìn)制編碼

舉個例子，#9B51E0 代表了sRGB色域中一個特定的顏色。按如下的步驟，我們可以把十六進(jìn)制編碼轉(zhuǎn)化為對應(yīng)的（R，G，B）坐標(biāo)。

0x9B/0xFF = 0.61

0x51/0xFF = 0.32

0xE0/0xFF = 0.88

所以 #9BE1E0 也就是RGB(0.61, 0.32, 0.88)。

在電腦將這個值傳到顯示器設(shè)備之前，還有一步：伽馬矯正。

十四、伽馬矯正

對于sRGB色域中的每個坐標(biāo)，我們希望確保同樣間距的兩對，有著相同的差距。舉個栗子，我們希望（#030000與#040000）的差異看起來和（#040000與#050000）的差異一樣。

然而，人類的眼睛在暗光時對細(xì)小的變化更敏感，而在亮光時比較遲鈍。為了分析這是怎么一回事，我們假設(shè)我們想把灰色設(shè)定為8個階級。如下即為一個常規(guī)的線性灰色變化。

如果我們只是簡單的分段，然后取平均值Y=8?8E?，那么看起來就如下圖：

可以看到，Y0與Y1的區(qū)別遠(yuǎn)比Y6與Y7之間的區(qū)別來的明顯。

接下來，讓我們換一種算法，即做一次平方。Y=(8?8E?)2.

新的算法很顯然讓不同亮度的區(qū)別也比較接近。

這種考慮光的能量，然后把它們重新匹配的行為就叫伽馬矯正。比如藍(lán)色一般看起來比較暗，黃色視覺上就比較亮，這些都需要矯正。

根據(jù)伽馬方程式，我們可以得到下圖，橫軸為sRGB，縱軸為矯正過的sRGB

終于，我們完成了整個流程的最后一塊拼圖！

十五、從十六進(jìn)制編碼到人眼所見

我們終于回到了標(biāo)題！

首先，我們把16進(jìn)制的 #9B51E0, 轉(zhuǎn)化為sRGB，即(0.61, 0.32, 0.88)。

然后進(jìn)行伽馬矯正，如上圖，得到 (0.33, 0.08, 0.88）。這就是用在顯示器的顏色。

然后這個顏色進(jìn)入你的眼睛，被你的三種錐細(xì)胞吸收

最終，就變成了你看到的顏色啦

題圖來自：Cora

原作者： Jamie-Wong?

英文鏈接：http://jamie-wong.com/post/color/