色彩模型與色彩空間

色彩理論對於絕大多數視覺從業人員來說,就好比是去游泳館必帶的泳衣,沒有這套東西來支撐,你怕是不好意思下水的。預計這篇文章的受眾是有一定色彩基礎的老司機們,所以跳過那些色彩的產生啊之類正確的廢話,嗯.....讓我們直接進入正題吧!

首先要明確的是【色彩模型】與【色彩空間】是不同的兩個概念:

色彩模型是把色彩按規則排列的三維型體。而色彩空間是按照一定約束下排列而成的空間,在一個色彩模型下可以有不同的色彩空間,它們根據排列的條件的不同會有不同的色域(所能表示色彩的範圍)和含義,色彩模型只有具體到一種色彩空間上才有實用性。

簡要總結,色彩模型是人們描述色彩的方式,而色彩空間是人們根據色彩模型來準確定義色彩的一個環境。

首先我們講常見的幾種【色彩模型】:

1,RGB

這個根據三原色來製作的直角坐標系立方體是我們一說色彩理論最容易被搬出來顯擺的寶貝(關於它的設計原理上過初中的應該都明白,我便不再廢話)。然而它是一種對機器友好卻有些反人類的色彩模型。有關於這點的實力吐槽可以看一下donwang的這篇文章:色生心中:人性化的HSL模型 - 騰訊CDC

2,CMY/K

對於理解RGB的人來說很簡單的模型,補色相對應而來的。之所以增加K(黑)進來,是因為C(洋紅)M(青)Y(黃)三色很難以混合出純黑或者灰色。印刷界大神們的最愛,所以有時候又叫印刷四分色模型。

3,HSL與HSB(HSV)

上下圖結合理解更方便些。

維基百科給了這二者非常清楚的解釋:https://en.wikipedia.org/wiki/HSL_and_HSV(之所以貼英文版是因為來回切換後發現中文版比英文版少了好多的內容,誒,夭壽啦!)

這裡我只說最為關鍵地方,HSL與HSB中的HUE(色相)涵義是相同的。但是SATURATION(飽和度)雖然用詞一樣,但是涵義(也就是演算法)是截然不同的。另外需要注意的是HSL中L(Lightness亮度)與HSV/B中V(Value明度)/B(Brightness)是有區別的。具體區別見下圖:

之後,由這二者會演變出來色錐模型

這種模型就更為符合人眼的觀看方式,因為無論是HSL還是HSB色柱都只是理論上的純數學模型,但是當亮度(這裡蓋指兩者色彩亮度)亮到一定程度或者暗到一定程度時人眼便無法分辨出具體的色彩區別。於是色錐是兩種模型更為人性化的體現方式。

最後關於二者的比較,可以谷歌下維基百科給出的講解。

4,HWB

HWB 是另一種根據色相的色彩模型,與 HSL 或者 HSV 不同,HWB 沒有飽和度或者亮度的概念,取之代替的是 W:白色的的程度,B:黑色的程度。這個畫畫的朋友們應該感到比較親切。


接下來我們來講常見的幾種【色彩空間】

首先要說明的是我們主要討論的是RGB色彩模型的色彩空間。

它主要有:

sRGB adobeRGB appleRGB prophotoRGB

在此我主要講最為常用的sRGB與adobeRGB

如圖上邊為sRBG下邊為adobeRGB的色彩空間。不仔細看的話二者形狀上的差別並不明顯,但是從範圍上可以看出aRGB的色彩範圍要大過sRGB很多。

也許有人會問,這兩種色彩空間的建立依據是什麼,為什麼不同色彩在亮度軸上的位置高低不同。這裡就要引出【輝度】這一概念,眾所周知,不同色彩在色彩模型看來亮度只受亮度坐標影響。但是在人類實際看來,相同亮度飽和度的不同色彩在明亮觀感上是有差別的。而【輝度】就是經過色覺矯正後的亮度。說一千道一萬,不如一張圖來的直接:

理解了輝度的問題,那麼來看sRGB色彩空間就容易明白的多了,將RGB色彩模型根據伽馬校正(為圖像進行伽馬編碼的目的是用來對人類視覺的特性進行補償)放在【CIE 1931 Yxy】中便獲得了我們看到的立體的sRGB色彩空間。

唉,複雜啊,又引出了新的名詞:【CIE】

CIE (Commission Internationale de L』Eclairage)國際照明委員會,這個組織曾進行過一系列實驗與標準的制度,其制度的一系列的標準是近一個世紀以來色彩的學術與行業標準。CIE 色彩空間的目的是構建一個可以描述和排列所有色彩的系統。

其中我們所講的【CIE 1931 Yxy】就是CIE標準色彩空間里的一種

看到這張圖片大家是不是又有一陣親切感嘞?買顯示器的商家們用來講色域的馬蹄圖通常就是這幅。

再回到sRGB在CIE 1931 Yxy上的表現,如果變成平面圖那麼就是這個樣子的:

圖中的三角形就是sRGB在CIE 1931 Yxy中的色域範圍。

關於色彩理論的知識,這也只是冰山一角。其中涉及到的數學,計算機,心理學等等方面相互交錯。這篇文章也僅僅是想對其中色彩模型以及色彩空間部分做一個簡單的認知上的梳理。其中觀點全部是我參考網路資料的個人理解,非常歡迎諸位前來討論指正。

最後的最後,圖片全部來源網路,侵刪。

參考鏈接:

HSL and HSV - Wikipedia

https://zh.wikipedia.org/wiki/SRGB色彩空間

UI 設計知識庫 [01] 色彩 · 理論

色生心中:人性化的HSL模型 - 騰訊CDC


推薦閱讀:

乾貨 | 如何判斷人體色輕重?你最佳的深淺用色範圍在哪?
我想要跨平台色彩顯示儘可能接近,是否只要修改本機配置文件為srgb並做色彩校正即可?
有沒有比白更白的顏色?
如何系統地學習色調曲線的知識?

TAG:色彩管理 | 色彩學 |