RGB、HSB\HSV、HSL三种颜色空间的原理理解与转换

『"Color" refers to the human brains subjective interpretation of combination of a narrow band of wavelength of light』---- WIKIBOOKS

简单说来，颜色是人脑对不同波段光长的主观理解。

----------------------------------Primary Colors------------------------------------

元色，这个可以理解为向量空间的基。

也就是说一个颜色空间的所有色彩都可以通过这个空间的元色通过某种方式生成。（简单的就是线性相加，比如rgb空间）

Tranditional Colors

站在巨人肩上的巨人大牛顿在1672年使用，红、黄、蓝做为三元色。这组组合也被称为"Painter's Colors"，现在仍在使用。

但这种组合并不能完全生成所有的颜色。

Subtractive Colors

应用减法框架的颜色空间，三元色：蓝绿、黄色和洋红（cyan, yellow and magenta）。

这种框架下的颜色是，使用白光减去三种光源成份得到色彩。如下图：



Additive Colors

应用加法的颜色空间，其中的颜色由原色相加得到。比如我们常见的RGB（Red, Green, Blue）。

----------------------------------HSL------------------------------------

H指Hue，可以理解为区别颜色的名称、类型，比如黄色、蓝色等。

S指Saturation，指颜色的『丰满』程度，该值越大，颜色越艳丽。

L指Lightness，指亮度。从黑到白。

三者之间的关系是：

该颜色空间中，心Lightness为轴心；Hue围绕L旋转过程中颜色发生变化；每一个与L正交的平面上，以交点为中心向某方向（H）发射的射线是S。

我觉得colorizer.org上面的图挺形象，搬过来如下：



----------------------------------HSB与HSV------------------------------------

注意，这两个东西是大大滴不同。

这两者里面的Hue都是指的同一个拿含意（可以理解成颜色类型），可以用下面这个色环表示：

但它们的其它两维（尤其是saturation）所指的含义却差别很大。

在HSL中：

Lightness控制颜色，从黑到hue再到白。颜色的明亮程度完全靠L控制。

Saturation控制颜色的灰度冷暖。

但在HSB中：

同一Hue颜色的冷暖、色调、明暗受Saturation和Brightness（value）共同影响。

下面这两幅图对比比较明显。





可以在http://colorizer.org/尝试调整不同维度值，感受颜色变化。

----------------------------------转换公式------------------------------------

RGB 到 HSB\HSV



RGB 到 HSL



其中，M = max(R, G, B), m = (R, G, B)。

HSB\HSV 到HSL



HSL 到 HSV\HSB



参考：http://colorizer.org/

https://en.wikipedia.org/wiki/HSL_and_HSV

https://en.wikibooks.org/wiki/Color_Models:_RGB,_HSV,_HSL

http://codeitdown.com/hsl-hsb-hsv-color/