色彩空間（一）：色彩空間基礎(chǔ)

轉(zhuǎn)載自：https://www.zhangxiaochun.com/color-space-1/

序言

相信很多做設(shè)計(jì)的小伙伴都聽說過 RGB 或者 CMYK 這樣的概念，RGB 和 CMYK 就是兩個(gè)典型的色彩空間模式，前者主要用于光學(xué)色彩展示（比如我們的電腦顯示屏），而后者主要用于印刷（比如彩色打印機(jī)分為CMYK四個(gè)墨盒）。但是我們今天要說的色彩空間，還不是這種粒度的劃分，而是針對 RGB 的光學(xué)色彩空間，也是和與色彩、屏幕打交道的 UI 設(shè)計(jì)師、工程師們息息相關(guān)的色彩空間。

用 Sketch 的小伙伴都會(huì)發(fā)現(xiàn)，自從 2017 年末 Sketch 升級到 48 版本之后，就突然新增了一個(gè)色彩管理（Color Profile）的概念，用于管理設(shè)計(jì)稿所運(yùn)用的色彩空間。但實(shí)際上色彩空間的概念早在 1931 年就建立了，而 Photoshop 也在老早就支持了色彩管理。Sketch 之所以到 48 版本（目前最新 55 版本）才新增色彩管理的能力，是因?yàn)樵诖酥?Sketch 認(rèn)為像色彩空間這樣比較有技術(shù)深度的概念對設(shè)計(jì)師來說必要性不大：少一些選擇，少一些困擾，眼不見，心不煩。但既然 Sketch 已經(jīng)新增了這一概念，這說明時(shí)代已經(jīng)不同，身為設(shè)計(jì)師需要了解這些內(nèi)容。

為了讓讀者比較容易理解色彩空間的知識，我假設(shè)讀者之前沒有了解過相關(guān)概念，所以會(huì)從最基本的概念講起，將分為三篇內(nèi)容進(jìn)行講述。讀者朋友們根據(jù)自己的情況，可以順序閱讀，也可以隨需跳躍性閱讀，當(dāng)然我建議順序閱讀 ??。

RGB 色彩空間模型

我們知道， “色彩” 是人類大腦對事物的一種主觀感覺，為了將這種 “感性” 進(jìn)行 “理性” 描述，數(shù)學(xué)家們創(chuàng)建了 RGB 模型的概念：通過三個(gè)數(shù)的組合（色值）來表述某一種特定的顏色，從而人類可以將這種感性的色彩感受進(jìn)行理性地表達(dá)和傳遞。比如，RGB(255, 0, 0) 代表純紅色，RGB(0, 255, 0) 代表純綠色，RGB(0, 0, 255) 代表純藍(lán)色，而 RGB(255, 255, 0) 代表純黃色（光學(xué)中紅色和綠色加法混合會(huì)呈現(xiàn)黃色）。

為什么是 255 不是 256 也不是 100？這是一種二進(jìn)制的數(shù)學(xué)定義，2 的 24 次方是 256，255 個(gè)值再加上 0 這個(gè)值，就是 256 了。

所以通過 RGB 色彩模型，我們能描述出 256x256x256=16777216 種不同的色值，也就是我們常說的 1600萬色

有的不害臊的廠商玩概念，會(huì)說自己支持 1670萬色，還有更不要臉的廠商按照四舍五入，說自己支持 1680萬色，其實(shí)是玩了一個(gè)文字游戲，下次看到類似的描述我們呵呵就可以。

通常我們創(chuàng)建一個(gè)三維坐標(biāo)系，會(huì)使用 X、Y、和 Z 來代表三個(gè)軸，如果我們將這三個(gè)軸的代表字母換成 R、G 和 B，使用 Red 代表 X 軸，Green 代表 Y 軸，Blue 代表 Z 軸，采用光學(xué)加法混色的方式構(gòu)建這個(gè)立方空間的話，就形成了一個(gè)基于 RGB 模型的色彩空間了（如下圖）。

為了便于動(dòng)態(tài)展示，我制作了一個(gè)網(wǎng)頁 [Color Cube] ，可以鼠標(biāo)拖拽，720° 無死角感受一下這個(gè)立方體模型，感興趣的小伙伴可以去體驗(yàn)一下（請右鍵在瀏覽器新標(biāo)簽打開鏈接）。

根據(jù)高中學(xué)過的 “空間直角坐標(biāo)系” 知識，我們知道通過 RGB(x, y, z) 這種方式構(gòu)建的每一個(gè)顏色點(diǎn)，都對應(yīng)于這個(gè)立方體中的某一個(gè)點(diǎn)，也就是說每一種顏色都被包含在我們的色彩空間之內(nèi)，而我們剛剛就構(gòu)建了一個(gè)最基礎(chǔ)的色彩空間。

是不是沒有想象中那么枯燥，還挺有意思的？我們繼續(xù)往下看~

HSL 色彩空間模型

RGB(x, y, z) 這種表述方式更適合于告訴計(jì)算機(jī)該如果做色彩的展示，但是設(shè)計(jì)師一般不會(huì)這樣去設(shè)計(jì)自己想要的顏色（我想要一個(gè) 32 的紅，配上 144 的綠，然后配上 205 的藍(lán)？），我們比較常用的是通過設(shè)計(jì)軟件的調(diào)色器去調(diào)我們想要的顏色。所以為了能在一款二維平面的軟件界面中取到三維空間的色彩，我們還需要再介紹一下除了 RGB 之外，另外一種描述色彩三維空間的方案：HSL，也就是 Hue（色相）Saturation（飽和度）以及 Lightness（明度）。調(diào)色器一般都是由兩部分組成：一個(gè)二維的調(diào)色窗口，然后配合一個(gè)一維的調(diào)色軸，以此組合成為三維調(diào)色器。比如下圖左側(cè) Sketch 的調(diào)色器以及右側(cè) Keynote 使用的 Mac 組件調(diào)色器。

通過 HSL 調(diào)色的結(jié)果會(huì)被計(jì)算機(jī)以 RGB 的方式進(jìn)行表達(dá)。這同時(shí)也就說明 HSL 空間中的每一個(gè)色彩都能和 RGB 空間中的色彩相對應(yīng)，或者換句話說， HSL 這個(gè)空間直角坐標(biāo)系內(nèi)的每一個(gè)坐標(biāo)點(diǎn)，都會(huì)對應(yīng)到 RGB 這個(gè)空間直角坐標(biāo)系當(dāng)中去。那么他們是怎樣關(guān)聯(lián)的呢？

如果你已經(jīng)體驗(yàn)過剛剛提到的 Color Cube ，你應(yīng)該已經(jīng)發(fā)現(xiàn)，在 RGB 立方體中，越靠近三個(gè)軸的交叉點(diǎn) O 點(diǎn)的位置，顏色也越深，O 點(diǎn)是純黑色的；越遠(yuǎn)離 O 點(diǎn)的位置，顏色越淺，到 O 點(diǎn)的對角點(diǎn) A 的位置，已經(jīng)是純白色了。而 O 點(diǎn)和 A 點(diǎn)的連線中的每一個(gè)點(diǎn)，其 RGB(x, y, z) 的值都是 x=y=z，這個(gè)是我們數(shù)學(xué)都學(xué)過的。而且 OA 連線中的每一個(gè)點(diǎn)都是從純黑到純白不同程度的灰色（中性色）。

如果我們調(diào)整這個(gè) RGB 立方體的角度，讓 OA 連線垂直于我們的屏幕，就會(huì)看到這樣一個(gè)六邊形的圖案（如下圖），是不是有點(diǎn)眼熟，哈哈哈。通過一些數(shù)學(xué)算法，將這個(gè)六邊形拉伸變形成圓形，是不是就是我們常見的色盤了？其中圓形不斷變色的圓周，代表 H（色相）；從圓心到圓周的變化，代表 S（飽和度），越接近于圓心，飽和度越低；從 O 點(diǎn)到 A 點(diǎn)的變化，代表 L（明度），越接近于 A 點(diǎn)，明度越高（見上圖）。

現(xiàn)在再回過頭看 Sketch 和 Keynote 的調(diào)色器，雖然他們長得不一樣，但我相信聰明的同學(xué)已經(jīng)猜到他們的關(guān)系了：Sketch 的調(diào)色器是將 S（飽和度）和 L（明度）組成的平面作為了二維調(diào)色窗，將 H（色相）作為了一維調(diào)色軸；而 Keynote 使用的調(diào)色器，是將 H（色相）和 S（飽和度）組成的平面作為二維調(diào)色窗，將 L（明度）作為了一維調(diào)色軸。

是不是有一種恍然大悟的感覺，發(fā)現(xiàn)自己對 HSL 以及調(diào)色器的理解更加透徹了？

Tips：在我們做同色系漸變設(shè)計(jì)的時(shí)候，可以通過直接調(diào)節(jié) S（飽和度）或者 L（明度） 的值來實(shí)現(xiàn)過渡效果。

到這里，第一篇關(guān)于色彩空間的基礎(chǔ)知識就講完了，不枯燥吧？