參考資料：
- w3cschool
- 《CSS揭秘》
- 【CSS進階】CSS 顏色體系詳解——Coco
請注意，如果你了解整個顏色體系奥洼，那么大俠巷疼，這篇文章可能不適合你，請繞道灵奖，節(jié)省時間到別地去吧~~~
我之前的知識庫的顏色體系
在之前嚼沿，我的CSS知識體系中的顏色體系只有colorName、rgb瓷患、rgba骡尽、hex、transparent擅编，考慮到可能有些同學(xué)對這幾種區(qū)分不是特別清楚攀细，我在這里在一些簡單的講解箫踩。
- transparent：用來指定全透明色彩。transparent是全透明黑色(black)的速記法谭贪，即一個類似rgba(0,0,0,0)這樣的值境钟。
- colorName：用顏色名稱來指定顏色
- HEX：#RRGGBB 或 #RGB.三個參數(shù)，取值范圍為：00 - FF俭识。
參數(shù)必須是兩位數(shù)慨削。對于只有一位的，應(yīng)在前面補零套媚。
如果每個參數(shù)各自在兩位上的數(shù)字都相同缚态，那么本單位也可縮寫為 #RGB 的方式。例如：#FF8800 可以縮寫為 #F80凑阶。
此色彩模式與RGB色彩模式不同猿规。 - RGB：RGB記法衷快。RGB(R,G,B)三個參數(shù)宙橱，正整數(shù)值的取值范圍為：0 - 255。百分?jǐn)?shù)值的取值范圍為：0.0% - 100.0%蘸拔。
- RGBA:RGBA(R,G,B,A)
取值：
R：紅色值师郑。正整數(shù) | 百分?jǐn)?shù)
G：綠色值。正整數(shù) | 百分?jǐn)?shù)
B：藍色值调窍。正整數(shù) | 百分?jǐn)?shù)
A：Alpha透明度宝冕。取值0~1之間。
現(xiàn)在
hsl和hsla
除了之前表示法邓萨，顏色也可以使用 hsl() 表示地梨。hsl()被定義為色相-飽和度-明度（Hue-saturation-lightness），hsla() 多一個 a 缔恳，表示其透明度宝剖，取值為 0-1。由于hsl和rgb類似的語法結(jié)構(gòu)歉甚，所以很多地方拿兩個作比較万细。hsl 相比 rgb 的優(yōu)點是更加直觀：HSL色彩模式是人類對顏色最直接的感知。你可以估算你想要的顏色纸泄，然后微調(diào)赖钞。它也更易于創(chuàng)建相稱的顏色集合。
取值：
- Hue(色調(diào))聘裁。0(或360)表示紅色雪营，120表示綠色，240表示藍色衡便，也可取其他數(shù)值來指定顏色献起。取值為：0 - 360
- S：Saturation(飽和度)。取值為：0.0% - 100.0%
- L：Lightness(亮度)。取值為：0.0% - 100.0%
hsl 的顏色模型通常由一個圓柱體表示：
既然要用征唬，那么其兼容性怎么樣呢捌显？
該高興的是，HSL被現(xiàn)代瀏覽器較好的支持总寒，而且不需要任何前綴扶歪，IE6-IE7不支持。請見下圖：
這里再對比一下
hsla的兼容性：
所以摄闸，在用之前一定要明確一下善镰，不然樣式掛了就GG了。
rgb 到 hsl 的轉(zhuǎn)換
??這里有個小 tips 可能有些人不知道年枕，在開發(fā)階段我們只有一個 rgb 值炫欺，但是希望轉(zhuǎn)換成 hsl 值，使用 chrome 開發(fā)者工具可以很便捷的做到熏兄，我們只需要選中我們想轉(zhuǎn)換的顏色值品洛，按住鍵盤左 shift，點擊這個顏色表示框摩桶，即可進行轉(zhuǎn)換桥状。
HSLA模式和RGBA模式與Opacity的區(qū)別
??其實HSLA模式和RGBA模式就是HSL模式和RGB模式增加一個opacity值，opacity 的Alpha值表示不透明度硝清，取值在0到1之間辅斟。
??HSLA模式和RGBA模式與Opacity的區(qū)別就是前兩者不回影響子類的透明度；而Opacity會影響子類的透明度芦拿，從而導(dǎo)致子類元素的顏色產(chǎn)生色差士飒，所以為了避免出現(xiàn)這種情況，我們避免在設(shè)置Opacity值的div下包含子類（可以用絕對定位加層級解決這個問題）蔗崎。
HSLA模式和RGBA模式與Opacity在IE6-IE8都不支持酵幕，但是我們可以利用濾鏡實現(xiàn)透明，如下：
.eml{
background-color:red;
opacity: 0.3;/*除了IE蚁趁，但是IE9支持*/
filter:alpha(opacity=30);/*IE都支持裙盾，IE6不支持，可以使用Alpha透明圖片作為背景*/
}
