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

下面，讓我們來(lái)一步步地拆解并理解這個(gè)過(guò)程。

目錄

1.電磁輻射

2.可見(jiàn)光

3.人眼對(duì)光照的感知

4.定義顏色

5.生物光學(xué)

6.顏色區(qū)間

7.萊特和吉爾德的顏色匹配實(shí)驗(yàn)

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

9.色域和光譜軌跡

10.國(guó)際照明委員會(huì)的XYZ顏色空間

11.屏幕亞像素

12.SRGB

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

14.伽馬矯正

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

一、電磁輻射

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

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

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

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

使用積分可以算出包含區(qū)域?yàn)?0W。

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

二、可見(jiàn)光

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

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

三、人眼對(duì)光照的感知

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

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

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

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

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

四、定義顏色

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

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

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

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

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

五、生物光學(xué)

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

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

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

然后是屏幕上的檸檬的光

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

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

六、顏色區(qū)間

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

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

也是因?yàn)檫@個(gè)因素，我們?cè)跓赡簧衔⒄{(diào)顏色時(shí)，很難做到精確地只刺激LMS中的單個(gè)細(xì)胞，換句話說(shuō)，按人眼的方式制造硬件設(shè)備是很難的。

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

七、萊特和吉爾德的顏色匹配實(shí)驗(yàn)

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

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

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

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

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

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

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

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

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

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

色度是個(gè)很有用的屬性，因?yàn)楠?dú)立于光照。換句話說(shuō)，不管把電腦屏幕調(diào)成什么亮度，色度是不變的。

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

九、色域gamut和光譜軌跡

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

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

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

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

十、國(guó)際照明委員會(huì)的XYZ顏色空間

1931年，國(guó)際照明委員會(huì)定義了兩種顏色空間，一種是基于實(shí)驗(yàn)的RGB，還有一種則是XYZ。

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

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

十一、屏幕亞像素

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

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

利用macbook的色彩同步功能，可以得到macbook顯示屏的顏色軌跡圖。注意到實(shí)際顯示的三角形區(qū)域與軌跡邊緣沒(méi)有完全貼合，這也是因?yàn)閬喯袼禺a(chǎn)生的不是純的單色光。

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

十二、SRGB

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

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

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

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

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

舉個(gè)例子，#9B51E0 代表了sRGB色域中一個(gè)特定的顏色。按如下的步驟，我們可以把十六進(jìn)制編碼轉(zhuǎn)化為對(duì)應(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)。

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

十四、伽馬矯正

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

題圖來(lái)自：Cora

原作者： Jamie-Wong?

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