颜色空间RGB与HSV(HSL)的转换

女爷i 2022-05-27 13:43 345阅读 0赞

一般的3D编程只需要使用RGB颜色空间就好了，但其实美术人员更多的是使用HSV(HSL)，因为可以方便的调整饱和度和亮度。

有时候美术需要程序帮助调整饱和度来达到特定风格的渲染效果，这时候就需要转换颜色空间了。

出处：[http://zh.wikipedia.org/wiki/HSL%E5%92%8CHSV%E8%89%B2%E5%BD%A9%E7%A9%BA%E9%97%B4][http_zh.wikipedia.org_wiki_HSL_E5_92_8CHSV_E8_89_B2_E5_BD_A9_E7_A9_BA_E9_97_B4]

**HSL** 和 **HSV**（也叫做 **HSB**）是对[RGB 色彩空间][RGB]中点的两种有关系的表示，它们尝试描述比 RGB 更准确的感知颜色联系，并仍保持在计算上简单。HSL 表示 **h**ue（[色相][Link 1]）、**s**aturation（[饱和度][Link 2]）、**l**ightness（[亮度][Link 3]），[HSV][] 表示 **h**ue、**s**aturation、**v**alue([色调][Link 4]) 而 HSB 表示 **h**ue、**s**aturation、**b**rightness（[明度][Link 5]）。

HSL 和 HSV 二者都把颜色描述在[圆柱体][Link 6]内的点，这个圆柱的中心轴取值为自底部的[黑色][Link 7]到顶部的[白色][Link 8]而在它们中间是的[灰色][Link 9]，绕这个轴的角度对应于“色相”，到这个轴的距离对应于“饱和度”，而沿着这个轴的距离对应于“亮度”，“色调”或“明度”。

这两种表示在用目的上类似，但在方法上有区别。二者在数学上都是圆柱，但 HSV（色相，饱和度，明度）在概念上可以被认为是颜色的倒[圆锥体][Link 10]（黑点在下顶点，白色在上底面圆心），HSL 在概念上表示了一个双圆锥体和圆球体（白色在上顶点，黑色在下顶点，最大横切面的圆心是半程灰色）。注意尽管在 HSL 和 HSV 中“色相”指称相同的性质，它们的“饱和度”的定义是明显不同的。

因为 HSL 和 HSV 是设备依赖的 RGB 的简单变换，(*h*, *s*, *l*) 或 (*h*, *s*, *v*) 三元组定义的颜色依赖于所使用的特定[红色][Link 11]、[绿色][Link 12]和[蓝色][Link 13]“[加法原色][Link 14]”。每个独特的 RGB 设备都伴随着一个独特的 HSL 和 HSV 空间。但是 (*h*, *s*, *l*) 或 (*h*, *s*, *v*) 三元组在被约束于特定 RGB 空间比如 [ sRGB][sRGB] 的时候就变成明确的了。

HSV 模型在 1978 年由[埃尔维·雷·史密斯][Link 15]创立。

## 动机 ##

艺术家有时偏好使用 HSV 颜色模型而不选择 [ RGB][RGB 1] 或 [ CMYK][CMYK] 模型，因为它类似于人类感觉颜色的方式。RGB 和 CMYK 分别是[加法原色][Link 14]和[减法原色][Link 14]模型，以原色组合的方式定义颜色，而 HSV 以人类更熟悉的方式封装了关于颜色的信息：“这是什么颜色？深浅如何？明暗如何？”。HSL 颜色空间类似于 HSV，在某些方面甚至比它还好。

## \[[编辑][Link 16]\]用途 ##

[![220px-Triangulo_HSV.png][]][220px-Triangulo_HSV.png 1]

[![magnify-clip.png][]][220px-Triangulo_HSV.png 1]

HSV 色轮允许用户快速的选择众多颜色。

[![220px-HSV_cone.png][]][220px-HSV_cone.png 1]

[![magnify-clip.png][]][220px-HSV_cone.png 1]

HSV 模型的圆锥表示适合于在一个单一物体中展示整个 HSV 色彩空间。

HSV 模型通常用于[计算机图形应用][Link 17]中。在用户必须选择一个颜色应用于特定图形元素各种应用环境中，经常使用 HSV [ 色轮][Link 18]。在其中，色相表示为圆环；可以使用一个独立的三角形来表示饱和度和明度。典型的，这个三角形的垂直轴指示饱和度，而水平轴表示明度。在这种方式下，选择颜色可以首先在圆环中选择色相，在从三角形中选择想要的饱和度和明度。

HSV 模型的另一种可视方法是圆锥体。在这种表示中，色相被表示为绕圆锥中心轴的角度，饱和度被表示为从圆锥的横截面的圆心到这个点的距离，明度被表示为从圆锥的横截面的圆心到顶点的距离。某些表示使用了六棱锥体。这种方法更适合在一个单一物体中展示这个 HSV 色彩空间；但是由于它的三维本质，它不适合在二维计算机界面中选择颜色。

HSV 色彩空间还可以表示为类似于上述圆锥体的圆柱体，色相沿着圆柱体的外圆周变化，饱和度沿着从横截面的圆心的距离变化，明度沿着横截面到底面和顶面的距离而变化。这种表示可能被认为是 HSV 色彩空间的更精确的数学模型；但是在实际中可区分出的饱和度和色相的级别数目随着明度接近黑色而减少。此外计算机典型的用有限精度范围来存储 RGB 值；这约束了精度，再加上人类颜色感知的限制，使圆锥体表示在多数情况下更实用。

## \[[编辑][Link 19]\]HSL 与 HSV 的比较 ##

[![400px-HSL_HSV_cylinder_color_solid_comparison.png][]][400px-HSL_HSV_cylinder_color_solid_comparison.png 1]

[![magnify-clip.png][]][400px-HSL_HSV_cylinder_color_solid_comparison.png 1]

HSL 和 HSV 色彩空间比较。

HSL 类似于 HSV。对于一些人，HSL 更好的反映了“饱和度”和“亮度”作为两个独立参数的直觉观念，但是对于另一些人，它的饱和度定义是错误的，因为非常柔和的几乎白色的颜色在 HSL 可以被定义为是完全饱和的。对于 HSV 还是 HSL 更适合于人类用户界面是有争议的。

[W3C][] 的 [ CSS][CSS]3 规定声称“HSL 的优点是它对称于亮与暗（HSV 就不是这样）…”，这意味着：

*  在 HSL 中，饱和度分量总是从完全饱和色变化到等价的灰色（在 HSV 中，在极大值 V 的时候，饱和度从全饱和色变化到白色，这可以被认为是反直觉的）。
 *  在 HSL 中，亮度跨越从黑色过选择的色相到白色的完整范围（在 HSV 中，V 分量只走一半行程，从黑到选择的色相）。

在软件中，通常以一个线性或圆形色相选择器和在其中为选定的色相选取饱和度和明度／亮度的一个二维区域（通常为方形或三角形）形式提供给用户基于色相的颜色模型（HSV 或 HSL）。通过这种表示，在 HSV 和 HSL 之间的区别就无关紧要了。但是很多程序还允许你通过线性滑块或数值录入框来选择颜色的明度／亮度，而对于这些控件通常使用要么 HSL 要么 HSV（而非二者）。HSV 传统上更常用。下面是一些例子：

[![300px-Gimp_color_selector_03.gif][]][300px-Gimp_color_selector_03.gif 1]

[![magnify-clip.png][]][300px-Gimp_color_selector_03.gif 1]

[GIMP][] 支持在 HSV 色彩空间内的选取颜色的多种方法，包括带有色相滑块的色轮和色方。

*  使用 HSV (HSB)的应用：
    
     *  Apple [ Mac OS X][Mac OS X] 系统颜色选择器（有一个 H/S 颜色碟和一个 V 滑块）
     *  [Xara Xtreme][]
     *  [Paint.NET][]（有一个 H/S 颜色碟和一个 V 滑块）
     *  Adobe 图形应用程序（[Illustrator][]，[Photoshop][]，等等）
     *  [Turbo Photo][]

*  使用 HSL 的应用：
    
     *  [CSS][]3 规定
     *  [Inkscape][]（从版本 0.42 开始）
     *  [Macromedia Studio][]
     *  [Microsoft Windows][] 系统颜色选择器（包括 [ Microsoft Paint][Microsoft Paint]）
     *  [Paint Shop Pro][]
     *  [ImageMagick][]

*  使用 HSV 和 HSL 二者的应用：
    
     *  [Pixel image editor][]（从 Beta5 开始）
     *  [Pixia][]
     *  [Bryce][]
     *  [GIMP][]（HSV 用于颜色选择，HSL 用于颜色调整）

## \[[编辑][Link 20]\]与其他颜色模型的比较 ##

HSV 颜色空间在技术上不支持到[辐射测定][Link 21]中测量的物理[能量谱密度][Link 22]的一一映射。所以一般不建议做在 HSV 坐标和物理光性质如[波长][Link 23]和[振幅][Link 24]之间的直接比较。

## \[[编辑][Link 25]\]形式定义 ##

HSL 和 HSV 在数学上定义为在 RGB 空间中的颜色的 *R*, *G* 和 *B* 的坐标的变换。

### \[[编辑][Link 26]\]从 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 \\ge 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\}][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 _ge 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]

![l = \\begin\{matrix\} \\frac\{1\}\{2\} \\end\{matrix\} (max + min)][l _ _begin_matrix_ _frac_1_2_ _end_matrix_ _max _ min]

![s = \\begin\{cases\}0 & \\mbox\{if \} l = 0 \\mbox\{ or \} max = min \\\\\\frac\{max-min\}\{max+min\} = \\frac\{max-min\}\{2l\}, & \\mbox\{if \} 0  \\frac\{1\}\{2\}\\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 _frac_1_2_end_cases]

*h* 的值通常规范化到位于 0 到 360°之间。而 *h* = 0 用于 *max* = *min* 的（就是灰色）时候而不是留下 *h* 未定义。

HSL 和 HSV 有同样的[色相][Link 1]定义，但是其他分量不同。HSV 颜色的 *s* 和 *v* 的值定义如下：

![s = \\begin\{cases\}0, & \\mbox\{if \} max = 0 \\\\\\frac\{max - min\}\{max\} = 1 - \\frac\{min\}\{max\}, & \\mbox\{otherwise\}\\end\{cases\}][s _ _begin_cases_0_ _ _mbox_if _ max _ 0 _frac_max - min_max_ _ 1 - _frac_min_max_ _ _mbox_otherwise_end_cases]

![v = max \\,][v _ max]

### \[[编辑][Link 27]\]从 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 的时候，可以使用下列过程：[\[1\]][1]

![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\}][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]

![p = 2 \\times l - q \\,][p _ 2 _times l - q]

![h\_k = \{h \\over 360\} \\,][h_k _ _h _over 360_]（ *h* 规范化到值域 \[0,1）内）

![t\_R = h\_k+\\frac\{1\}\{3\} \\,][t_R _ h_k_frac_1_3_]

![t\_G = h\_k \\,][t_G _ h_k]

![t\_B = h\_k-\\frac\{1\}\{3\} \\,][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 _ 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\\\}][mbox_if _ t_C _ 1 _rightarrow t_C _ t_C - 1.0 _quad _mbox_for each_C _in _R_G_B]

对于每个颜色[向量][Link 28] *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\} \\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\}][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]

![\\mbox\{for each\}\\,C \\in \\\{R,G,B\\\}][mbox_for each_C _in _R_G_B]

### \[[编辑][Link 29]\]从 HSV 到 RGB 的转换 ###

类似的，给定在 HSV 中 (*h*, *s*, *v*) 值定义的一个颜色，带有如上的 *h*，和分别表示饱和度和明度的 *s* 和 *v* 变化于 0 到 1 之间，在 RGB 空间中对应的 (*r*, *g*, *b*) 三原色可以计算为：

![h\_i \\equiv \\left\\lfloor \\frac\{h\}\{60\} \\right\\rfloor \\pmod\{6\}][h_i _equiv _left_lfloor _frac_h_60_ _right_rfloor _pmod_6]

![f = \\frac\{h\}\{60\} - h\_i][f _ _frac_h_60_ - h_i]

![p = v \\times (1 - s) \\,][p _ v _times _1 - s_]

![q = v \\times (1 - f \\times s) \\,][q _ v _times _1 - f _times s_]

![t = v \\times (1 - (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\}][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]

## \[[编辑][Link 30]\]例子 ##

展示的 RGB 值的范围是 0.0 到 1.0。

**HSV颜色空间**  
HSV(hue,saturation,value)颜色空间的模型对应于圆柱坐标系中的一个圆锥形子集，圆锥的顶面对应于V=1。它包含RGB模型中的R=1，G=1，B=1三个面，所代表的颜色较亮。色彩H由绕V轴的旋转角给定。红色对应于角度0°，绿色对应于角度120°，蓝色对应于角度240°。在HSV颜色模型中，每一种颜色和它的补色相差180°。饱和度S取值从0到1，所以圆锥顶面的半径为１。HSV颜色模型所代表的颜色域是CIE色度图的一个子集，这个模型中饱和度为百分之百的颜色，其纯度一般小于百分之百。在圆锥的顶点(即原点)处，V=0,H和S无定义，代表黑色。圆锥的顶面中心处S=0，V=1,H无定义，代表白色。从该点到原点代表亮度渐暗的灰色，即具有不同灰度的灰色。对于这些点，S=0,H的值无定义。可以说，HSV模型中的V轴对应于RGB颜色空间中的主对角线。在圆锥顶面的圆周上的颜色，V=1，S=1,这种颜色是纯色。HSV模型对应于画家配色的方法。画家用改变色浓和色深的方法从某种纯色获得不同色调的颜色，在一种纯色中加入白色以改变色浓，加入黑色以改变色深，同时加入不同比例的白色，黑色即可获得各种不同的色调。

HSV颜色空间可以用一个圆锥空间模型来描述。

[![RGB和HSV颜色空间][RGB_HSV]][RGB_HSV_RGB_HSV]

从 RGB 到HSV 的转换

设 (*r*,  *g*, *b*) 分别是一个颜色的红、绿和蓝坐标，它们的值是在 0 到 1 之间的实数。设 *max* 等价于 *r*, *g* 和 *b* 中的最大者。设 *min* 等于这些值中的最小者。要找到在 HSV 空间中的 (*h*, *s*, *v*) 值，这里的 *h* ∈ \[0, 360）是角度的色相角，而 *s*, *v* ∈ \[0,1\] 是饱和度和亮度，计算为：

max=max(R,G,B) 
min=min(R,G,B) 
if R = max, H = (G-B)/(max-min) 
if G = max, H = 2 + (B-R)/(max-min) 
if B = max, H = 4 + (R-G)/(max-min) 
 
H = H \* 60 
if H < 0, H = H + 360 
 
V=max(R,G,B) 
S=(max-min)/max

*h* 的值通常规范化到位于 0 到 360°之间。而 *h* = 0 用于 *max* = *min* 的（就是灰色）时候而不是留下 *h* 未定义。

以下为相应的VC代码：

void Rgb2Hsv(float R, float G, float B, float& H, float& S, float&V)  
\{  
// r,g,b values are from 0 to 1  
// h = \[0,360\], s = \[0,1\], v = \[0,1\]  
// if s == 0, then h = -1 (undefined)

float min, max, delta,tmp;  
tmp = min(R, G);  
min = min( tmp, B );  
tmp = max( R, G);  
max = max(tmp, B );  
V = max; // v

delta = max - min;

if( max != 0 )  
S = delta / max; // s  
else  
\{  
// r = g = b = 0 // s = 0, v is undefined  
S = 0;  
H = UNDEFINEDCOLOR;  
return;  
\}  
if( R == max )  
H = ( G - B ) / delta; // between yellow & magenta  
else if( G == max )  
H = 2 + ( B - R ) / delta; // between cyan & yellow  
else  
H = 4 + ( R - G ) / delta; // between magenta & cyan

H \*= 60; // degrees 
if( H < 0 ) 
H += 360; 
\}

**YUV颜色空间**

YUV（亦称YCrCb）是被欧洲电视系统所采用的一种颜色编码方法（属于PAL）。在现代彩色电视系统中，通常采用三管彩色摄影机或彩色CCD摄影机进行取像，然后把取得的彩色图像信号经分色、分别放大校正后得到RGB，再经过矩阵变换电路得到亮度信号Y和两个色差信号R－Y（即U）、B－Y（即V），最后发送端将亮度和色差三个信号分别进行编码，用同一信道发送出去。这种色彩的表示方法就是所谓的YUV色彩空间表示。采用YUV色彩空间的重要性是它的亮度信号Y和色度信号U、V是分离的。如果只有 Y信号分量而没有U、V信号分量，那么这样表示的图像就是黑白灰度图像。彩色电视采用YUV空间正是为了用亮度信号Y解决彩色电视机与黑白电视机的相容问题，使黑白电视机也能接收彩色电视信号。

优点作用

YUV主要用于优化彩色视频信号的传输，使其向后相容老式黑白电视。与RGB视频信号传输相比，它最大的优点在于只需占用极少的频宽（RGB要求三个独立的视频信号同时传输）。其中“Y”表示明亮度（Luminance或Luma），也就是灰阶值；而“U”和“V” 表示的则是色度（Chrominance或Chroma），作用是描述影像色彩及饱和度，用于指定像素的颜色。“亮度”是透过RGB输入信号来建立的，方法是将RGB信号的特定部分叠加到一起。“色度”则定义了颜色的两个方面─色调与饱和度，分别用Cr和CB来表示。其中，Cr反映了GB输入信号红色部分与RGB信号亮度值之间的差异。而CB反映的是RGB输入信号蓝色部分与RGB信号亮度值之同的差异。

采用YUV色彩空间的重要性是它的亮度信号Y和色度信号U、V是分离的。如果只有Y信号分量而没有U、V分量，那么这样表示的图像就是黑白灰度图像。彩色电视采用YUV空间正是为了用亮度信号Y解决彩色电视机与黑白电视机的兼容问题，使黑白电视机也能接收彩色电视信号。

YUV与RGB相互转换的公式如下（RGB取值范围均为0-255）︰  
　　Y = 0.299R + 0.587G + 0.114B  
　　U = -0.147R - 0.289G + 0.436B  
　　V = 0.615R - 0.515G - 0.100B  
　　R = Y + 1.14V  
　　G = Y - 0.39U - 0.58V  
　　B = Y + 2.03U

[http_zh.wikipedia.org_wiki_HSL_E5_92_8CHSV_E8_89_B2_E5_BD_A9_E7_A9_BA_E9_97_B4]: http://zh.wikipedia.org/wiki/HSL%E5%92%8CHSV%E8%89%B2%E5%BD%A9%E7%A9%BA%E9%97%B4
[RGB]: http://zh.wikipedia.org/wiki/RGB_%E8%89%B2%E5%BD%A9%E7%A9%BA%E9%97%B4
[Link 1]: http://zh.wikipedia.org/wiki/%E8%89%B2%E7%9B%B8
[Link 2]: http://zh.wikipedia.org/wiki/%E8%89%B2%E5%BA%A6_%28%E8%89%B2%E5%BD%A9%E5%AD%A6%29
[Link 3]: http://zh.wikipedia.org/wiki/%E4%BA%AE%E5%BA%A6
[HSV]: http://zh.wikipedia.org/wiki/HSV%E8%89%B2%E5%BD%A9%E5%B1%9E%E6%80%A7%E6%A8%A1%E5%BC%8F
[Link 4]: http://zh.wikipedia.org/wiki/%E8%89%B2%E8%B0%83
[Link 5]: http://zh.wikipedia.org/wiki/%E6%98%8E%E5%BA%A6
[Link 6]: http://zh.wikipedia.org/wiki/%E5%9C%86%E6%9F%B1%E4%BD%93
[Link 7]: http://zh.wikipedia.org/wiki/%E9%BB%91%E8%89%B2
[Link 8]: http://zh.wikipedia.org/wiki/%E7%99%BD%E8%89%B2
[Link 9]: http://zh.wikipedia.org/wiki/%E7%81%B0%E8%89%B2
[Link 10]: http://zh.wikipedia.org/wiki/%E5%9C%86%E9%94%A5%E4%BD%93
[Link 11]: http://zh.wikipedia.org/wiki/%E7%BA%A2%E8%89%B2
[Link 12]: http://zh.wikipedia.org/wiki/%E7%BB%BF%E8%89%B2
[Link 13]: http://zh.wikipedia.org/wiki/%E8%93%9D%E8%89%B2
[Link 14]: http://zh.wikipedia.org/wiki/%E5%8E%9F%E8%89%B2
[sRGB]: http://zh.wikipedia.org/wiki/SRGB
[Link 15]: http://zh.wikipedia.org/wiki/%E5%9F%83%E5%B0%94%E7%BB%B4%C2%B7%E9%9B%B7%C2%B7%E5%8F%B2%E5%AF%86%E6%96%AF
[RGB 1]: http://zh.wikipedia.org/wiki/RGB
[CMYK]: http://zh.wikipedia.org/wiki/CMYK
[Link 16]: http://zh.wikipedia.org/w/index.php?title=HSL%E5%92%8CHSV%E8%89%B2%E5%BD%A9%E7%A9%BA%E9%97%B4&action=edit&section=2
[220px-Triangulo_HSV.png]: /images/20220527/20d7776f3b19450ba828e17dca0eba8a.png
[220px-Triangulo_HSV.png 1]: http://zh.wikipedia.org/wiki/File:Triangulo_HSV.png
[magnify-clip.png]: http://bits.wikimedia.org/skins-1.17/common/images/magnify-clip.png
[220px-HSV_cone.png]: /images/20220527/e370251a6d554b38a5e0fd8fb68aa616.png
[220px-HSV_cone.png 1]: http://zh.wikipedia.org/wiki/File:HSV_cone.png
[Link 17]: http://zh.wikipedia.org/wiki/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9B%BE%E5%BD%A2%E5%AD%A6
[Link 18]: http://zh.wikipedia.org/w/index.php?title=%E8%89%B2%E8%BD%AE&action=edit&redlink=1
[Link 19]: http://zh.wikipedia.org/w/index.php?title=HSL%E5%92%8CHSV%E8%89%B2%E5%BD%A9%E7%A9%BA%E9%97%B4&action=edit&section=3
[400px-HSL_HSV_cylinder_color_solid_comparison.png]: /images/20220527/329227b20e644f2287f5fb4c7f05cb6f.png
[400px-HSL_HSV_cylinder_color_solid_comparison.png 1]: http://zh.wikipedia.org/wiki/File:HSL_HSV_cylinder_color_solid_comparison.png
[W3C]: http://zh.wikipedia.org/wiki/W3C
[CSS]: http://zh.wikipedia.org/wiki/CSS
[300px-Gimp_color_selector_03.gif]: /images/20220527/3363d83d12c6494d97a060b9fe09fbef.png
[300px-Gimp_color_selector_03.gif 1]: http://zh.wikipedia.org/wiki/File:Gimp_color_selector_03.gif
[GIMP]: http://zh.wikipedia.org/wiki/GIMP
[Mac OS X]: http://zh.wikipedia.org/wiki/Mac_OS_X
[Xara Xtreme]: http://zh.wikipedia.org/w/index.php?title=Xara_Xtreme&action=edit&redlink=1
[Paint.NET]: http://zh.wikipedia.org/wiki/Paint.NET
[Illustrator]: http://zh.wikipedia.org/wiki/Adobe_Illustrator
[Photoshop]: http://zh.wikipedia.org/wiki/Adobe_Photoshop
[Turbo Photo]: http://zh.wikipedia.org/wiki/Turbo_Photo
[Inkscape]: http://zh.wikipedia.org/wiki/Inkscape
[Macromedia Studio]: http://zh.wikipedia.org/wiki/Macromedia_Studio
[Microsoft Windows]: http://zh.wikipedia.org/wiki/Microsoft_Windows
[Microsoft Paint]: http://zh.wikipedia.org/wiki/Microsoft_Paint
[Paint Shop Pro]: http://zh.wikipedia.org/wiki/Paint_Shop_Pro
[ImageMagick]: http://zh.wikipedia.org/wiki/ImageMagick
[Pixel image editor]: http://zh.wikipedia.org/w/index.php?title=Pixel_image_editor&action=edit&redlink=1
[Pixia]: http://zh.wikipedia.org/w/index.php?title=Pixia&action=edit&redlink=1
[Bryce]: http://zh.wikipedia.org/w/index.php?title=Bryce_%28%E8%BD%AF%E4%BB%B6%29&action=edit&redlink=1
[Link 20]: http://zh.wikipedia.org/w/index.php?title=HSL%E5%92%8CHSV%E8%89%B2%E5%BD%A9%E7%A9%BA%E9%97%B4&action=edit&section=4
[Link 21]: http://zh.wikipedia.org/w/index.php?title=%E8%BE%90%E5%B0%84%E6%B5%8B%E5%AE%9A&action=edit&redlink=1
[Link 22]: http://zh.wikipedia.org/wiki/%E8%B0%B1%E5%AF%86%E5%BA%A6
[Link 23]: http://zh.wikipedia.org/wiki/%E6%B3%A2%E9%95%BF
[Link 24]: http://zh.wikipedia.org/wiki/%E6%8C%AF%E5%B9%85
[Link 25]: http://zh.wikipedia.org/w/index.php?title=HSL%E5%92%8CHSV%E8%89%B2%E5%BD%A9%E7%A9%BA%E9%97%B4&action=edit&section=5
[Link 26]: http://zh.wikipedia.org/w/index.php?title=HSL%E5%92%8CHSV%E8%89%B2%E5%BD%A9%E7%A9%BA%E9%97%B4&action=edit&section=6
[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 _ge 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]: /images/20220527/7ab6886cd0f9404d9a628c0cf986852d.png
[l _ _begin_matrix_ _frac_1_2_ _end_matrix_ _max _ min]: /images/20220527/1b264ee0828f46f1977ada01718dcf1d.png
[s _ _begin_cases_0 _ _mbox_if _ l _ 0 _mbox_ or _ max _ min _frac_max-min_max_min_ _ _frac_max-min_2l_ _ _mbox_if _ 0 _frac_1_2_end_cases]: /images/20220527/089c00c190754e00ad42ce358ea9dd30.png
[s _ _begin_cases_0_ _ _mbox_if _ max _ 0 _frac_max - min_max_ _ 1 - _frac_min_max_ _ _mbox_otherwise_end_cases]: /images/20220527/5a2cab3e01d344c0ac020bb78a6e67b6.png
[v _ max]: /images/20220527/01e83dea55944f469867bcc9d66be43b.png
[Link 27]: http://zh.wikipedia.org/w/index.php?title=HSL%E5%92%8CHSV%E8%89%B2%E5%BD%A9%E7%A9%BA%E9%97%B4&action=edit&section=7
[1]: http://zh.wikipedia.org/wiki/HSL%E5%92%8CHSV%E8%89%B2%E5%BD%A9%E7%A9%BA%E9%97%B4#cite_note-0
[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]: /images/20220527/fe8a69f511984d3ba4e8ecc6a9e28e42.png
[p _ 2 _times l - q]: /images/20220527/b065a489ceb34b09beea54d6f85052f4.png
[h_k _ _h _over 360_]: /images/20220527/a8a9d24fa26a4a9287439a2b6642bbc5.png
[t_R _ h_k_frac_1_3_]: /images/20220527/86b4f7458c9145e6b3499056f6b0fdd3.png
[t_G _ h_k]: /images/20220527/da5c5dd9f3ff4cc6a0deb7a7e22bdfe3.png
[t_B _ h_k-_frac_1_3_]: /images/20220527/bacc15c0d22e4dd6adddf89997ea31d6.png
[mbox_if _ t_C _ 0 _rightarrow t_C _ t_C _ 1.0 _quad _mbox_for each_C _in _R_G_B]: /images/20220527/2bb7236f2434449fa0fa7ef2ebdbc85a.png
[mbox_if _ t_C _ 1 _rightarrow t_C _ t_C - 1.0 _quad _mbox_for each_C _in _R_G_B]: /images/20220527/e07b2750b708403ea4a80247d4f9a7b1.png
[Link 28]: http://zh.wikipedia.org/w/index.php?title=%E5%9D%90%E6%A0%87%E5%90%91%E9%87%8F&action=edit&redlink=1
[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]: /images/20220527/17984fe10b1c4d4899bb610abf75f59e.png
[mbox_for each_C _in _R_G_B]: /images/20220527/5dbf221b49ab4863ba18e83c2d4f219d.png
[Link 29]: http://zh.wikipedia.org/w/index.php?title=HSL%E5%92%8CHSV%E8%89%B2%E5%BD%A9%E7%A9%BA%E9%97%B4&action=edit&section=8
[h_i _equiv _left_lfloor _frac_h_60_ _right_rfloor _pmod_6]: /images/20220527/d8fc7c6700904377a6192feb1567d0d6.png
[f _ _frac_h_60_ - h_i]: /images/20220527/3fe855f64655456491b9d0baf18e99a6.png
[p _ v _times _1 - s_]: /images/20220527/2a9c8d353bf84d5da9b2b339f638f3dd.png
[q _ v _times _1 - f _times s_]: /images/20220527/0ed374f9f13a402b9dcb8620334ce8cc.png
[t _ v _times _1 - _1 - f_ _times s_]: /images/20220527/de6eadea30024031b0545971f9407f39.png
[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]: /images/20220527/2814ede3265d40d08b1acea6663e1adc.png
[Link 30]: http://zh.wikipedia.org/w/index.php?title=HSL%E5%92%8CHSV%E8%89%B2%E5%BD%A9%E7%A9%BA%E9%97%B4&action=edit&section=9
[RGB_HSV]: http://s15.sinaimg.cn/bmiddle/474fc3c944e919ba9b33e
[RGB_HSV_RGB_HSV]: /images/20220527/a9e3ff6a8b9c4a9089cf84d5cbff0ae1.png