摘要：色相是這個圓柱的偏角，飽和度為圓柱水平切面的半徑，亮度以圓柱的高度表示。這意味著中，飽和度總是從完全飽和變化到等價的灰色，而在中是從完全飽和變化為白色。到的換算在數學上定義為空間的坐標到空間的坐標的換算。當為亮度為極值時，飽和度恒等于。

我在做 webapp 的頂部導航欄時，碰到了一個挑戰，導航欄的字體與圖標要根據背景的顏色深淺來顯示不同白色和黑色，但是導航欄的顏色是支持多種配色的，我不可能根據每一個配色去定義這個顏色的深淺，于是我開始研究起了顏色空間的轉換……

對于CSS，我們最常見的就是 16進制的 RGB。 從黑色到白色依次是 #000000 ... #FFFFFF

RGB也稱三原色光模式（RGB color mode），原理是將紅綠藍三種顏色的色光已不同的比例相加，已形成多種多樣的色光（三原色不可能用其他燈光的顏色合成） -- 維基百科

當前計算機硬件采取每一個像素用24Bit來表示不同的顏色，每8位表示一個原色的強度，最高值為2^8，也就是256個值，組合起來可以表示 16777216(256^3) 種顏色。之所以24位，這是因為人眼最高只能分辨出1000萬種顏色，因此足矣。

當然也有32Bit的模式，但是實際上也是24Bit，余下的8Bit不分配到像素中，主要是為了提高數據輸送的速度（一般而言1word為16Bit，32Bit === 1 double word,處理器不需要做多余的換算），同樣在一些特殊情況下，余下的8Bit 用來表示像素的透明度

因此 #FFFFFF 同樣可以表示為 rgb(255, 255, 255)

很自然地就可以采用三維空間來描述RGB的全值域，如圖所示x軸為紅色，y軸為藍色，z軸為綠色。黑色藏在了立方體的背面。MAX=255，MIN=0。用這種方式表示可以很簡單得通過計算兩個點的距離遠近來判斷顏色是否相近。

幾個極點的坐標分別表示的顏色

但是這不足以解決文章開頭需要解決的問題，因為從當前的顏色空間中，我們無法要直觀地去辨別那些顏色是亮色，哪些顏色是暗色，很難，我們只知道一個顏色的紅綠藍混合比例。我們需要找出一種規律，去分類顏色的明暗。

出于我們感性的角度，顏色混合并不直觀，我們判別一種顏色的思維首先會看看這是什么顏色，然后再確認顏色深淺如何、明暗度如何。事實上大部分藝術家在創作的時候也更傾向于這種思維。

所以我們很多軟件上的調色工具都會基于這樣的思路去設計，首先會有一個色板、然后會有飽和度、亮度這樣的調整。

然而一早出現HSL的時候卻不是為了此目的，記錄最早顯示的是1938年 Georges Valensi 為了解決彩色電視信號兼容單色電視信號的問題發明了HSL色彩空間（單色電視信號僅包括L信號）。往后1978年 Alvy Ray Smith 在編寫 SuperPaint （SuperPaint是第一個計算機光柵圖形編輯器或“繪畫”程序之一）的時候發明了HSV（HSB）模型。經過實踐反映了這兩種模型給使用者可以帶來更直觀的感受。

HSL 三種維度分辨為 Hue（色相）、Saturation（飽和度）、Lightness（亮度），幾何表示為一個圓柱坐標系。色相是這個圓柱的偏角，飽和度為圓柱水平切面的半徑，亮度以圓柱的高度表示。

HSV 的三種維度分別是 Hue（色相）、Saturation（飽和度）、Value（明度），在色相的定義上與HSL保持一致，但是在飽和度上的定義是有區別的。

這兩者之間應該使用哪種模型，目前是非常有爭議的。支持HSL的人認為他更好的反映了飽和度和亮度作為兩個獨立參數的概念直覺（HSV最低的飽和度為白色是非常反直覺的），而另一部分的人認為，HSL的飽和度的定義容易給人造成迷惑，比如亮度極高時，白色被認為是高飽和度的。這意味著

HSL中，飽和度總是從完全飽和變化到等價的灰色，而在HSV中是從完全飽和變化為白色。

HSL中亮度的變化跨域從黑色到選擇的色相再到白色的過程，HSV中明度的定義只從黑色過渡到選擇的色相。

因此通常在繪制坐標時，飽和度會被替換為 色度（Chroma）表示，用以過濾一些不符合直覺的坐標，HSL 對應呈雙錐型的 HCL，而HSV 則對應錐形的 HCV 模型。

如今HSL 與 HSV 在軟件上已經有了大量的運用。比如

Adobe 套件（Photoshop，Illustrator...）-- HSV

APPLE Mac OS X 系統顏色選擇器 --HSV

CSS3 -- HSL

Windows系統顏色選擇器 -- HSL

當然隨著系統的升級與支持，也不乏有兩者都支持的軟件。

沒有孰優孰劣，在做選擇的時候只考慮使用的場景哪種更適合，當然在WEB的范疇中，由于CSS3的標準規定，HSL更有利于顏色的換算。而了解到這里，我已經對開頭的需求有了一個明確的實現方案。

在數學上定義為 RGB 空間的r,g,b坐標到 HSL 空間的 h,s,l 坐標的換算。

r,g,b ∈ [0, 1] ,max = max(r, g, b), min = min(r, g, b)

h ∈ [0, 360], s,l ∈ [0, 1]

首先會先計算色相值，對應是在圓柱橫切面角度六等分的不同夾角下的值有不同的換算公式，從上往下1到5對應的區域

實際上 max = min 時是的灰色，h = undefined，上圖中的第一條公式表示有誤。當 h = 0° 一般表示計算為紅色，也就是包含在了第二條計算公式中。這點需要特別注意

其次是亮度的計算，其實亮度的定義這方面是有爭議的，并不是真正意義上明確的，而是基于不同的模型做不同的定義，這里就不做具體的討論，HSL中亮度的定義取RGB中最大值與最小值相加的二分之一

最后是飽和度的計算公式，首先定義色度Chroma = max - min，從生理角度理解三種視錐細胞中，刺激最大與刺激最小之間的差異，
讓人產生了顏色的鮮艷感，而與刺激中等的細胞關系不大。

我們一開始介紹HSL的時候有提到過，HSL模型中有些值實際上已經超出了RGB定義的范疇，超出的部分實際上是沒有意義的，所以圈定了另外一個范圍為 HCL，是呈現一種雙錐形的幾何表示。當為亮度為極值時，飽和度恒等于0。
中間分成兩節對應不同的計算公式。下半截對應公式2，上半截對應公式1,緊接著飽和度是受到亮度的制約，因此配合亮度進行計算。

function RGB2HSL(r, g, b) {
  r = r / 255
  g = g / 255
  b = b / 255

  const max = Math.max(r, g, b)
  const min = Math.min(r, g, b)
  const delta = max - min
  let h, s, l

  if (max ==== min) {
    h = 0
  } else if (max === r) {
    h = ((g - b) / delta) % 6
  } else if (max === g) {
    h = (b - r) / delta + 2
  } else {
    h = (r - g) / delta + 4
  }
  h = Math.round(h * 60)
  if (h < 0) h += 360

  l = (max + min) / 2,
  s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));

  // 切換為百分比模式
  s = +(s * 100).toFixed(1);
  l = +(l * 100).toFixed(1);

  return { h, s, l }
}

色相的換算跟HSL是一致的。飽和度和明度定義分別是

function RGB2HSV(r, g, b) {
  r = r / 255
  g = g / 255
  b = b / 255

  const max = Math.max(r, g, b)
  const min = Math.min(r, g, b)
  const delta = max - min
  let h, s, l

  if (max ==== min) {
    h = 0
  } else if (max === r) {
    h = ((g - b) / delta) % 6
  } else if (max === g) {
    h = (b - r) / delta + 2
  } else {
    h = (r - g) / delta + 4
  }
  h = Math.round(h * 60)
  if (h < 0) h += 360

  // 基于HSL函數簡單的變化即可適用
  l = max,
  s = delta === 0 ? 0 : delta / max;

  s = +(s * 100).toFixed(1);
  l = +(l * 100).toFixed(1);

  return { h, s, l }
}