之所以提筆寫這麼一篇顏色理論的科普文章,是因為當我想在中文網站里查找時,很難找到全面的內容。有很多都是完全從實用設計的角度來介紹的,這對於像我這樣喜歡刨根問底的人來說,並不能感到滿足。

顏色理論 (Color Theory) 是一門非常有意思的內容方向,它和樂理一樣,是一個橫跨藝術和科學的知識體系。學習顏色理論之後,就會知道我們在雜誌上、在電腦屏幕、手機屏幕上看到的五彩繽紛是如何產生的,就會知道我們在Photoshop里用到各種顏色混合模式是如何工作的。

那麼,讓我們先從人對顏色的識別開始說起。

我們是怎麼看到顏色的?

我們之所以有視覺,是因為我們的視網膜上存在兩類視覺細胞

  • 視錐細胞 - 負責白天強光下視覺,能區分顏色
  • 視桿細胞 - 負責夜晚弱光下視覺,不能區分顏色
  • 而在白天使用的視錐細胞中,又對三種顏色光最為敏感:紅、綠、藍。沒錯,這就是 RGB 三原色的由來。

    視錐細胞主要分布在視網膜中心地區,也就是黃斑,大約700萬個細胞會在明光環境下,合成3種「視紫藍質」,隨後產生脈衝告訴大腦,「我看到了某某顏色」。

    視桿細胞主要分布在視網膜的非中心區域,大約1億個細胞會在暗光環境下生成1種「視紫紅質」(此物質在明光環境下會被分解),同樣產生脈衝告訴大腦,「我看到了有光亮」。

    值得注意的是,對人來說的可見光,就是「紅橙黃綠青藍紫」中從紅到紫的連續光譜。這裡的連續表示,可見光並不是離散的7種顏色的光,而是從紫光的起始段380nm 到紅光的終止段750nm中連續的各個波長的光。

    可見光的波長和頻率,取自wikipedia合成顏色 - 是否存在棕色光?

    好了,問題來了!! 我們發現,在自然可見光的光譜中,並不能找到粉紅色,或者是棕色。這時候,我們自然會想要提問,是不是存在某種頻率的光,它的顏色是棕色的呢?

    答案是否定的,事實上有一件非常重要的事情需要先明確:顏色並不是物理存在的,我們能看到顏色是因為我們的生理構造導致的。

    顏色是什麼?顏色是生物對於不同頻率的光的感知,物種不同,感知能力也不同,比如小狗眼裡的世界是黑白的,而在另一個極端,皮皮蝦有可以感知16種不同頻率段的視覺細胞。

    380 - 450nm 的光本身並不是紫色的,至少小狗們不這麼認為。但我們人類,恰好能把這個頻率段的光和其他光區分光,然後我們姑且給了它一個名字,叫紫色。

    所謂顏色,不過是我們的視覺細胞對外界輸入的光的一種反應。在複雜的世界中,不僅僅存在單色光,更多存在的是多種頻率的光同時投射到我們眼裡的情況。

    說到這裡,終於可回答下棕色到底是怎麼回事了,並沒有某一個固定頻率的光是棕色的,實際上一個物體之所以是棕色,是因為他是由紅光 + 黃光 + 藍光 按照一定比例混合後的到的。

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

    RGB(150, 100, 50)三原色

    人類最早合成顏色的經驗,是產生自繪畫領域。繪畫顏料領域的三原色是「紅黃藍」,其發現時間可以追溯到 1600年左右。

    RYB色盤

    之後,1908年在印刷和繪畫領域,人們又發現了 CMY 三原色 (Cyan, Maganta, Yellow),再加上 Key Plate 黑色,形成了 CMYK 的顏色模型,並在印刷業中廣泛使用。

    CMY色盤

    還剩下一個經典的三原色 RGB,它是在1860年被發現,進而開始被用在攝影行業,一直到1938年,RGB 被用在CRT顯示的發明上,這才奠定了 RGB 在我們日常生活中的重要地位。

    RGB加色模式 & 減色模式

    當我們談到加色模式和減色模式時,我們指的都是如何使用不同的三原色去合成其他顏色。其中,RGB 對顏色的合成,是加色模式。RYB 和 CMYK 對顏色的合成是減色模式。

  • 發光,用加色模式;
  • 反光,用減色模式;
  • 什麼是發光?能夠在外界沒有光的情況下,自己輻射出光線被我們看到的就叫發光,比如家裡的電燈,街上的霓虹燈、廣告牌。

    什麼是反光?自己不能發光,必須靠反射外界的光才能被我們看到的就叫反光。很明顯,在漆黑一片的頁面,這些只會反光的物質我們是看不見的。舉例來說,身邊絕大多數東西都是屬於反光系列的,比如一件紅色的毛衣,一面黃色的牆,一個綠色的茶杯。

    那為什麼我們看到的毛衣會是紅色的呢?這毛衣本身又不會發射紅色的光?要回答這個問題,還得回到「反光」這個詞上來,反光的關鍵在於,有些光被反射了,而另一些並沒有。那沒被反射的光去了哪?它們是被這件毛衣給吸收了,轉化成了其他能量。

    紅毛衣

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

    加色模式下的顏色合成

    下面,讓我們重新來看一下 RGB 的圖,然後來寫幾個加色模式下的顏色合成公式。

    紅 (R) + 綠 (G) = 黃 (Y)紅 (R) + 藍 (B) = 品紅 (M)綠 (G) + 藍 (B) = 青 (C)紅 (R) + 綠 (G) + 藍 (B) = 白 (W)

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

    RGB補色

    由上面的加色公式,我們可以很容易的得到下列補色

    黃 (Y) = 白 (W) - 藍 (B)品紅 (M) = 白 (W) - 綠 (G)青 (C) = 白 (W) - 紅 (R)

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

    減色模式下的顏色合成

    然後我們再來看下 CMYK 下的顏色合成公式

    黃 (Y) + 品紅 (M) = 紅 (R)黃 (Y) + 青 (C) = 綠 (G)青 (C) + 品紅 (M) = 藍 (B)

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

    可以看到, CMY 之間的兩兩組合讓我們重新獲得了 RGB。看著很神奇,但其實只要使用上面提到的「補色」,就能輕鬆理解這裡面的原因。

    黃 (Y) + 品紅 (M) = 紅 (R) 為例,通過將等式左邊的顏色轉為補色表示,我們可以的到:

    黃 + 品紅= [ 白 - 藍 ] + [ 白 - 綠 ]= 白 - 藍 - 綠= 紅

    用文字來表達就是,如果我們把一個吸收藍光的顏料,和一個吸收綠光的顏料進行混合,那我們就會的到一個吸收藍光加綠光,也就是只反射紅光的顏料。

    CMYK更多的顏色如何合成?

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

    色相 - Hue

    從上圖中抽離出 RGB 三原色,那麼順序是這樣的:

    紅 - 綠 - 藍 - 紅

    紅和綠之間混合出黃,綠藍之間混合出青,藍紅之間混合出品紅。

    發現沒有,純色全部都是從 RGB 中抽出兩個顏色進行混合。那問題來了,將三種顏色混在一起會是什麼效果呢?這裡我們需要介紹另外3種合成顏色的方法:

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

    在繪畫調顏料的時候,減淡一個顏色最好的方法,就是往裡加入白色。同樣的,在 RGB 的模式下,讓一個顏色減淡的方法,就是讓這個顏色往白色去靠,並且是 R、G、B 都按照同一個比例去變化。

    NewColor = OldColor + (255 - OldColor) * TintFactor

    減淡 - Tint

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

    加深 - Shade

    在繪畫調顏料的時候,加深一個顏色最好的方法,就是往裡加入黑色。同樣的,在 RGB 的模式下,讓一個顏色加深的方法,就是讓這個顏色往黑色去靠,和減淡一樣,R、G、B 要按照同比例去變化.

    NewColor = OldColor * (1 - ShadeFactor)

    加深 - Shade變灰 - Tone

    在繪畫調顏料的時候,讓一個顏色變灰的方法,顧名思義,就是加入灰色的顏料。而在 RGB 中,變灰的方法,就是同時使用「減淡」和「加深」。

    NewColor = OldColor * (1 - TintColor) * (1 - ShadeColor) + 255 * TintColor * (1 - ShadeColor)

    變灰 - ToneHSB、HSL

    HSB 有時也會寫成 HSV。這麼多字母,讓我們先來看下,每個字母都是什麼含義。

  • H:Hue,色相
  • S:Saturation,飽和度
  • B:Brightness,明度
  • L:Lightness,亮度
  • HSB,HSL的實用價值在於,這種表示方法更符合人類對顏色的認知。看到春天剛長出的柳芽,我們知道那是嫩綠色的;看到松樹的葉子,我們知道那是深綠色的。雖然兩個顏色不同,但是那同樣是綠色,只是顏色深淺不同。

    總結下我們看待一個顏色的步驟:

  • 大概是個什麼顏色? 紅、黃、藍、綠?
  • 顏色是深還是淺?
  • 顏色是亮還是暗?
  • 這個步驟,是不是和我們上面介紹的合成顏色的步驟(加深,減淡)很像?有了之前的鋪墊,下面介紹下分別如何理解 HSB 和 HSL。

    HSB

  • H - 色相,就是全部純色,紅 - 綠 - 藍 - 紅
  • S - 飽和度,就是減淡的反面。飽和度 100% 就是不減淡
  • V/B - 明度,就是加深的反面。明度 100% 就是不加深
  • 使用 HSB 顏色模式的主要是 Photoshop 里顏色選擇。

    Photoshop 顏色選擇使用 HSBHSL

  • H - 色相, 和 HSB 的定義一致
  • S - 飽和度,注意,這裡的飽和度和 HSB 里的飽和度很不一樣,這裡的 S 控制的是「變灰」
  • L - 亮度,加深或減淡,完全由這個值來控制
  • 使用 HSL 顏色模式的主要有 Photoshop 里的色相飽和度調整、CSS3。

    Photoshop 調整色相飽和度選擇 HSLLab

    全稱 CIE Lab 顏色空間,這是一個按照人對顏色的感知來設計的顏色空間,且和 RGB、CMYK 相比,這是一個設備無關的顏色空間。

  • L:亮度通道,可以類比 HSL 中的 Lightness
  • a:洋紅 - 灰 - 綠
  • b:黃 - 灰 - 藍
  • Lab 是一個比 RGB (sRGB, Adobe RGB) ,CMYK 都要大的顏色空間。它在設計之處的目的就在於:

  • 分離「顏色」和「亮度」
  • 讓a, b顏色的變化,對應的人眼的顏色感知,其變化是線性的
  • 從下圖的球形結構中可以知道,該球的中心位置在 Lab(50, 0, 0),對應到三原色是 RGB(119, 119, 119) 或者 #777777

    Lab 顏色坐標系 (取自aces.edu)

    在實際使用中,Lab 顏色空間有什麼用呢?

  • 作為一個色域最寬的空間,不管你想將照片作為何用,用 Lab 顏色空間來存儲照片,都不會有任何信息損失
  • 調照片的時候,可以在不調明暗的情況下,調整整張照片顏色。
  • 不調明暗,只調顏色 (取自http://digital-photography-school.com/)顏色管理為什麼需要顏色管理?

  • 我們在上面已經說到了很多顏色空間,其中除了 Lab 是設備無關的顏色空間外,其他諸如 RGB、CMYK 的顏色空間,都是設備相關的。

  • 像 RGB 這樣的顏色,它只是定義了如何通過三個數字去對應顏色,但並沒有絕對明確地說應該對應到哪個顏色,比如我們知道 RGB(255, 0, 0) 應該對應到紅,但是到底多紅呢? RGB 本身並沒有定義。

  • 看到問題所在了嗎?我們最終看到的顏色,是一個「絕對的顏色」,但是我們在生產圖片和視頻的時候,用的可能卻是一個「相對的顏色」。也就是說,有可能在 Photoshop 里我設置了一個 RGB(255, 0, 0) 最紅的背景色,但實際在某個投影儀上,觀眾可能覺得這顏色還不夠紅。

    所以怎麼辦呢?我們可以把這個想像成出國旅遊,進入一個國家時,我們需要先還錢。在圖像的世界裡,設備就是國家,比如手機屏幕、顯示器、投影儀、印表機;錢就是顏色數據。

    顏色管理是如何工作的?

    這個匯兌的過程,是如何完成的呢?整個過程要從保存圖片開始,到展示圖片為止。

    sRGB / CMYK 等 ==(描述)==> CIE XYZ / CIE Lab ==(校準)==> 設備顏色。

    而在這「描述」和「校準」的時候,用到的都是一個叫做 ICC Profile 的東西。無論你使用的是 Windows,還是 Mac,你的系統里都會有一個或多個專門的目錄來存放 ICC Profile。

    理論上,從光轉化成數字存儲,需要經過一次 ICC Profile 的 encode,然後從數字存儲到重現成影響,還需要經過一次 ICC Profile 的轉化。典型的例子就是,數碼相機拍完一張照片,然後用印表機列印。

    很好理解的是,不同設備,比如不同數碼相機拍出的照片,需要不同的 ICC Profile 進行轉化。而更進階一點的攝影愛好者,可能會製作不同光照環境下的 ICC Profile 來獲得更還原真是的照片效果。

    對於 ICC Profile 的應用,最直觀的就是在 Photoshop 里,在創建文件和列印文件的時候,都可以選擇不同的 Profile。

    創建時選擇 ICC Profile

    列印時選擇 ICC Profile重視顏色管理

    對於設計師的實際工作中來說,顏色輸出是否準確是一個非常關鍵的事情,而只有準確把我顏色管理,才能讓你的設計在各種設備間無縫轉移。所以,一定要重視顏色管理,重視 ICC Profile

    轉換顏色表示

    原本想把各顏色空間中的顏色轉換演算法貼出來,不過趕巧搜到了一位大牛已經寫好庫,所以就直接貼一下鏈接,對計算機相關感興趣的可以去看看。

    https://github.com/nullice/ColorRNA

    先告一段落

    相信你已經發現了,顏色理論相關的知識相當龐雜,其中還有很大一部分設計到數學公式轉化、計算機存儲處理的部分,也是筆者感興趣的部分,限於篇幅,這些等有機會再做整理。

    感謝能讀到最後的各位。

    Reference

  • RGB Color Model
  • How to Use LAB Color in Photoshop to Add Punch to Your Images
  • Color Management
  • ICC FAQ
  • 著作權歸作者所有

    推薦閱讀:

    查看原文 >>
    相关文章