轉載自：https://www.zhangxiaochun.com/color-space-1/
序言
相信很多做設計的小夥伴都聽說過 RGB 或者 CMYK 這樣的概念，RGB 和 CMYK 就是兩個典型的色彩空間模式，前者主要用於光學色彩展示（比如我們的電腦顯示屏），而後者主要用於印刷（比如彩色打印機分爲CMYK四個墨盒）。但是我們今天要說的色彩空間，還不是這種粒度的劃分，而是針對 RGB 的光學色彩空間，也是和與色彩、屏幕打交道的 UI 設計師、工程師們息息相關的色彩空間。
用 Sketch 的小夥伴都會發現，自從 2017 年末 Sketch 升級到 48 版本之後，就突然新增了一個色彩管理（Color Profile）的概念，用於管理設計稿所運用的色彩空間。但實際上色彩空間的概念早在 1931 年就建立了，而 Photoshop 也在老早就支持了色彩管理。Sketch 之所以到 48 版本（目前最新 55 版本）才新增色彩管理的能力，是因爲在此之前 Sketch 認爲像色彩空間這樣比較有技術深度的概念對設計師來說必要性不大：少一些選擇，少一些困擾，眼不見，心不煩。但既然 Sketch 已經新增了這一概念，這說明時代已經不同，身爲設計師需要了解這些內容。
爲了讓讀者比較容易理解色彩空間的知識，我假設讀者之前沒有了解過相關概念，所以會從最基本的概念講起，將分爲三篇內容進行講述。讀者朋友們根據自己的情況，可以順序閱讀，也可以隨需跳躍性閱讀，當然我建議順序閱讀 ☺️。
RGB 色彩空間模型
我們知道， “色彩” 是人類大腦對事物的一種主觀感覺，爲了將這種 “感性” 進行 “理性” 描述，數學家們創建了 RGB 模型的概念：通過三個數的組合（色值）來表述某一種特定的顏色，從而人類可以將這種感性的色彩感受進行理性地表達和傳遞。比如，RGB(255, 0, 0) 代表純紅色，RGB(0, 255, 0) 代表純綠色，RGB(0, 0, 255) 代表純藍色，而 RGB(255, 255, 0) 代表純黃色（光學中紅色和綠色加法混合會呈現黃色）。
爲什麼是 255 不是 256 也不是 100？這是一種二進制的數學定義，2 的 24 次方是 256，255 個值再加上 0 這個值，就是 256 了。
所以通過 RGB 色彩模型，我們能描述出 256x256x256=16777216 種不同的色值，也就是我們常說的 1600萬色
有的不害臊的廠商玩概念，會說自己支持 1670萬色，還有更不要臉的廠商按照四捨五入，說自己支持 1680萬色，其實是玩了一個文字遊戲，下次看到類似的描述我們呵呵就可以。
通常我們創建一個三維座標系，會使用 X、Y、和 Z 來代表三個軸，如果我們將這三個軸的代表字母換成 R、G 和 B，使用 Red 代表 X 軸，Green 代表 Y 軸，Blue 代表 Z 軸，採用光學加法混色的方式構建這個立方空間的話，就形成了一個基於 RGB 模型的色彩空間了（如下圖）。
爲了便於動態展示，我製作了一個網頁 [Color Cube] ，可以鼠標拖拽，720° 無死角感受一下這個立方體模型，感興趣的小夥伴可以去體驗一下（請右鍵在瀏覽器新標籤打開鏈接）。
根據高中學過的 “空間直角座標系” 知識，我們知道通過 RGB(x, y, z) 這種方式構建的每一個顏色點，都對應於這個立方體中的某一個點，也就是說每一種顏色都被包含在我們的色彩空間之內，而我們剛剛就構建了一個最基礎的色彩空間。
是不是沒有想象中那麼枯燥，還挺有意思的？我們繼續往下看~
HSL 色彩空間模型
RGB(x, y, z) 這種表述方式更適合於告訴計算機該如果做色彩的展示，但是設計師一般不會這樣去設計自己想要的顏色（我想要一個 32 的紅，配上 144 的綠，然後配上 205 的藍？），我們比較常用的是通過設計軟件的調色器去調我們想要的顏色。所以爲了能在一款二維平面的軟件界面中取到三維空間的色彩，我們還需要再介紹一下除了 RGB 之外，另外一種描述色彩三維空間的方案：HSL，也就是 Hue（色相）Saturation（飽和度）以及 Lightness（明度）。調色器一般都是由兩部分組成：一個二維的調色窗口，然後配合一個一維的調色軸，以此組合成爲三維調色器。比如下圖左側 Sketch 的調色器以及右側 Keynote 使用的 Mac 組件調色器。
通過 HSL 調色的結果會被計算機以 RGB 的方式進行表達。這同時也就說明 HSL 空間中的每一個色彩都能和 RGB 空間中的色彩相對應，或者換句話說， HSL 這個空間直角座標系內的每一個座標點，都會對應到 RGB 這個空間直角座標系當中去。那麼他們是怎樣關聯的呢？
如果你已經體驗過剛剛提到的 Color Cube ，你應該已經發現，在 RGB 立方體中，越靠近三個軸的交叉點 O 點的位置，顏色也越深，O 點是純黑色的；越遠離 O 點的位置，顏色越淺，到 O 點的對角點 A 的位置，已經是純白色了。而 O 點和 A 點的連線中的每一個點，其 RGB(x, y, z) 的值都是 x=y=z，這個是我們數學都學過的。而且 OA 連線中的每一個點都是從純黑到純白不同程度的灰色（中性色）。
如果我們調整這個 RGB 立方體的角度，讓 OA 連線垂直於我們的屏幕，就會看到這樣一個六邊形的圖案（如下圖），是不是有點眼熟，哈哈哈。通過一些數學算法，將這個六邊形拉伸變形成圓形，是不是就是我們常見的色盤了？其中圓形不斷變色的圓周，代表 H（色相）；從圓心到圓周的變化，代表 S（飽和度），越接近於圓心，飽和度越低；從 O 點到 A 點的變化，代表 L（明度），越接近於 A 點，明度越高（見上圖）。
現在再回過頭看 Sketch 和 Keynote 的調色器，雖然他們長得不一樣，但我相信聰明的同學已經猜到他們的關係了：Sketch 的調色器是將 S（飽和度）和 L（明度）組成的平面作爲了二維調色窗，將 H（色相）作爲了一維調色軸；而 Keynote 使用的調色器，是將 H（色相）和 S（飽和度）組成的平面作爲二維調色窗，將 L（明度）作爲了一維調色軸。
是不是有一種恍然大悟的感覺，發現自己對 HSL 以及調色器的理解更加透徹了？
Tips：在我們做同色系漸變設計的時候，可以通過直接調節 S（飽和度）或者 L（明度） 的值來實現過渡效果。
到這裏，第一篇關於色彩空間的基礎知識就講完了，不枯燥吧？
本文分享自微信公衆號 - 音視頻開發進階（glumes_blog）。
如有侵權，請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。