CSS3中Color的一些事

1.CSS 简介

CSS（Cascading Style Sheets），我们都不陌生吧。特别是我们在开发web项目的时候，用的更是不亦乐乎。

可是，你知道吗？CSS（注意 也就是CSS1）是在1996年的时候产生的标准，也就是到现在时隔（2012-1996）差不多15年的历史。毕竟时间在一直的走嘛，现在CSS3也在使用中，不过需要注意的是，CSS3并非是W3C的一个标准，它现在依旧是草案（Working Draft）状态，而不是最终的稳定版---W3C推荐。

据目前所知，CSS3已经增加了40多种模块（Module），既然还是草案，所以以后就还有增加的可能。所以，用我们的祈祷吧，希望CSS3赶快成为标准。那个时候我们程序员才是解放的时候。

在这篇文章中，我们会讨论一下CSS3中新增的40多个模块中的一个模块----Color模块。Color模块，比其他的模块更加的稳定。事实上，在2011年6月的时候，它就已经成为了W3C的推荐了，也就是标准了。

这新的CSS3 Color特性包括 在传统的hex 和RGB 值中增加了HSL特性，也就是增加了Opacity（透明度）和Alpha channels。

2.HSL Colors

在我们传统开发web网页的时候，我们在使用下面的关键字来进行对HTML和CSS进行颜色的设定。

• Color 关键字 (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow)
• Hexadecimal（16进制） 表示法
• RGB (red，green，blue)表示法

比如，如下实例：

.keyword { color: white; }//关键字表示法
.shorthex { color: #FFF; } //短的16进制表示法
.longhex { color: #FFFFFF; } //长16进制表示法
.rgb1 { color: rgb(255, 255, 255); } //rgb1 通过值
.rgb2 { color: rgb(100%, 100%, 100%); } //rgb2 通过百分比

对上面的表示，我们都不陌生。

那么，在CSS3中的HSL怎么表示以及是什么意思呢？

HSL格式：

.example { color: hsl([hue], [saturation], [light]); }

用的也很简单：

.implemented { color: hsl(240, 50%, 80%); }

那这三个单词什么意思呢？

H（Hue）色调：0和360是红色，接近120的是绿色，240是蓝色。W3C提供了一些对H色调有用的值：Tables Of Hue andSaturation Values,当然也还有其他的工具可以生成Hue的值，比如下面提到的HSL Color Picker在线工具。

S(Saturation,饱和度)值是一个百分比：0%是灰度，100%饱和度最高

L(Lightness，亮度)值也是一个百分比：0%是最暗，50%均值，100%最亮。

HSL Color Picker是一个用来取HSL颜色的工具。界面如下：

 

HSL浏览器兼容性：

目前HSL和HSLA被Firefox、Google Chrome、和Safari浏览器较好的支持，而且不需要任何前缀修饰。

实例：

#left { color: hsl(240, 0%, 50%); }
#center { color: hsl(240, 50%, 50%); }
#right { color: hsl(240, 100%, 50%); }

结果：

OK，那我们现在来调整一下：

#left { color: hsl(240, 100%, 0%); }
#center { color: hsl(240, 100%, 50%); }
#right { color: hsl(240, 100%, 100%); }

其实，也简单，说真的，我也不懂为什么要增加这种方增加颜色的方法。呵呵 不过也好，多一种方法把~。总归有好处的，不是吗？

Opacity（透明度） 和Gradients（渐变）

另外一个和颜色相关的CSS3属性是 Alpha 通道（channel）和Opacity（透明度）。基本上来说