傳統來說，大家在CSS中使用的顏色要么是16進制格式（如#990000），要么是rgb格式（如rgb(171,205,239)）。CSS3帶來了一些全新色彩表現和處理方法，比如使用HSL(Hue, Saturation, Light) 和opacity/alpha通道。但現在只有Firefox 3+, Chrome 1.0+ 和Safari 3+ 以及一些衍生的瀏覽器完全支持它們，據說IE瀏覽器要等到IE9才會開始支持一些CSS3屬性。

　　HSLA

　　當然，HSLA 就是HSL 的擴展，就像RGBa一樣，添加了第四個透明參數。使用HSLA就像RGBa一樣簡單，僅僅在那里貼上額外的參數就OK了：div {background: hsla(30, 50%, 80%, 0.5);}HSLA被大部分瀏覽器支持，包括Safari 3.2+、Chrome、Firefox，IE不支持，和HSL不同的是，Opera9.6并不支持HSLA，直到Opera 10才開始支持HSLA。

　　HSL

　　HSL是一個選擇顏色的很直觀的方法。如果你需要“再暗一點點兒” 或 “再亮一點點兒”，使用十六進制組合會頗麻煩吧。幸運的是，通過HSL，它就是僅僅一個簡單的數字改變。HSL代表Hue(色調、也稱“色相”)、Saturation(飽和度)和Lightness(明度)。Hue就是一個色盤中的顏色(參考上圖)。色彩選擇通過度數來確定，0o 就是紅色，120o 是綠色，而240o 就是藍色。當然，你可以選擇中間的不同的色彩組合，這樣你就有這些：Saturation(飽和度)是該色彩被使用了多少。0%表示灰度，也就是我們并沒有使用這個顏色，而100%表示該顏色很飽滿。通俗的講，飽和度就是顏色的深淺程程度，鮮艷程度Lightness(明度)也就是該色彩有多亮。較低設置意味著暗，較高設置意味著亮，0% 和100%意味著分別為黑和白。所以，一個使用橙色的50%飽和度+50%名都的背景的對象看起來就像這樣：

　　div {background: hsl(30, 50%, 80%);}

　　RGBa

　　下面讓我們討論一下RGBa。RGBa是對原始的RGB的擴展，它加入了第四個參數：alpha通道。alpha通道參數采用0 到1之間的小數，就像opacity那樣。使用RGBa而不是opacity的優勢是，當使用RGBa的時候，透明不會被應用到子元素。這也就一位著，你可以在一個透明對象里面使用一個完全不透明的子對象，而當你使用opacity的時候，透明對象的子元素也是透明的。

　　div {

　　background: rgb(255,0,0); /* The old one */

　　background: rgba(255,0,0,0.5); /* The new one */

　　}

　　Opacity

　　這其實是一個舊屬性，令人驚奇的是，它被IE的當前版本支持--盡管是以一種比較復雜的方法。Opacity將整個CSS 對象變透明，所有的子元素的透明度也會適當的繼承。官方的語法如下：opacity: [0-1的小數];所以一個opacity: 0.5;設置會讓對象50%透明。盡管較新的瀏覽器積極的支持它，老的瀏覽器還是需要一些定制的代碼，就像IE瀏覽器一樣。