前言
CSS3 之前，定义颜色的两种方式分别为 RGB 和 16进制 模式。
这两种方式并没有太多的差别，相互转换也只是 10进制 和 16进制 之间的转换。RGB 唯一的优点就是可以用rgba在设置颜色的同时设置透明度，而 16进制 需要使用opacity辅助。
在一般的网页制作中这两种模式已经足够，可是在一些特殊场景下，需要用到 其他的颜色模式。比如 CSS 3 支持的 HSL 模式。
几种颜色模式
RGB
RGB = Red (红) + Green (绿) + Blue (蓝)
取值范围 ：rgb(0~255, 0~255, 0~255)
示例：白色：rgb(255, 255, 255) 黑色：rgb(0, 0, 0)
原理（加法原色）：RGB是从颜色发光的原理来设计定的，通俗点说它的颜色混合方式就好像有红、绿、蓝三盏灯，当它们的光相互叠合的时候，色彩相混，而亮度却等于两者亮度之总和，越混合亮度越高，即加法混合。
CMYK
CMYK = Cyan (青) + Magenta (品红) + Yellow (黄) + Key Plate(blacK) (黑)
原理（减法原色）：印刷四色模式是彩色印刷时采用的一种套色模式，与RGB的发光色彩模式不同，它是反光的色彩模式。
HSL
HSL = H (色相) + Saturation (饱和度) + Lightness (亮度)
取值范围： hsl(0~360, 0~100%, 0~100%)
示例: 红色：hsl(0, 100%, 50%)
原理：
- HSL 色相值：
0°：红色
60°：黄色
120°：绿色
180°：青色
240°：蓝色
300°：品红色
360°：红色
- HSL饱和度值: hsl(45,x%,50%)
x%: 0% ~ 100% （灰色 ~ 色相值颜色）
- HSL亮度值: hsl(90,100%,x%)
x%: 0% ~ 50% ~ 100% （黑色 ~ 色相值颜色 ~ 白色）
HSV
HSV = H (色相) + Saturation (饱和度) + value (色调)
也叫作 HSB
HSB = H (色相) + Saturation (饱和度) + brightness (明度)
HSL 与 HSV 比较
HSL和HSV二者都把颜色描述在圆柱坐标系内的点，这个圆柱的中心轴取值为自底部的黑色到顶部的白色而在它们中间的是灰色，绕这个轴的角度对应于“色相”，到这个轴的距离对应于“饱和度”，而沿着这个轴的高度对应于“亮度”，“色调”或“明度”。
二者在数学上都是圆柱，但HSV（色相，饱和度，明度）在概念上可以被认为是颜色的倒圆锥体（黑点在下顶点，白色在上底面圆心），HSL在概念上表示了一个双圆锥体和圆球体（白色在上顶点，黑色在下顶点，最大横切面的圆心是半程灰色）。注意尽管在HSL和HSV中“色相”指称相同的性质，它们的“饱和度”的定义是明显不同的。
HSL（a ~ d）和 HSV（e ~ h）。上半部分（a、e）：两者的3D模型截面。下半部分：将模型中三个参数的其中之一固定为常量，其它两个参数的图像。
HSL和HSV色彩空间比较。
W3C的CSS3规定声称“HSL的优点是它对称于亮与暗（HSV就不是这样）…”，这意味着：
- 在HSL中，饱和度分量总是从完全饱和色变化到等价的灰色（在HSV中，在极大值V的时候，饱和度从全饱和色变化到白色，这可以被认为是反直觉的）。
- 在HSL中，亮度跨越从黑色过选择的色相到白色的完整范围（在HSV中，V分量只走一半行程，从黑到选择的色相）。
颜色模式转换公式
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的值通常规范化到位于0到360°之间。而h = 0用于max = min的（就是灰色）时候而不是留下h未定义。
HSL和HSV有同样的色相定义，但是其他分量不同。HSV颜色的s和v的值定义如下：
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的时候，可以使用下列过程：
HSV -> RGB
类似的，给定在HSV中 (h, s, v)值定义的一个颜色，带有如上的h，和分别表示饱和度和明度的s和v变化于0到1之间，在RGB空间中对应的 (r, g, b)三原色可以计算为（R,G,B变化于0到1之间）：
参考文章：
