CSS3颜色格式和透明度

CSS3允许我们使用新方法如RGB或HSL来声明颜色。另外，我们还能在这两个方法后面追加一个透明通道（分别是RGBA和HSLA）。

1、HSL

HSL模式基于一个360°的色环相。

• HSL的H(hue)分量，代表的是人眼所能感知的颜色范围，这些颜色分布在一个平面的色相环上，取值范围是0°到360°的圆心角，每个角度可以代表一种颜色。在实际应用中，我们需要记住色相环上的六大主色，用作基本参照：360°/0°红、60°黄、120°绿、180°青、240°蓝、300°洋红，它们在色相环上按照60°圆心角的间隔排列。
• HSL的S(saturation)分量，指的是色彩的饱和度，它用0%至100%的值描述了相同色相、明度下色彩纯度的变化。数值越大，颜色中的灰色越少，颜色越鲜艳，呈现一种从理性(灰度)到感性(纯色)的变化。
• HSL的L(lightness)分量，指的是色彩的明度，作用是控制色彩的明暗变化。它同样使用了0%至100%的取值范围。数值越小，色彩越暗，越接近于黑色；数值越大，色彩越亮，越接近于白色。

总之，记住针对色相环的这个顺口溜：Young Guys Can Be Messy Rascals。

Y = Yellow

G = Green

C = Cyan

B = Blue

M = Magenta

R = Red

These colors are spaced out at 60 degrees.

2、透明通道

HSL和RGB与十六进制颜色值最大的区别，是他们支持透明通道。

//background-color:hsla(0,0%,100%,0.8);
background-color:rgba(255,255,255,0.8);

为RGB和HSL颜色模式增加透明通道，能让我们快捷灵活地处理分层叠加元素。也就是说我们不用再依赖透明图片（如PNG或GIF图片）来实现这类视觉效果，这对制作响应式设计是个绝好的消息。

为什么不使用opacity？
CSS3还允许通过opacity声明来设置元素的透明度。但这种透明度与RGBA及HSLA有所不同，这种方式设置的透明度会对整个元素产生影响（元素的内容都会透明）。反之，使用RGBA或HSLA则可以仅让元素的某些部分有透明效果，这样，一个元素可以带有HSLA透明背景，但内部的文字仍然不透明。