RGB、HSL、HSV及各種顏色選擇器界面

你知道嗎？原來顏色是種四維產物。

色彩體系模型

我們知道，在描述一個顏色時，往往需要4個變量，其中三個變量代表顏色，最後一個變量代表透明度。

以目前應用最廣泛的孟塞爾色體爲例，橫切面展示了色相的變化。色相是指色彩的相貌， 用於區分不同的顏色 。根據光的不同波長，通過物體表面反射表現出紅色、黃色或綠色等，這種特性被稱之爲色相。

孟塞爾色立縱剖面圖的縱向代表色彩的明度。物體表面反射光的程度不同，色彩的明暗程度就會有區別，這種色彩的明暗程度稱爲明度。在孟塞爾顏色系統中，黑色的絕對明度被定義爲0（理想黑），而白色的絕對明度被定義爲100（理想白）；而相對明度就如通常我們所看到的字黑被定義爲5，紙白被定義爲95；其他系列灰色則介於兩者之間。

塞爾色立縱剖面圖的橫向代表色彩的純度，純度值由0開始，向球面以2遞增。純度代表着色彩中包含的單種標準色成分的比例，也是色彩感覺強弱的標誌 。
不同色相所能達到的純度範圍是不一樣的，比如紅色的純度最高，而綠色純度相對低些，其他的色相居中，同時由於不同色相本身的冷暖亮暗差別很大，明度因色相而異。

有了色相、明度、純度三個維度，再加上第四個維度——透明度，我們就可以用它們來表示我們看到的色彩了。

常見的色彩表示方式

• RGB
  R：red 紅色
  G：green 綠色
  B：blue 藍色
  

• HSL/ESL
  H/E：hue 色相
  S：saturation 飽和度
  L：lightness 亮度（最白→最黑）
  

• HSB/HSV
  H：hue 色相
  S：saturation 飽和度
  B：brightness 明度
  V：value 值（代表深淺）
  

• HEX
  HEX色彩空間：又叫十六進制顏色模式，格式爲#000000。當然，HEX也可以添加透明度。

透明度參照表；
00%=FF（不透明） 5%=F2 10%=E5 15%=D8 20%=CC
25%=BF 30%=B2 35%=A5 40%=99 45%=8c 50%=7F
55%=72 60%=66 65%=59 70%=4c 75%=3F 80%=33
85%=21 90%=19 95%=0c 100%=00（全透明）

不同軟件和系統的色彩選擇器

我們知道，顏色是個四維產物，必須由4個變量才能精確表達一種顏色。而在用戶界面中，大都都是在平面內操作，所以一般需要一個二維面選擇器、一個一維滑動選擇器，再加一個透明度控制值器。

• Windows
  Windows的默認顏色選擇器中，二維面選擇器選擇的是色相和飽和度，然後單獨選擇明度。
  

• MacOS
  MacOS系統，顏色選擇器就豐富多了，可以按照不同的分類來自由選擇。
  

• Sketch
  在設計軟件中，二維面一般爲飽和度和明度，色相和透明度單獨選擇。
  

• Photoshop
  

• Adobe XD
  

• Axure
  

• Blender
  

• C4D
  

參考資料：
1. RGB、HSL、Hex網頁色彩，看完這篇全懂了
2. 走進色彩的四維世界
3. 透明度與十六進制代碼轉換