CSS中的HSLA颜色

CSS 中的颜色可以由RGB色彩空间和HSL色彩空间两种方式来表述。其中我们常用的是RGB色彩空间，RGB色彩空间的颜色表示方式有：十六进制颜色（如红色：#FF0000）、RGB颜色（如红色：rgb(255,0,0)）,RGBA颜色（如半透明的红色rgba(255,0,0,0.5)），此外常见的颜色可以直接写颜色名（如红色：red）。HSL色彩，是一种工业界的色彩标准，因为它能涵盖到人类视觉所能感知的所有颜色，所以在工业界广泛应用。因为我们不常用HSL色彩空间，可能大家对HSL色彩空间比

较陌生，下面我们来详细看一下HSL色彩。

HSL色彩空间中，H（Hue）：代表色调，S（Saturation）：代表饱和度，L（Lightness）：代表亮度，（A（Alpha）：代表不透明度）。HSL是一种圆柱坐标系，其坐标系图如下：

如上图：

H是色度，取值在0度~360度之间，0度是红色，120度是绿色，240度是蓝色。360度也是红色。

S是饱和度，是色彩的纯度，是一个百分比的值，取值在0%~100%，0%饱和度最低，100%饱和度最高

L是亮度，也是一个百分比值，取值在0%~100%，0%最暗，100%最亮。

A是不透明度，取值在0.0~1.0，0.0完全透明，1.0完全不透明。

现在IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+都对HSL颜色提供了很好的支持，可以直接拿过来用。

我们来举个例子，HTML代码如下：

 <div class="mydiv1"></div>
 <div class="mydiv2"></div>
 <div class="mydiv3"></div>
 <div class="mydiv4"></div>
 <div class="mydiv5"></div>

CSS代码如下：

 div{
     height:100px;
     width:500px;
     margin:0 auto;
    }
 .mydiv1{background-color: hsla(0,100%,80%,0.5);}
 .mydiv2{background-color: hsla(0,100%,70%,0.5);}
 .mydiv3{background-color: hsla(0,100%,60%,0.5);}
 .mydiv4{background-color: hsla(0,100%,50%,0.5);}
 .mydiv5{background-color: hsla(0,100%,40%,0.5);}

结果如下：可以看到当亮度从高慢慢降低的时候，div的背景色在慢慢变暗。

同样的HTML代码，我们改变一下CSS样式，如下：

 div{
     height:100px;
     width:500px;
     margin:0 auto;
    }
 .mydiv1{background-color: hsla(0,100%,50%,0.5);}
 .mydiv2{background-color: hsla(0,80%,50%,0.5);}
 .mydiv3{background-color: hsla(0,70%,50%,0.5);}
 .mydiv4{background-color: hsla(0,60%,50%,0.5);}
 .mydiv5{background-color: hsla(0,50%,50%,0.5);}

我们让颜色的其他部分不变，饱和度（S）慢慢降低的时候，可以看到红色的纯度在降低。