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代碼以下：

1 <div class="mydiv1"></div>
2 <div class="mydiv2"></div>
3 <div class="mydiv3"></div>
4 <div class="mydiv4"></div>
5 <div class="mydiv5"></div>

CSS代碼以下：

 1 div{
 2     height:100px;
 3     width:500px;
 4     margin:0 auto;
 5    }
 6 .mydiv1{background-color: hsla(0,100%,80%,0.5);}
 7 .mydiv2{background-color: hsla(0,100%,70%,0.5);}
 8 .mydiv3{background-color: hsla(0,100%,60%,0.5);}
 9 .mydiv4{background-color: hsla(0,100%,50%,0.5);}
10 .mydiv5{background-color: hsla(0,100%,40%,0.5);}

結果以下：能夠看到當亮度從高慢慢下降的時候，div的背景色在慢慢變暗。

一樣的HTML代碼，咱們改變一下CSS樣式，以下：

 1 div{
 2     height:100px;
 3     width:500px;
 4     margin:0 auto;
 5    }
 6 .mydiv1{background-color: hsla(0,100%,50%,0.5);}
 7 .mydiv2{background-color: hsla(0,80%,50%,0.5);}
 8 .mydiv3{background-color: hsla(0,70%,50%,0.5);}
 9 .mydiv4{background-color: hsla(0,60%,50%,0.5);}
10 .mydiv5{background-color: hsla(0,50%,50%,0.5);}

咱們讓顏色的其餘部分不變，飽和度（S）慢慢下降的時候，能夠看到紅色的純度在下降。