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

我在做 webapp 的頂部導(dǎo)航欄時(shí)，碰到了一個(gè)挑戰(zhàn)，導(dǎo)航欄的字體與圖標(biāo)要根據(jù)背景的顏色深淺來顯示不同白色和黑色，但是導(dǎo)航欄的顏色是支持多種配色的，我不可能根據(jù)每一個(gè)配色去定義這個(gè)顏色的深淺，于是我開始研究起了顏色空間的轉(zhuǎn)換……

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

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

當(dāng)前計(jì)算機(jī)硬件采取每一個(gè)像素用24Bit來表示不同的顏色，每8位表示一個(gè)原色的強(qiáng)度，最高值為2^8，也就是256個(gè)值，組合起來可以表示 16777216(256^3) 種顏色。之所以24位，這是因?yàn)槿搜圩罡咧荒芊直娉?000萬種顏色，因此足矣。

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

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

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

幾個(gè)極點(diǎn)的坐標(biāo)分別表示的顏色

但是這不足以解決文章開頭需要解決的問題，因?yàn)閺漠?dāng)前的顏色空間中，我們無法要直觀地去辨別那些顏色是亮色，哪些顏色是暗色，很難，我們只知道一個(gè)顏色的紅綠藍(lán)混合比例。我們需要找出一種規(guī)律，去分類顏色的明暗。

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

所以我們很多軟件上的調(diào)色工具都會(huì)基于這樣的思路去設(shè)計(jì)，首先會(huì)有一個(gè)色板、然后會(huì)有飽和度、亮度這樣的調(diào)整。

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

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

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

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

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

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

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

如今HSL 與 HSV 在軟件上已經(jīng)有了大量的運(yùn)用。比如

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

APPLE Mac OS X 系統(tǒng)顏色選擇器 --HSV

CSS3 -- HSL

Windows系統(tǒng)顏色選擇器 -- HSL

當(dāng)然隨著系統(tǒng)的升級(jí)與支持，也不乏有兩者都支持的軟件。

沒有孰優(yōu)孰劣，在做選擇的時(shí)候只考慮使用的場(chǎng)景哪種更適合，當(dāng)然在WEB的范疇中，由于CSS3的標(biāo)準(zhǔn)規(guī)定，HSL更有利于顏色的換算。而了解到這里，我已經(jīng)對(duì)開頭的需求有了一個(gè)明確的實(shí)現(xiàn)方案。

在數(shù)學(xué)上定義為 RGB 空間的r,g,b坐標(biāo)到 HSL 空間的 h,s,l 坐標(biāo)的換算。

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

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

首先會(huì)先計(jì)算色相值，對(duì)應(yīng)是在圓柱橫切面角度六等分的不同夾角下的值有不同的換算公式，從上往下1到5對(duì)應(yīng)的區(qū)域

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

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

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

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

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函數(shù)簡(jiǎn)單的變化即可適用
  l = max,
  s = delta === 0 ? 0 : delta / max;

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

  return { h, s, l }
}