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）慢慢降低的時候，可以看到紅色的純度在降低。