查看“︁HSL和HSV色彩空间”︁的源代码

{{Distinguish|單純疱疹病毒}}
{{copyedit|time=2011-07-31T15:17:34+00:00}}
[[File:Hsl-hsv models.svg|thumb|400px|HSL（a~d）和HSV（e~h）。上半部分（a、e）：兩者的3D模型截面。下半部分：將模型中三個參數的其中之一固定為常量，其它兩個參數的圖像。]]

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

HSL即[[色相]]、[[色度_(色彩學)|飽和度]]、[[亮度]]（{{lang-en|Hue, Saturation, Lightness}}）。

HSV即[[色相]]、[[色度_(色彩學)|飽和度]]、[[明度]]（{{lang-en|Hue, Saturation, Value}}），又稱'''HSB'''，其中B即{{lang-en|Brightness}}。

*[[色相]]（Hue）是色彩的基本屬性，就是平常所說的[[顏色]]名稱，如[[紅色]]、[[黃色]]等。
*[[色度_(色彩學)|飽和度]]（Saturation）是指色彩的純度，越高色彩越純，低則逐漸變灰，取0-100%的數值。
*[[明度]]（Value）、亮度（Lightness）、亮度（Brightness），取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坐標和物理光性質如[[波長]]和[[振幅]]之間的直接比較。

== 用途 ==
[[File:Triangulo HSV.png|thumb|HSV色輪允許用戶快速的選擇眾多顏色。]]
[[File:HSV cone.png|thumb|HSV模型的圓錐表示適合於在一個單一物體中展示整個HSV色彩空間。]]

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

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

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

== HSL與HSV的比較 ==
[[File:HSL HSV cylinder color solid comparison.png|thumb|400px|HSL和HSV色彩空間比較。]]

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

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

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

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

[[File:Gimp color selector 03.gif|thumb|300px|[[GIMP]]支持在HSV色彩空間內的選取顏色的多種方法，包括帶有色相滑塊的色輪和色方。]]
* 使用HSV（HSB）的應用：
** Apple [[Mac OS X]]系統顏色選擇器（有一個H/S顏色碟和一個V滑塊）
** [[Xara Xtreme]]
** [[Paint.NET]]（有一個H/S顏色碟和一個V滑塊）
** Adobe圖形應用程序（[[Adobe Illustrator|Illustrator]]，[[Adobe Photoshop|Photoshop]]，等等）
** [[Turbo Photo]]

* 使用HSL的應用：
** [[CSS]]3規定
** [[Inkscape]]（從版本0.42開始）
** [[Macromedia Studio]]
** [[Microsoft Windows]]系統顏色選擇器（包括[[Microsoft Paint]]）
** [[Paint Shop Pro]]
** [[ImageMagick]]

* 使用HSV和HSL二者的應用：
** [[Pixel image editor]]（從Beta5開始）
** [[Pixia]]
** [[Bryce (軟件)|Bryce]]
** [[GIMP]]（HSV用於顏色選擇，HSL用於顏色調整）

== 色彩空間的轉換 ==
HSL和HSV在數學上定義為在RGB空間中的顏色的''R'', ''G''和''B''的坐標的變換。

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

設 <math>(r,\,g,\,b)</math> 分別是一個顏色的紅、綠和藍坐標，它們的值是在 <math>0</math> 到 <math>1</math> 之間的實數。設 <math>\mathit{max}</math> 等價於 <math>(r,\,g,\,b)</math> 中的[[極值|最大者]]。設 <math>\mathit{min}</math> 等於這些值中的最小者。要找到在HSL空間中的 <math>(r,\,g,\,b)</math> 值，這裡的 <math>h \in [0,\,360)</math> [[角度|度]]是角度的色相角，而 <math>s,\,l \in [0,\,1]</math> 是飽和度和亮度，計算為：

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

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

:<math>l = \begin{matrix} \frac{1}{2} \end{matrix} (max + min)</math>

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

HSL和HSV有同樣的[[色相]]定義，但是其他份量不同。HSV顏色的''s''和''v''的值定義如下：

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

:<math>v = max \,</math>

=== 從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的時候，可以使用下列過程：<ref>{{cite book | last = Foley
 | first = James D.
 | authorlink =
 | coauthors = Andries van Dam
 | year = 1982
 | title = Fundamentals of Interactive Computer Graphics
 | url = https://archive.org/details/fundamentalsofin0000fole
 | publisher = Addison-Wesley
 | location = Boston, MA, USA
 | id = ISBN 0-201-14468-9
}}</ref>

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

:<math>p = 2 \times l - q \, </math>

: <math>h_k = {h \over 360} \, </math>（''h''進行單位換算成[0,1][[轉 (角)|轉]]內）

: <math>t_R = h_k+\frac{1}{3} \, </math>

: <math>t_G = h_k \, </math>

: <math>t_B = h_k-\frac{1}{3} \, </math>

: <math>\mbox{if } t_C < 0 \rightarrow t_C = t_C + 1.0 \quad \mbox{for each}\,C \in \{R,G,B\}</math>

: <math>\mbox{if } t_C > 1 \rightarrow t_C = t_C - 1.0 \quad \mbox{for each}\,C \in \{R,G,B\}</math>

對於每個顏色[[位置向量|向量]]''Color'' = (''Color<sub>R</sub>'', ''Color<sub>G</sub>'', ''Color<sub>B</sub>'') = (''r'', ''g'', ''b''),

: <math>{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} \le t_C < \frac{1}{2}  \\
p+\left((q-p) \times 6 \times (\frac{2}{3} - t_C) \right), & \mbox{if } \frac{1}{2} \le t_C < \frac{2}{3} \\
p, & \mbox{otherwise }
\end{cases}
</math>

:<math>\mbox{for each}\,C \in \{R,G,B\}</math>

=== 從HSV到RGB的轉換 ===

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

:<math>h_i = \left\lfloor \frac{h}{60} \right\rfloor </math>

:<math>f = \frac{h}{60} - h_i </math>

:<math>p = v \times (1 - s) \, </math>

:<math>q = v \times (1 - f \times s) \, </math>

:<math>t = v \times (1 - (1 - f) \times s) \, </math>

對於每個顏色向量 (''r'', ''g'', ''b''),

:<math>(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}
</math>

=== 從HSL到HSV的轉換 ===
數值的範圍，HSL：<math>H_L \in [0^\circ,360^\circ]</math>、<math>S_L \in [0,1]</math>、<math>L \in [0,1]</math>，HSV：<math>H_V \in [0^\circ,360^\circ]</math>、<math>S_V \in [0,1]</math>、<math>V \in [0,1]</math>
: <math>H_V = H_L</math>
: <math>V = L+S_L\min(L,1-L)</math>
: <math>S_V = \begin{cases}
  0 & \text{if } V=0 \\
  2\left(1-\frac{L}{V}\right) & \text{otherwise} \\
\end{cases}</math>

=== 從HSV到HSL的轉換 ===
數值的範圍同上
: <math>H_L = H_V</math>
: <math>L = V\left(1 - \frac{S_V}{2}\right)</math>
: <math>S_L = \begin{cases}
  0 & \text{if } L=0 \text{ or } L=1 \\
  \frac{V-L}{\min(L,1-L)} & \text{otherwise} \\
\end{cases}</math>

== 例子 ==

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

{| class="wikitable" cellpadding=2
! RGB
! HSL
! HSV
! width="75" | 結果
|-
|(1, 0, 0)
|(0°, 1, 0.5)
|(0°, 1, 1)
| style="background:#ff0000;" |  
|-
|(0.5, 1, 0.5)
|(120°, 1, 0.75)
|(120°, 0.5, 1)
| style="background:#80ff80;" |  
|-
|(0, 0, 0.5)
|(240°, 1, 0.25)
|(240°, 1, 0.5)
| style="background:#000080;" |  
|}

展示的RGB值的範圍是0到255。
{{16color}}

==參考資料==
{{reflist}}

==延伸閱讀==
* Raphael Gonzalez, Richard E. Woods (2002) ''Digital Image Processing,'' 2nd ed. Prentice Hall Press, ISBN 0-201-18075-8, p. 295.
* Charles Poynton.  [http://www.poynton.com/notes/colour_and_gamma/ColorFAQ.html#RTFToC36 「What are HSB and HLS?」]{{Wayback|url=http://www.poynton.com/notes/colour_and_gamma/ColorFAQ.html#RTFToC36 |date=20170713103939 }} ''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 [http://www.w3.org/TR/css3-color/#hsl-color W3C's CSS3 Color Module]{{Wayback|url=http://www.w3.org/TR/css3-color/#hsl-color |date=20171129235005 |dateformat=iso }}。
*Formulas for converting to and from RGB can be found on [https://web.archive.org/web/20071029230340/http://www.easyrgb.com/math.php?MATH=M19#text19 EasyRGB.com]。
* [https://web.archive.org/web/20071127005824/http://ilab.usc.edu/wiki/index.php/HSV_And_H2SV_Color_Space C++ code for RGB and HSV conversion]
* [http://www.cs.rit.edu/~ncs/color/a_spaces.html Demonstrative color conversion applet]{{Wayback|url=http://www.cs.rit.edu/~ncs/color/a_spaces.html |date=20070630200155 }}
* [https://archive.today/20070317234844/http://www.lisif.jussieu.fr/~belaroussi/face_track/theHSplane.htm Skin and non skin colors in the Hue-Saturation plane of HSV color space]
* [http://demonstrations.wolfram.com/HSVColors/ HSV Colors]{{Wayback|url=http://demonstrations.wolfram.com/HSVColors/ |date=20120121103842 }} by Hector Zenil, [[The Wolfram Demonstrations Project]]。
* [http://www.mandelbrot-dazibao.com/HSV/HSV.htm HSV Tutorial]{{dead link|date=2017年11月 |bot=InternetArchiveBot |fix-attempted=yes }} in Basic, at The Mandelbrot Dazibao.

{{色彩空間}}

[[Category:色彩空間]]

[[simple:Color wheel#The 12 major colors of the color wheel]]