相信很多做設計的小夥伴都聽說過 rgb 或者 cmyk 這樣的概念，rgb 和 cmyk 就是兩個典型的色彩空間模式，前者主要用於光學色彩展示（比如我們的電腦顯示屏），而後者主要用於印刷（比如彩色印表機分為cmyk四個墨盒）。但是我們今天要說的色彩空間，還不是這種粒度的劃分，而是針對 rgb 的光學色彩空間，也是和與色彩、螢幕打交道的 ui 設計師、工程師們息息相關的色彩空間。
用 sketch 的小夥伴都會發現，自從 2017 年末 sketch 公升級到 48 版本之後，就突然新增了乙個色彩管理（color profile）的概念，用於管理設計稿所運用的色彩空間。但實際上色彩空間的概念早在 1931 年就建立了，而 photoshop 也在老早就支援了色彩管理。sketch 之所以到 48 版本（目前最新 55 版本）才新增色彩管理的能力，是因為在此之前 sketch 認為像色彩空間這樣比較有技術深度的概念對設計師來說必要性不大：少一些選擇，少一些困擾，眼不見，心不煩。但既然 sketch 已經新增了這一概念，這說明時代已經不同，身為設計師需要了解這些內容。
為了讓讀者比較容易理解色彩空間的知識，我假設讀者之前沒有了解過相關概念，所以會從最基本的概念講起，將分為三篇內容進行講述。讀者朋友們根據自己的情況，可以順序閱讀，也可以隨需跳躍性閱讀，當然我建議順序閱讀 ☺️。我們知道， 「色彩」 是人類大腦對事物的一種主觀感覺，為了將這種 「感性」 進行 「理性」 描述，數學家們建立了 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) 這種方式構建的每乙個顏色點，都對應於這個立方體中的某乙個點，也就是說每一種顏色都被包含在我們的色彩空間之內，而我們剛剛就構建了乙個最基礎的色彩空間。
是不是沒有想象中那麼枯燥，還挺有意思的？我們繼續往下看~
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（明度） 的值來實現過渡效果。到這裡，第一篇關於色彩空間的基礎知識就講完了，不枯燥吧？
3 色彩空間
3.色彩空間 下面的圖的三個點表示的是rgb，當三個通道全是0時是黑色，全是255時是白色。灰度圖 gray cv cvtcolor img,cv color bgr2gray cv imshow gray gray hsv色彩空間轉換 hsv cv.cvtcolor img,cv color bg...
《色彩解答》之一 色彩層次
敢寫這樣的文章真是有點膽大包天了，但是面對很多沒有接受專業美術教育的網頁設計人員來說，色彩問題真是讓他們頭疼的事。也許只是因為在這個方面沒辦法開悟結果放棄了這個行業。所以我也就冒天下之大不違，斗膽寫這篇系列文章。希望能過這篇文章為那些需要幫助的朋友進一點微薄之力。但是由於色彩涉及內容很多，不知寫什麼...
7 色彩空間轉換
常見的色彩空間 色彩空間轉換 import cv2 as cv def color space demo img gray cv.cvtcolor img,cv.color bgr2gray cv.imshow gray gray hsv cv.cvtcolor img,cv.color bgr2h...