之所以提筆寫這么一篇顏色理論的科普文章，是因?yàn)楫?dāng)我想在中文網(wǎng)站里查找時(shí)，很難找到全面的內(nèi)容。有很多都是完全從實(shí)用設(shè)計(jì)的角度來介紹的，這對(duì)于像我這樣喜歡刨根問底的人來說，并不能感到滿足。

顏色理論 (Color Theory) 是一門非常有意思的內(nèi)容方向，它和樂理一樣，是一個(gè)橫跨藝術(shù)和科學(xué)的知識(shí)體系。學(xué)習(xí)顏色理論之后，就會(huì)知道我們?cè)陔s志上、在電腦屏幕、手機(jī)屏幕上看到的五彩繽紛是如何產(chǎn)生的，就會(huì)知道我們?cè)赑hotoshop里用到各種顏色混合模式是如何工作的。

那么，讓我們先從人對(duì)顏色的識(shí)別開始說起。

我們是怎么看到顏色的？

我們之所以有視覺，是因?yàn)槲覀兊囊暰W(wǎng)膜上存在兩類視覺細(xì)胞

• 視錐細(xì)胞 - 負(fù)責(zé)白天強(qiáng)光下視覺，能區(qū)分顏色
• 視桿細(xì)胞 - 負(fù)責(zé)夜晚弱光下視覺，不能區(qū)分顏色

而在白天使用的視錐細(xì)胞中，又對(duì)三種顏色光最為敏感：紅、綠、藍(lán)。沒錯(cuò)，這就是 RGB 三原色的由來。

視錐細(xì)胞主要分布在視網(wǎng)膜中心地區(qū)，也就是黃斑，大約700萬個(gè)細(xì)胞會(huì)在明光環(huán)境下，合成3種「視紫藍(lán)質(zhì)」，隨后產(chǎn)生脈沖告訴大腦，「我看到了某某顏色」。

視桿細(xì)胞主要分布在視網(wǎng)膜的非中心區(qū)域，大約1億個(gè)細(xì)胞會(huì)在暗光環(huán)境下生成1種「視紫紅質(zhì)」（此物質(zhì)在明光環(huán)境下會(huì)被分解），同樣產(chǎn)生脈沖告訴大腦，「我看到了有光亮」。

值得注意的是，對(duì)人來說的可見光，就是「紅橙黃綠青藍(lán)紫」中從紅到紫的連續(xù)光譜。這里的連續(xù)表示，可見光并不是離散的7種顏色的光，而是從紫光的起始段380nm 到紅光的終止段750nm中連續(xù)的各個(gè)波長的光。

可見光的波長和頻率，取自wikipedia

合成顏色 - 是否存在棕色光？

好了，問題來了??！ 我們發(fā)現(xiàn)，在自然可見光的光譜中，并不能找到粉紅色，或者是棕色。這時(shí)候，我們自然會(huì)想要提問，是不是存在某種頻率的光，它的顏色是棕色的呢？

答案是否定的，事實(shí)上有一件非常重要的事情需要先明確：顏色并不是物理存在的，我們能看到顏色是因?yàn)槲覀兊纳順?gòu)造導(dǎo)致的。

顏色是什么？顏色是生物對(duì)于不同頻率的光的感知，物種不同，感知能力也不同，比如小狗眼里的世界是黑白的，而在另一個(gè)極端，皮皮蝦有可以感知16種不同頻率段的視覺細(xì)胞。

380 - 450nm 的光本身并不是紫色的，至少小狗們不這么認(rèn)為。但我們?nèi)祟?，恰好能把這個(gè)頻率段的光和其他光區(qū)分光，然后我們姑且給了它一個(gè)名字，叫紫色。

所謂顏色，不過是我們的視覺細(xì)胞對(duì)外界輸入的光的一種反應(yīng)。在復(fù)雜的世界中，不僅僅存在單色光，更多存在的是多種頻率的光同時(shí)投射到我們眼里的情況。

說到這里，終于可回答下棕色到底是怎么回事了，并沒有某一個(gè)固定頻率的光是棕色的，實(shí)際上一個(gè)物體之所以是棕色，是因?yàn)樗怯杉t光 + 黃光 + 藍(lán)光 按照一定比例混合后的到的。

所以，這個(gè)世界上，并不存在棕色光。相反，有非常多的光都是合成出來的.而人類在如何合成光的道路上，我們找到了 RGB (Red, Green Blue)。不過在RGB之前，我們更早熟悉的是紅黃藍(lán) (RYB) 三原色。

RGB(150, 100, 50)

三原色

人類最早合成顏色的經(jīng)驗(yàn)，是產(chǎn)生自繪畫領(lǐng)域。繪畫顏料領(lǐng)域的三原色是「紅黃藍(lán)」，其發(fā)現(xiàn)時(shí)間可以追溯到 1600年左右。

RYB色盤

之后，1908年在印刷和繪畫領(lǐng)域，人們又發(fā)現(xiàn)了 CMY 三原色 (Cyan, Maganta, Yellow)，再加上 Key Plate 黑色，形成了 CMYK 的顏色模型，并在印刷業(yè)中廣泛使用。

CMY色盤

還剩下一個(gè)經(jīng)典的三原色 RGB，它是在1860年被發(fā)現(xiàn)，進(jìn)而開始被用在攝影行業(yè)，一直到1938年，RGB 被用在CRT顯示的發(fā)明上，這才奠定了 RGB 在我們?nèi)粘Ｉ钪械闹匾匚弧?/p>

RGB

加色模式 & 減色模式

當(dāng)我們談到加色模式和減色模式時(shí)，我們指的都是如何使用不同的三原色去合成其他顏色。其中，RGB 對(duì)顏色的合成，是加色模式。RYB 和 CMYK 對(duì)顏色的合成是減色模式。

• 發(fā)光，用加色模式；
• 反光，用減色模式；

什么是發(fā)光？能夠在外界沒有光的情況下，自己輻射出光線被我們看到的就叫發(fā)光，比如家里的電燈，街上的霓虹燈、廣告牌。

什么是反光？自己不能發(fā)光，必須靠反射外界的光才能被我們看到的就叫反光。很明顯，在漆黑一片的頁面，這些只會(huì)反光的物質(zhì)我們是看不見的。舉例來說，身邊絕大多數(shù)東西都是屬于反光系列的，比如一件紅色的毛衣，一面黃色的墻，一個(gè)綠色的茶杯。

那為什么我們看到的毛衣會(huì)是紅色的呢？這毛衣本身又不會(huì)發(fā)射紅色的光？要回答這個(gè)問題，還得回到「反光」這個(gè)詞上來，反光的關(guān)鍵在于，有些光被反射了，而另一些并沒有。那沒被反射的光去了哪？它們是被這件毛衣給吸收了，轉(zhuǎn)化成了其他能量。

紅毛衣

反光，就是吸收一部分光，反射一部分光。對(duì)于原來的那束射向毛衣的光來說，被吸收的部分做的就是減法，因此反光物體用的顏色合成方法，叫做減色模式。

加色模式下的顏色合成

下面，讓我們重新來看一下 RGB 的圖，然后來寫幾個(gè)加色模式下的顏色合成公式。

這里，顏色之間加法的含義是，如果同時(shí)把等式左邊兩種顏色的「燈光」打到一起，我們通過肉眼，就會(huì)看到等式右邊的顏色。

RGB

補(bǔ)色

由上面的加色公式，我們可以很容易的得到下列補(bǔ)色

即，(黃, 藍(lán))、(品紅, 綠)、(青, 紅) 分別是三對(duì)補(bǔ)色。這也意味著，任何一對(duì)補(bǔ)色的光相疊加，我們會(huì)重新得到白光。

減色模式下的顏色合成

然后我們?cè)賮砜聪?CMYK 下的顏色合成公式

減色模式下的疊加，意味著把等式左邊兩種顏色的「顏料」混合到一起，我們能看到等式右邊顏色的顏料被合成了。

可以看到， CMY 之間的兩兩組合讓我們重新獲得了 RGB?？粗苌衿?，但其實(shí)只要使用上面提到的「補(bǔ)色」，就能輕松理解這里面的原因。

以 黃 (Y) + 品紅 (M) = 紅 (R) 為例，通過將等式左邊的顏色轉(zhuǎn)為補(bǔ)色表示，我們可以的到：

用文字來表達(dá)就是，如果我們把一個(gè)吸收藍(lán)光的顏料，和一個(gè)吸收綠光的顏料進(jìn)行混合，那我們就會(huì)的到一個(gè)吸收藍(lán)光加綠光，也就是只反射紅光的顏料。

CMYK

更多的顏色如何合成？

上面我們說到了三原色的顏色合成。需要注意的是，三原色合成出來的依然是純色。

色相 - Hue

從上圖中抽離出 RGB 三原色，那么順序是這樣的：

紅 - 綠 - 藍(lán) - 紅

紅和綠之間混合出黃，綠藍(lán)之間混合出青，藍(lán)紅之間混合出品紅。

發(fā)現(xiàn)沒有，純色全部都是從 RGB 中抽出兩個(gè)顏色進(jìn)行混合。那問題來了，將三種顏色混在一起會(huì)是什么效果呢？這里我們需要介紹另外3種合成顏色的方法：

• 減淡 - Tint
• 加深 - Shade
• 變灰 - Tone

減淡 - Tint

在繪畫調(diào)顏料的時(shí)候，減淡一個(gè)顏色最好的方法，就是往里加入白色。同樣的，在 RGB 的模式下，讓一個(gè)顏色減淡的方法，就是讓這個(gè)顏色往白色去靠，并且是 R、G、B 都按照同一個(gè)比例去變化。

減淡 - Tint

減淡的效果，既可以理解為往顏料里加入白色顏料，也可以理解為在原來的光線中增加了白光。

加深 - Shade

在繪畫調(diào)顏料的時(shí)候，加深一個(gè)顏色最好的方法，就是往里加入黑色。同樣的，在 RGB 的模式下，讓一個(gè)顏色加深的方法，就是讓這個(gè)顏色往黑色去靠，和減淡一樣，R、G、B 要按照同比例去變化.

加深 - Shade

變灰 - Tone

在繪畫調(diào)顏料的時(shí)候，讓一個(gè)顏色變灰的方法，顧名思義，就是加入灰色的顏料。而在 RGB 中，變灰的方法，就是同時(shí)使用「減淡」和「加深」。

變灰 - Tone

HSB、HSL

HSB 有時(shí)也會(huì)寫成 HSV。這么多字母，讓我們先來看下，每個(gè)字母都是什么含義。

• H：Hue，色相
• S：Saturation，飽和度
• B：Brightness，明度
• L：Lightness，亮度

HSB，HSL的實(shí)用價(jià)值在于，這種表示方法更符合人類對(duì)顏色的認(rèn)知?？吹酱禾靹傞L出的柳芽，我們知道那是嫩綠色的；看到松樹的葉子，我們知道那是深綠色的。雖然兩個(gè)顏色不同，但是那同樣是綠色，只是顏色深淺不同。

總結(jié)下我們看待一個(gè)顏色的步驟：

• 大概是個(gè)什么顏色？ 紅、黃、藍(lán)、綠？
• 顏色是深還是淺？
• 顏色是亮還是暗？

這個(gè)步驟，是不是和我們上面介紹的合成顏色的步驟（加深，減淡）很像？有了之前的鋪墊，下面介紹下分別如何理解 HSB 和 HSL。

HSB

• H - 色相，就是全部純色，紅 - 綠 - 藍(lán) - 紅
• S - 飽和度，就是減淡的反面。飽和度 100% 就是不減淡
• V/B - 明度，就是加深的反面。明度 100% 就是不加深

使用 HSB 顏色模式的主要是 Photoshop 里顏色選擇。

Photoshop 顏色選擇使用 HSB

HSL

• H - 色相， 和 HSB 的定義一致
• S - 飽和度，注意，這里的飽和度和 HSB 里的飽和度很不一樣，這里的 S 控制的是「變灰」
• L - 亮度，加深或減淡，完全由這個(gè)值來控制

使用 HSL 顏色模式的主要有 Photoshop 里的色相飽和度調(diào)整、CSS3。

Photoshop 調(diào)整色相飽和度選擇 HSL

Lab

全稱 CIE Lab 顏色空間，這是一個(gè)按照人對(duì)顏色的感知來設(shè)計(jì)的顏色空間，且和 RGB、CMYK 相比，這是一個(gè)設(shè)備無關(guān)的顏色空間。

• L：亮度通道，可以類比 HSL 中的 Lightness
• a：洋紅 - 灰 - 綠
• b：黃 - 灰 - 藍(lán)

Lab 是一個(gè)比 RGB (sRGB, Adobe RGB) ，CMYK 都要大的顏色空間。它在設(shè)計(jì)之處的目的就在于：

• 分離「顏色」和「亮度」
• 讓a, b顏色的變化，對(duì)應(yīng)的人眼的顏色感知，其變化是線性的

從下圖的球形結(jié)構(gòu)中可以知道，該球的中心位置在 Lab(50, 0, 0)，對(duì)應(yīng)到三原色是 RGB(119, 119, 119) 或者 #777777

Lab 顏色坐標(biāo)系 (取自)

在實(shí)際使用中，Lab 顏色空間有什么用呢？

• 作為一個(gè)色域最寬的空間，不管你想將照片作為何用，用 Lab 顏色空間來存儲(chǔ)照片，都不會(huì)有任何信息損失
• 調(diào)照片的時(shí)候，可以在不調(diào)明暗的情況下，調(diào)整整張照片顏色。

不調(diào)明暗，只調(diào)顏色 (取自http:///)

顏色管理

為什么需要顏色管理？

• 我們?cè)谏厦嬉呀?jīng)說到了很多顏色空間，其中除了 Lab 是設(shè)備無關(guān)的顏色空間外，其他諸如 RGB、CMYK 的顏色空間，都是設(shè)備相關(guān)的。

• 像 RGB 這樣的顏色，它只是定義了如何通過三個(gè)數(shù)字去對(duì)應(yīng)顏色，但并沒有絕對(duì)明確地說應(yīng)該對(duì)應(yīng)到哪個(gè)顏色，比如我們知道 RGB(255, 0, 0) 應(yīng)該對(duì)應(yīng)到紅，但是到底多紅呢？ RGB 本身并沒有定義。

看到問題所在了嗎？我們最終看到的顏色，是一個(gè)「絕對(duì)的顏色」，但是我們?cè)谏a(chǎn)圖片和視頻的時(shí)候，用的可能卻是一個(gè)「相對(duì)的顏色」。也就是說，有可能在 Photoshop 里我設(shè)置了一個(gè) RGB(255, 0, 0) 最紅的背景色，但實(shí)際在某個(gè)投影儀上，觀眾可能覺得這顏色還不夠紅。

所以怎么辦呢？我們可以把這個(gè)想象成出國旅游，進(jìn)入一個(gè)國家時(shí)，我們需要先還錢。在圖像的世界里，設(shè)備就是國家，比如手機(jī)屏幕、顯示器、投影儀、打印機(jī)；錢就是顏色數(shù)據(jù)。

顏色管理是如何工作的？

這個(gè)匯兌的過程，是如何完成的呢？整個(gè)過程要從保存圖片開始，到展示圖片為止。

而在這「描述」和「校準(zhǔn)」的時(shí)候，用到的都是一個(gè)叫做 ICC Profile 的東西。無論你使用的是 Windows，還是 Mac，你的系統(tǒng)里都會(huì)有一個(gè)或多個(gè)專門的目錄來存放 ICC Profile。

理論上，從光轉(zhuǎn)化成數(shù)字存儲(chǔ)，需要經(jīng)過一次 ICC Profile 的 encode，然后從數(shù)字存儲(chǔ)到重現(xiàn)成影響，還需要經(jīng)過一次 ICC Profile 的轉(zhuǎn)化。典型的例子就是，數(shù)碼相機(jī)拍完一張照片，然后用打印機(jī)打印。

很好理解的是，不同設(shè)備，比如不同數(shù)碼相機(jī)拍出的照片，需要不同的 ICC Profile 進(jìn)行轉(zhuǎn)化。而更進(jìn)階一點(diǎn)的攝影愛好者，可能會(huì)制作不同光照環(huán)境下的 ICC Profile 來獲得更還原真是的照片效果。

對(duì)于 ICC Profile 的應(yīng)用，最直觀的就是在 Photoshop 里，在創(chuàng)建文件和打印文件的時(shí)候，都可以選擇不同的 Profile。

創(chuàng)建時(shí)選擇 ICC Profile

打印時(shí)選擇 ICC Profile

重視顏色管理

對(duì)于設(shè)計(jì)師的實(shí)際工作中來說，顏色輸出是否準(zhǔn)確是一個(gè)非常關(guān)鍵的事情，而只有準(zhǔn)確把我顏色管理，才能讓你的設(shè)計(jì)在各種設(shè)備間無縫轉(zhuǎn)移。所以，一定要重視顏色管理，重視 ICC Profile

轉(zhuǎn)換顏色表示

原本想把各顏色空間中的顏色轉(zhuǎn)換算法貼出來，不過趕巧搜到了一位大牛已經(jīng)寫好庫，所以就直接貼一下鏈接，對(duì)計(jì)算機(jī)相關(guān)感興趣的可以去看看。

https://github.com/nullice/ColorRNA

先告一段落

相信你已經(jīng)發(fā)現(xiàn)了，顏色理論相關(guān)的知識(shí)相當(dāng)龐雜，其中還有很大一部分設(shè)計(jì)到數(shù)學(xué)公式轉(zhuǎn)化、計(jì)算機(jī)存儲(chǔ)處理的部分，也是筆者感興趣的部分，限于篇幅，這些等有機(jī)會(huì)再做整理。

感謝能讀到最后的各位。

Reference

• RGB Color Model
• How to Use LAB Color in Photoshop to Add Punch to Your Images
• Color Management
• ICC FAQ