- 為什麼我的設計稿被開發同事實現之後色彩會有差異？
- 為什麼我的設計稿在 Sketch 中和 Photoshop 中顏色不太一樣？
- 為什麼我用屏幕取色器取到的顏色和實際顏色色值不同？
- 我該如何設置我的色彩空間？
- …
序言
相信很多做設計的小夥伴都聽說過 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) 代表純黃色（光學中紅色和綠色加法混合會呈現黃色）。
所以通過 RGB 色彩模型，我們能描述出 256x256x256=16777216 種不同的色值，也就是我們常說的 1600萬色
通常我們創建一個三維坐標系，會使用 X、Y、和 Z 來代表三個軸，如果我們將這三個軸的代表字母換成 R、G 和 B，使用 Red 代表 X 軸，Green 代表 Y 軸，Blue 代表 Z 軸，采用光學加法混色的方式構建這個立方空間的話，就形成瞭一個基於 RGB 模型的色彩空間瞭（如下圖）。
根據高中學過的 “空間直角坐標系” 知識，我們知道通過 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 以及調色器的理解更加透徹瞭？
色彩的表達
實際上，計算機在表達色值的時候，除瞭使用 rgb(x, y, z) 的色值方式，還有十六進制的色值表達方式：比如 #FF0000，這個我相信大傢都已經非常熟悉瞭。但在某些場景中，其實計算機也可以直接通過 HSL 進行色值的表達，比如 hsl(120, 45%, 75%)，H 的取值范圍是從 0 到 360，代表色盤的圓周度數，0 或 360 是紅色，120 是綠色，240 是藍色；S 是百分比值，取值范圍 0%-100%，0% 意味著灰色，而 100% 是全彩；L 同樣是百分比值，取值范圍 0%-100%，0% 是黑色，100% 是白色。在此基礎上還可以再加上 Alpha 通道，表達顏色的半透明程度，比如rgba(255, 0, 0, .15)、#FFFF0000、hsla(120, 45%, 75%, 0.3)。
但是我建議大傢使用 RGB 或者是十六進制的方式來傳達色彩，除瞭瀏覽器等展示場景的支持性和兼容性之外，主要是因為 HSL 所表現的色彩比較少。前面我們有提到，RGB 可以表現出 256x256x256=16777216 色彩（1600萬色），6位十六進制色值也能表現 2的24次方=16777216（1600萬色），而 HSL 隻能表現出 360x101x101=3672360（360萬色）。所以 RGB 能表現的色彩要比 HSL 更多；如果你在設計軟件中微調 RGB 中的某一個色值，你可能會發現 HSL 的值沒有變。但是在 CSS3 卻又支持 HSL 使用小數，也就是說 HSL 的顏色似乎又遠比 RGB 的色彩豐富… 這似乎是一個坑，所以我們繞過去，安安靜靜使用 RGB 和 十六進制色值來展示我們的顏色吧。
到這裡，第一篇關於色彩空間的基礎知識就講完瞭，不枯燥吧？
在下一篇文章 《色彩空間（二）：CIE 色度圖與色彩空間》 中，我們會更深入一點，講解 sRGB 和 P3 Display 色彩空間和色域的相關概念（其實下一篇才是重點）。
感興趣的小夥伴還可以加我微信，咱們可以在群裡進行一些日常學術交流（閑聊扯淡） 。
