色彩属性模式

**HSL** 和 **HSV** 都是一種將 RGB 色彩模型中的點在圓柱坐標系中的表示法。這兩種表示法試圖做到比基於笛卡爾坐標系的幾何結構 RGB 更加直觀。

HSL 即色相、飽和度、亮度（英語：Hue, Saturation, Lightness）。HSV 即色相、飽和度、明度（英語：Hue, Saturation, Value），又稱 **HSB**，其中 B 即英語：Brightness。

* 色相（H）是色彩的基本屬性，就是平常所說的顏色名稱，如紅色、黃色等。
* 飽和度（S）是指色彩的純度，越高色彩越純，低則逐漸變灰，取 0-100% 的數值。
* 明度（V），亮度（L），取 0-100%。

HSL 和 HSV 二者都把顏色描述在圓柱坐標系內的點，這個圓柱的中心軸取值為自底部的黑色到頂部的白色而在它們中間的是灰色，繞這個軸的角度對應於「色相」，到這個軸的距離對應於「飽和度」，而沿著這個軸的高度對應於「亮度」、「色調」或「明度」。

這兩種表示在目的上類似，但在方法上有區別。二者在數學上都是圓柱，但 HSV（色相、飽和度、明度）在概念上可以被認為是顏色的倒圓錐體（黑點在下頂點，白色在上底面圓心），HSL 在概念上表示了一個雙圓錐體和圓球體（白色在上頂點，黑色在下頂點，最大橫切面的圓心是半程灰色）。注意儘管在 HSL 和 HSV 中「色相」指稱相同的性質，它們的「飽和度」的定義是明顯不同的。

因為 HSL 和 HSV 是設備依賴的 RGB 的簡單變換，(_h_, _s_, _l_) 或 (_h_, _s_, _v_) 三元組定義的顏色依賴於所使用的特定紅色、綠色和藍色「加法原色」。每個獨特的 RGB 設備都伴隨著一個獨特的 HSL 和 HSV 空間。但是 (_h_, _s_, _l_) 或 (_h_, _s_, _v_) 三元組在被約束於特定 RGB 空間比如 sRGB 的時候就更明確了。

HSV 模型在 1978 年由埃爾維・雷・史密斯創立，它是三原色光模式的一種非線性變換，如果說 RGB 加色法是三維直角座標系，那麼 HSV 模型就是球面座標系。

## 動機

大多數電視機、顯示器、投影儀通過將不同強度的紅、綠、藍色光混合來生成不同的顏色，這就是 RGB 三原色的加色法。通過這種方法可以在 RGB 色彩空間生成大量不同的顏色，然而，這三種顏色分量的取值與所生成的顏色之間的聯繫並不直觀。

藝術家有時偏好使用 HSL 或 HSV 而不選擇三原色光模式（即 RGB 模型）或 印刷四分色模式（即 CMYK 模型），因為它類似於人類感覺顏色的方式，具有較強的感知度。RGB 和 CMYK 分別是加法原色和減法原色模型，以原色組合的方式定義顏色，而 HSV 以人類更熟悉的方式封裝了關於顏色的信息：「這是什麼顏色？深淺如何？明暗如何？」。

但是色彩屬性和物理學中的光譜並不是完全對應的，物理學的人類可見光譜是有兩個端點的直線形，並不能形成一個環。當然每種顏色都可以找到相應的光波長，但都有一個範圍，並不是單一的波長。明度一般和具體某種顏色的光波能量相當，但和整個光譜的能量無關（因為每種波長的光的能量都不相同）。HSV 顏色空間在技術上不支持到輻射測定中測量的物理能量譜密度的一一映射。所以一般不建議做在 HSV 坐標和物理光性質如波長和振幅之間的直接比較。HSL 不清楚。

## 用途

HSV 模型通常用於計算機圖形應用中。在用戶必須選擇一個顏色應用於特定圖形元素各種應用環境中，經常使用 HSV 色輪。在其中，色相表示為圓環；可以使用一個獨立的三角形來表示飽和度和明度。典型的，這個三角形的垂直軸指示飽和度，而水平軸表示明度。在這種方式下，選擇顏色可以首先在圓環中選擇色相，在從三角形中選擇想要的飽和度和明度。

HSV 模型的另一種可視方法是圓錐體。在這種表示中，色相被表示為繞圓錐中心軸的角度，飽和度被表示為從圓錐的橫截面的圓心到這個點的距離，明度被表示為從圓錐的橫截面的圓心到頂點的距離。某些表示使用了六稜錐體。這種方法更適合在一個單一物體中展示這個 HSV 色彩空間；但是由於它的三維本質，它不適合在二維計算機界面中選擇顏色。

HSV 色彩空間還可以表示為類似於上述圓錐體的圓柱體，色相沿著圓柱體的外圓周變化，飽和度沿著從橫截面的圓心的距離變化，明度沿著橫截面到底面和頂面的距離而變化。這種表示可能被認為是 HSV 色彩空間的更精確的數學模型；但是在實際中可區分出的飽和度和色相的級別數目隨著明度接近黑色而減少。此外計算機典型的用有限精度範圍來存儲 RGB 值；這約束了精度，再加上人類顏色感知的限制，使圓錐體表示在多數情況下更實用。

## HSL 與 HSV 的比較

HSL 類似於 HSV。對於一些人，HSL 更好的反映了「飽和度」和「亮度」作為兩個獨立參數的直覺觀念，但是對於另一些人，它的飽和度定義是錯誤的，因為非常柔和的幾乎白色的顏色在 HSL 可以被定義為是完全飽和的。對於 HSV 還是 HSL 更適合於人類用戶界面是有爭議的。

W3C 的 CSS3 規定聲稱「HSL 的優點是它對稱於亮與暗（HSV 就不是這樣）…」，這意味著：

* 在 HSL 中，飽和度分量總是從完全飽和色變化到等價的灰色（在 HSV 中，在極大值 V 的時候，飽和度從全飽和色變化到白色，這可以被認為是反直覺的）。
* 在 HSL 中，亮度跨越從黑色經過選擇的色相到白色的完整範圍（在 HSV 中，V 分量只走一半行程，從黑到選擇的色相）。

在軟體中，通常以一個線性或圓形色相選擇器和在其中為選定的色相選取飽和度和明度／亮度的一個二維區域（通常為方形或三角形）形式提供給用戶基於色相的顏色模型（HSV 或 HSL）。通過這種表示，在 HSV 和 HSL 之間的區別就無關緊要了。但是很多程序還允許你通過線性滑塊或數值錄入框來選擇顏色的明度／亮度，而對於這些控制項通常使用要麼 HSL 要麼 HSV（而非二者）。HSV 傳統上更常用。下面是一些例子：

* 使用 HSV（HSB）的應用：
  * Apple Mac OS X 系統顏色選擇器（有一個 H/S 顏色碟和一個 V 滑塊）
  * Xara Xtreme
  * Paint.NET（有一個 H/S 顏色碟和一個 V 滑塊）
  * Adobe 圖形應用程式（Illustrator，Photoshop，等等）
  * Turbo Photo
* 使用 HSL 的應用：
  * CSS3 規定
  * Inkscape（從版本 0.42 開始）
  * Macromedia Studio
  * Microsoft Windows 系統顏色選擇器（包括 Microsoft Paint）
  * Paint Shop Pro
  * ImageMagick
* 使用 HSV 和 HSL 二者的應用：
  * Pixel image editor（從 Beta5 開始）
  * Pixia
  * Bryce
  * GIMP（HSV 用於顏色選擇，HSL 用於顏色調整）

## 色彩空間的轉換

HSL 和 HSV 在數學上定義為在 RGB 空間中的顏色的 _R_, _G_ 和 _B_ 的坐標的變換。

### 從 RGB 到 HSL 或 HSV 的轉換

設 (_r_, _g_, _b_) 分別是一個顏色的紅、綠和藍坐標，它們的值是在 0 到 1 之間的實數。設 _max_ 等價於 _r_, _g_ 和 _b_ 中的最大者。設 _min_ 等於這些值中的最小者。要找到在 HSL 空間中的 (_h_, _s_, _l_) 值，這裡的 _h_ ∈ [0, 360) 度是角度的色相角，而 _s_, _l_ ∈ [0,1] 是飽和度和亮度，計算為：

　
: $h={\begin{cases}0^{\circ }&{\mbox{if }}max=min\\60^{\circ }\times {\frac {g-b}{max-min}}+0^{\circ },&{\mbox{if }}max=r{\mbox{ and }}g\geq b\\60^{\circ }\times {\frac {g-b}{max-min}}+360^{\circ },&{\mbox{if }}max=r{\mbox{ and }}g<b\\60^{\circ }\times {\frac {b-r}{max-min}}+120^{\circ },&{\mbox{if }}max=g\\60^{\circ }\times {\frac {r-g}{max-min}}+240^{\circ },&{\mbox{if }}max=b\end{cases}}$

　
: $s={\begin{cases}0&{\mbox{if }}l=0{\mbox{ or }}max=min\\{\frac {max-min}{max+min}}={\frac {max-min}{2l}},&{\mbox{if }}0<l\leq {\frac {1}{2}}\\{\frac {max-min}{2-(max+min)}}={\frac {max-min}{2-2l}},&{\mbox{if }}l>{\frac {1}{2}}\end{cases}}$

　
: $l={\begin{matrix}{\frac {1}{2}}\end{matrix}}(max+min)$

_h_ 的值通常規範化到位於 0 到 360° 之間。而 _h_ = 0 用於 _max_ = _min_ 的（定義為灰色）時候而不是留下 _h_ 未定義。

HSL 和 HSV 有同樣的色相定義，但是其他分量不同。HSV 顏色的 _s_ 和 _v_ 的值定義如下：

　
: $s={\begin{cases}0,&{\mbox{if }}max=0\\{\frac {max-min}{max}}=1-{\frac {min}{max}},&{\mbox{otherwise}}\end{cases}}$

　
: $v=max\,$

### 從 HSL 到 RGB 的轉換

給定 HSL 空間中的 (_h_, _s_, _l_) 值定義的一個顏色，帶有 _h_ 在指示色相角度的值域 [0, 360] 中，分別表示飽和度和亮度的 _s_ 和 _l_ 在值域 [0, 1] 中，相應在 RGB 空間中的 (_r_, _g_, _b_) 三原色，帶有分別對應於紅色、綠色和藍色的 _r_, _g_ 和 _b_ 也在值域 [0, 1] 中，它們可計算為：

首先，如果 _s_ = 0，則結果的顏色是非彩色的、或灰色的。在這個特殊情況，_r_, _g_ 和 _b_ 都等於 _l_。注意 _h_ 的值在這種情況下是未定義的。

當 _s_ ≠ 0 的時候，可以使用下列過程：

　
: $q={\begin{cases}l\times (1+s),&{\mbox{if }}l<{\frac {1}{2}}\\l+s-(l\times s),&{\mbox{if }}l\geq {\frac {1}{2}}\end{cases}}$

　
: $p=2\times l-q\,$

　
: $h_{k}={h \over 360}\,$ （_h_ 進行單位換算成 [0,1] 轉內）

　
: $t_{R}=h_{k}+{\frac {1}{3}}\,$

　
: $t_{G}=h_{k}\,$

　
: $t_{B}=h_{k}-{\frac {1}{3}}\,$

　
: ${\mbox{if }}t_{C}<0\rightarrow t_{C}=t_{C}+1.0\quad {\mbox{for each}}\,C\in \{R,G,B\}$

　
: ${\mbox{if }}t_{C}>1\rightarrow t_{C}=t_{C}-1.0\quad {\mbox{for each}}\,C\in \{R,G,B\}$

對於每個顏色向量 _Color_ = (_ColorR_, _ColorG_, _ColorB_) = (_r_, _g_, _b_),

　
: ${Color}_{C}={\begin{cases}p+\left((q-p)\times 6\times t_{C}\right),&{\mbox{if }}t_{C}<{\frac {1}{6}}\\q,&{\mbox{if }}{\frac {1}{6}}\leq t_{C}<{\frac {1}{2}}\\p+\left((q-p)\times 6\times ({\frac {2}{3}}-t_{C})\right),&{\mbox{if }}{\frac {1}{2}}\leq t_{C}<{\frac {2}{3}}\\p,&{\mbox{otherwise }}\end{cases}}$

　
: ${\mbox{for each}}\,C\in \{R,G,B\}$

### 從 HSV 到 RGB 的轉換

類似的，給定在 HSV 中 (_h_, _s_, _v_) 值定義的一個顏色，帶有如上的變化於 0 到 360 之間的 _h_，和分別表示飽和度和明度的變化於 0 到 1 之間的 _s_ 和 _v_，在 RGB 空間中對應的 (_r_, _g_, _b_) 三原色可以計算為（R,G,B 變化於 0 到 1 之間）：

　
: $h_{i}=\left\lfloor {\frac {h}{60}}\right\rfloor $

　
: $f={\frac {h}{60}}-h_{i}$

　
: $p=v\times (1-s)\,$

　
: $q=v\times (1-f\times s)\,$

　
: $t=v\times (1-(1-f)\times s)\,$

對於每個顏色向量 (_r_, _g_, _b_),

　
: $(r,g,b)={\begin{cases}(v,t,p),&{\mbox{if }}h_{i}=0\\(q,v,p),&{\mbox{if }}h_{i}=1\\(p,v,t),&{\mbox{if }}h_{i}=2\\(p,q,v),&{\mbox{if }}h_{i}=3\\(t,p,v),&{\mbox{if }}h_{i}=4\\(v,p,q),&{\mbox{if }}h_{i}=5\\\end{cases}}$

### 從 HSL 到 HSV 的轉換

數值的範圍，HSL： $H_{L}\in [0^{\circ },360^{\circ }]$ 、 $S_{L}\in [0,1]$ 、 $L\in [0,1]$ ，HSV： $H_{V}\in [0^{\circ },360^{\circ }]$ 、 $S_{V}\in [0,1]$ 、 $V\in [0,1]$

　
: $H_{V}=H_{L}$

　
: $V=L+S_{L}\min(L,1-L)$

　
: $S_{V}={\begin{cases}0&{\text{if }}V=0\\2\left(1-{\frac {L}{V}}\right)&{\text{otherwise}}\\\end{cases}}$

### 從 HSV 到 HSL 的轉換

數值的範圍同上

　
: $H_{L}=H_{V}$

　
: $L=V\left(1-{\frac {S_{V}}{2}}\right)$

　
: $S_{L}={\begin{cases}0&{\text{if }}L=0{\text{ or }}L=1\\{\frac {V-L}{\min(L,1-L)}}&{\text{otherwise}}\\\end{cases}}$

## 例子

展示的 RGB 值的範圍是 0.0 到 1.0。

展示的 RGB 值的範圍是 0 到 255。

## 參考資料

## 延伸閱讀

* Raphael Gonzalez, Richard E. Woods (2002) _Digital Image Processing,_ 2nd ed. Prentice Hall Press, ISBN 0-201-18075-8, p. 295.
* Charles Poynton. 「What are HSB and HLS?」（頁面存檔備份，存於網際網路檔案館） _Color FAQ_. 28 November 2006。
* Donald Hearn, M. Pauline Baker (1986) _Computer Graphics._ Prentice Hall International, ISBN 0-13-165598-1, pp. 302-205.

## 外部連結

* An explanation of HSL and how it differs from RGB can be found in the W3C's CSS3 Color Module（頁面存檔備份，存於網際網路檔案館）。
* Formulas for converting to and from RGB can be found on EasyRGB.com。
* C++ code for RGB and HSV conversion
* Demonstrative color conversion applet（頁面存檔備份，存於網際網路檔案館）
* Skin and non skin colors in the Hue-Saturation plane of HSV color space
* HSV Colors（頁面存檔備份，存於網際網路檔案館） by Hector Zenil, The Wolfram Demonstrations Project。
* HSV Tutorial in Basic, at The Mandelbrot Dazibao.