Question

截止目前，CSS3已经给予了我们选择元素和添加自定义字体的强大支持。现在我们来看看CSS3的颜色使用方法，这些方法在以前简直不可能实现。

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

5.8.1　RGB颜色

RGB（红绿蓝）是一种已存在了数十年的颜色体系。它的原理是通过定义不同的红绿蓝色值来组成一个颜色。例如，And the winner isn’t...网站中奇数导航链接文字的颜色，在CSS中被定义为一个十六进制值 #fe0208：

在CSS3中，该值可以使用RGB值来描述：

大多数图片编辑器在它们的颜色选择器中会同时显示颜色的十六进制值和RGB值。下面的截图展示了Photoshop的颜色选择器，图中的R、G和B输入框中显示了每个颜色通道的值：

可以看到R的值是254， G的值是2，而B的值是8。这个值很容易转换为CSS3颜色值：在CSS中，颜色模式（如rgb）定义之后，圆括号中的颜色值必须按照红、绿、蓝这个顺序排列，之间使用逗号分隔。

5.8.2　HSL颜色

除了RGB，CSS3还可使用HSL（色相、饱和度、亮度）模式来声明颜色。

HSL不是HSB

不要错误地认为图片编辑软件如Photoshop中显示的HSB（色相、饱和度、明度）值就是HSL——它们不一样⁽²⁾！

HSL被广泛使用是因为它非常容易理解，根据该模式提供的颜色值就能描绘出具体颜色。比如，除非你是某种颜色选择器狂人，否则我敢打赌你肯定无法立即告诉我rgb（255， 51， 204）是什么颜色？有人愿打赌吗？肯定没有，我也不会。但是给我HSL的颜色值hsl（315， 100%， 60%），我可以大概猜出它是位于洋红色和正红色之间的某种颜色（实际上它是一种喜庆的粉红色——我可能开始有点喜欢《红磨坊》了）。我怎么知道？其实很简单……

HSL模式基于一个360°的色相环，第一个数字代表色相，60°时为黄色，120°时为绿色，180°时为青色，240°时为蓝色，300°时为洋红色，360°时为红色。所以前面提到的HSL颜色色相为315，所以很容易看出它介于洋红（300°）和红（360°）之间。其后的两个值分别表示饱和度和亮度，值为百分比，用于改变基础的色相。如果想要更加饱满的颜色，则第二个值使用一个高一点的百分比即可。最后一个值控制亮度，可在0%的全黑到100%的全白之间变化。

因此，定义了HSL颜色值之后，在它的基础上创建类似颜色就很方便，只需要修改饱和度和亮度的百分比值即可。例如，我们的红色导航链接可以使用HSL颜色值来定义：

如果我们想在鼠标悬停时让文字颜色稍微变深一点，就可以使用相同的HSL值，然后只修改一下亮度百分比（最后一个值），如下代码片段所示：

总之，如果你能记住针对色相环的这个顺口溜：Young Guys Can Be Messy Rascals（或者其他你容易记住的顺口溜⁽³⁾），那你基本就能自己写出HSL颜色值，或者基于某种颜色创建类似颜色，不用再依赖颜色选择器。在公司聚会时把这个技巧给那些后端PHP专家炫耀一下，他们会对你肃然起敬。

5.8.3　针对IE6、IE7和IE8提供备用颜色值

你可能都猜到了，版本9以下的IE浏览器不支持RGB和HSL。因此，如果需要针对这些浏览器提供备用的颜色声明，则要将其放在RGB或HSL值之前。例如，为前面提到的导航链接增加备用十六进制颜色值的代码如下：

5.8.4　透明通道

为什么我们不继续沿用已被使用多年的可靠的十六进制颜色值，非要自找麻烦地使用HSL或RGB？有这样的疑惑很正常。HSL和RGB与十六进制颜色值最大的区别，是它们支持透明通道。这意味着可以让元素透明，使其下方的元素可见。

我们来对And the winner isn’t...网站做点修改以说明透明效果。首先，我们给body元素设置一个很烂的背景图，如下：

然后，我们给#wrapper div（它包裹所有其他页面元素）添加一个白色的背景。不过此处我们不会使用十六进制的白色，而是使用HSLA颜色值，具体如下面代码片段中加粗的代码行所示：

HSLA颜色声明与标准的HSL规则类似。不过颜色必须得声明为hsla模式（而不是hsl），增加一个额外的透明度值，该值的格式是一个介于0（全透明）到1（不透明）之间的小数。上面代码中我们将白色的#wrapper设置为半透明。浏览器中的显示效果如下所示：

RGBA的语法和HSLA的基本一样，即在颜色值后追加一个透明度值：

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

为什么不使用opacity

CSS3还允许通过opacity声明来设置元素的透明度。该透明度的值也是一个介于0到1之间的小数（如将opacity设置为0.1表示为10%透明）。但是这种透明度与RGBA及HSLA有所不同，这种方式设置的透明度会对整个元素产生影响（元素的内容都会透明）。反之，使用HSLA或RGBA则可以仅让元素的某些部分有透明效果。这样，一个元素可以带有HSLA透明背景，但内部的文字仍然不透明。

CSS3颜色模块是第一个成为推荐标准的CSS3模块。因此和CSS3选择器模块一样，CSS3颜色模块现在就可以放心使用，该模块的实现方法之后不会再有什么变化。