参考资料：
- w3cschool
- 《CSS揭秘》
- 【CSS进阶】CSS 颜色体系详解——Coco
请注意，如果你了解整个颜色体系，那么大侠，这篇文章可能不适合你，请绕道，节省时间到别地去吧~~~
我之前的知识库的颜色体系
在之前，我的CSS知识体系中的颜色体系只有colorName、rgb、rgba、hex、transparent，考虑到可能有些同学对这几种区分不是特别清楚，我在这里在一些简单的讲解。
- transparent：用来指定全透明色彩。transparent是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值。
- colorName：用颜色名称来指定颜色
- HEX：#RRGGBB 或 #RGB.三个参数，取值范围为：00 - FF。
参数必须是两位数。对于只有一位的，应在前面补零。
如果每个参数各自在两位上的数字都相同，那么本单位也可缩写为 #RGB 的方式。例如：#FF8800 可以缩写为 #F80。
此色彩模式与RGB色彩模式不同。 - RGB：RGB记法。RGB(R,G,B)三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。
- RGBA:RGBA(R,G,B,A)
取值：
R：红色值。正整数 | 百分数
G：绿色值。正整数 | 百分数
B：蓝色值。正整数 | 百分数
A：Alpha透明度。取值0~1之间。
现在
hsl和hsla
除了之前表示法，颜色也可以使用 hsl() 表示。hsl()被定义为色相-饱和度-明度（Hue-saturation-lightness），hsla() 多一个 a ，表示其透明度，取值为 0-1。由于hsl和rgb类似的语法结构，所以很多地方拿两个作比较。hsl 相比 rgb 的优点是更加直观：HSL色彩模式是人类对颜色最直接的感知。你可以估算你想要的颜色，然后微调。它也更易于创建相称的颜色集合。
取值：
- Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
- S：Saturation(饱和度)。取值为：0.0% - 100.0%
- L：Lightness(亮度)。取值为：0.0% - 100.0%
hsl 的颜色模型通常由一个圆柱体表示：
既然要用，那么其兼容性怎么样呢？
该高兴的是，HSL被现代浏览器较好的支持，而且不需要任何前缀，IE6-IE7不支持。请见下图：
这里再对比一下
hsla的兼容性：
所以，在用之前一定要明确一下，不然样式挂了就GG了。
rgb 到 hsl 的转换
这里有个小 tips 可能有些人不知道，在开发阶段我们只有一个 rgb 值，但是希望转换成 hsl 值，使用 chrome 开发者工具可以很便捷的做到，我们只需要选中我们想转换的颜色值，按住键盘左 shift，点击这个颜色表示框，即可进行转换。
HSLA模式和RGBA模式与Opacity的区别
其实HSLA模式和RGBA模式就是HSL模式和RGB模式增加一个opacity值，opacity 的Alpha值表示不透明度，取值在0到1之间。
HSLA模式和RGBA模式与Opacity的区别就是前两者不回影响子类的透明度；而Opacity会影响子类的透明度，从而导致子类元素的颜色产生色差，所以为了避免出现这种情况，我们避免在设置Opacity值的div下包含子类（可以用绝对定位加层级解决这个问题）。
HSLA模式和RGBA模式与Opacity在IE6-IE8都不支持，但是我们可以利用滤镜实现透明，如下：
.eml{
background-color:red;
opacity: 0.3;/*除了IE，但是IE9支持*/
filter:alpha(opacity=30);/*IE都支持，IE6不支持，可以使用Alpha透明图片作为背景*/
}
