你不知道的CSS（二）——颜色

参考资料：

• 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

既然要用，那么其兼容性怎么样呢？
该高兴的是，HSL被现代浏览器较好的支持，而且不需要任何前缀，IE6-IE7不支持。请见下图：

兼容

这里再对比一下 hsla的兼容性：

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透明图片作为背景*/
    }