還在為惱人的顏色與透明度寫了超過兩行的CSS嗎?
CSS3在顏色色定上新增了HSL寫法與alpha的值，讓設計師們可以更便利的指定所想要的顏色以及透明度。
一般再寫網頁的時候，不論是文字或背景，經常會使用到許多顏色。而一般最常使用的是，利用色碼指定顏色，另一種則是使用RGB的格式來指定顏色。
在CSS3中，提供了5種不同指定顏色的方法，分別為以下：
RGB(in css2)：red、green、blue
RGBA：red、green、blue、alpha
HSL：hue、saturation、lightness
HSLA：hue、saturation、lightness、alpha
CMYK：cyan、magenta、yellow、black
以下介紹RGB、RGBA、HSL以及HSLA：
支援：firefox, safari, google chrome, opera 10
RGB(in css2)：
RGB這三個字中的R表示Red(紅色)、G表示Green(綠色)、B表示Blue(綠色)。
RGB色彩格式就是利用這三種顏色，來調整我們所需的顏色。
每個顏色的值介於0到255或者0%100%
寫法：
background：rgb（255,0,0）；
background：rgb（100%,0%,0%）；
RGBA：
是RGB顏色模式，再加上alpha(透明度)這個值，來指定顏色的不透明度。
寫法0.0~ 1.0 允許小數1位的數值， 0：完全透明，1：不透明， 0.7 → 70% 不透明。
W3C 沒有明確地表示是否允許小數一位以上的數值，不過 firefox 小數二位的數值也可以呈現，真是令人讚賞。
RGB與RGBA的不同是，RGBA不能以16進位來標記他的值。
寫法：
background：rgba（255,0,0,0.5）；
background：rgba（100%,0%,0%,0.5）；
HLS：
CSS3新增了HSL(Hue-Saturation-Lightness,色調-飽和度-亮度)的顏色來補全RGB的色彩
H：hue 值 (色相值)，在色環中的一個角度，以整數「角度」值表示，但不加「°」角度符號。 0或360：紅色，60：黃色，120：綠色，240：藍色，就好像彩虹色繞成一個圓。
如同數學角度，負值或超過 360則以x-360來計算，不過這樣有點自找麻煩。
S：saturation值(飽和度值)
0% ~ 100%的百分比值， 0%：灰色調，100%：最大飽和度。所以0%時，不論 hue 值是多少，都會以灰階單色呈現。
L：lightness值(亮度值)
0% ~ 100% 的百分比值，0%：最暗 (暗黑)， 100%：最亮 (亮白)， 50%：正常亮度。
50%以上漸漸增加白色， 50%以下漸漸增加黑色
寫法：
background：hsl（0,100%,50%）；
HLSA：
是HLS顏色模式，再加上alpha(透明度)這個值，來指定顏色的不透明度。
0.0 ~ 1.0 允許小數一位的數值。
寫法：
background：hsla（0,100%,50%,0.5）；
以下範例提供大家作為比較：
上面一排是沒有設定alpha值的純色區塊。
下面一排是設定了alpha值的半透明區塊。
分別由左到右的寫法為：16進位色碼指定、RGB、HSL
在RGB或HSL加上alpah值是不是方便許多呢?
往常用16進位色碼寫法，要再加上透明度的時候必須多寫上opacity這個值，也還不是每個個瀏覽器都支援，又必須針對不同的瀏覽器去寫不同的設定。
CSS3是不是令我們方便許多!
文章內容截自：
http://i.see-design.com.tw/2011/04/css-rgba-hsla.html
CSS3在顏色色定上新增了HSL寫法與alpha的值，讓設計師們可以更便利的指定所想要的顏色以及透明度。
一般再寫網頁的時候，不論是文字或背景，經常會使用到許多顏色。而一般最常使用的是，利用色碼指定顏色，另一種則是使用RGB的格式來指定顏色。
在CSS3中，提供了5種不同指定顏色的方法，分別為以下：
RGB(in css2)：red、green、blue
RGBA：red、green、blue、alpha
HSL：hue、saturation、lightness
HSLA：hue、saturation、lightness、alpha
CMYK：cyan、magenta、yellow、black
以下介紹RGB、RGBA、HSL以及HSLA：
支援：firefox, safari, google chrome, opera 10
RGB(in css2)：
RGB這三個字中的R表示Red(紅色)、G表示Green(綠色)、B表示Blue(綠色)。
RGB色彩格式就是利用這三種顏色，來調整我們所需的顏色。
每個顏色的值介於0到255或者0%100%
寫法：
background：rgb（255,0,0）；
background：rgb（100%,0%,0%）；
RGBA：
是RGB顏色模式，再加上alpha(透明度)這個值，來指定顏色的不透明度。
寫法0.0~ 1.0 允許小數1位的數值， 0：完全透明，1：不透明， 0.7 → 70% 不透明。
W3C 沒有明確地表示是否允許小數一位以上的數值，不過 firefox 小數二位的數值也可以呈現，真是令人讚賞。
RGB與RGBA的不同是，RGBA不能以16進位來標記他的值。
寫法：
background：rgba（255,0,0,0.5）；
background：rgba（100%,0%,0%,0.5）；
HLS：
CSS3新增了HSL(Hue-Saturation-Lightness,色調-飽和度-亮度)的顏色來補全RGB的色彩
H：hue 值 (色相值)，在色環中的一個角度，以整數「角度」值表示，但不加「°」角度符號。 0或360：紅色，60：黃色，120：綠色，240：藍色，就好像彩虹色繞成一個圓。
如同數學角度，負值或超過 360則以x-360來計算，不過這樣有點自找麻煩。
S：saturation值(飽和度值)
0% ~ 100%的百分比值， 0%：灰色調，100%：最大飽和度。所以0%時，不論 hue 值是多少，都會以灰階單色呈現。
L：lightness值(亮度值)
0% ~ 100% 的百分比值，0%：最暗 (暗黑)， 100%：最亮 (亮白)， 50%：正常亮度。
50%以上漸漸增加白色， 50%以下漸漸增加黑色
寫法：
background：hsl（0,100%,50%）；
HLSA：
是HLS顏色模式，再加上alpha(透明度)這個值，來指定顏色的不透明度。
0.0 ~ 1.0 允許小數一位的數值。
寫法：
background：hsla（0,100%,50%,0.5）；
以下範例提供大家作為比較：
上面一排是沒有設定alpha值的純色區塊。
下面一排是設定了alpha值的半透明區塊。
分別由左到右的寫法為：16進位色碼指定、RGB、HSL
在RGB或HSL加上alpah值是不是方便許多呢?
往常用16進位色碼寫法，要再加上透明度的時候必須多寫上opacity這個值，也還不是每個個瀏覽器都支援，又必須針對不同的瀏覽器去寫不同的設定。
CSS3是不是令我們方便許多!
文章內容截自：
http://i.see-design.com.tw/2011/04/css-rgba-hsla.html
線