當我在已經(jīng)忘記了還有 HSL 這么個東西，最近卻又用上了它的時候，我覺得還是有必要寫一點關于顏色的總結（不涉及 IE）
CSS 中的顏色是以光的三原色 紅-RED，綠-GREEN，藍-BLUE 為基礎表示出來的。其表示方法大致可以分為 顏色名稱，RGB，HEX，HSL 四類
顏色名稱
/* color: colorName */
p { color: red; }
這個沒太多說的，就是用顏色的 英文名稱 直接表示，名稱具體對應的 HEX值 可以 參照頁面
RGB
/*
color: rgb(red, green, blue)
color: rgba(red, green, blue, alpha)
*/
p {
color: rgb(255, 255, 255);
background-color: rgba(0, 0, 0, .5)
}
RGB 的 3 個參數(shù)分別對應 red，green，blue。它是紅綠藍三色在數(shù)值上的直觀體現(xiàn)，取值范圍為 0~255，也可以是 0%~100%，但要注意的是，數(shù)值和百分比不能混合使用，rgb(255, 0, 0 ) 換成百分比，需要寫作 rgb(100%, 0%, 0%)，否則屬于無效屬性。
RGBA 在 RGB 的基礎上增加了 alpha 屬性，用來設置透明度，取值范圍為 0~1，請不要嘗試使用百分比 :)
HEX
/* color: hex */
p { color: #ffb500; }
HEX 就是十六進制，這是頁面開發(fā)中使用頻率最高的顏色表示方法。它的值是由紅綠藍三色數(shù)值的十六進制數(shù)組合而成。這樣說可能有點繞口，讓我們把上面例子中的值拆分成 4 個部分：#，ff，b5，00：
- 第 1 部分
#相當于十六進制顏色的識別符，告訴瀏覽器后面跟上的是表示顏色的十六進制數(shù) - 第 2 部分
ff是 red 的十六進制數(shù)值，換算成十進制就是15 * 16 + 15 = 255 - 第 3 部分
b5是 green 的十六進制數(shù)值，換算成十進制就是11 * 16 + 5 = 181 - 第 4 部分
00是 blue 的十六進制數(shù)值，換算成十進制就是0 * 16 + 0 = 0
因此，HEX 與 RGB 相互轉換的過程可以分解為
#ffb500 ←→ rgb(ff, b5, 00) ←→ rgb(255, 181, 0)
而當 3 個十六進制數(shù)值的兩位數(shù)都重復時（#ff0000），可以采用簡寫形式（#f00）。
HSL
/*
color: hsl(hue, saturation, lightness)
color: hsla(hue, saturation, lightness, alpha)
*/
p {
color: hsl(0, 0%, 100%);
background-color: hsla(0, 0%, 0%, .5)
}
HSL 對于我個人來說是不太好理解的（色彩基礎弱雞）。它有 3 個參數(shù)：
- H：Hue（色調(diào)）。取值范圍為：0~360，0（或360）表示紅色，120表示綠色，240表示藍色。但實際上它是一個圓環(huán)的形式，因此當取值小于 0 或大于 360 時，這個值仍然是有效的
- S：Saturation（飽和度）。取值為：0%~100%。這個值決定了顏色的鮮艷程度，當它為 100% 時，會將當前色調(diào)完全展示出來，而隨著百分比的降低，顏色的鮮艷程度會降低，表現(xiàn)出來的視覺效果就是顏色逐漸變灰
- L：Lightness（亮度）。取值為：0%~100%。這個值和飽和度不同，并不是越高表現(xiàn)力越強。假定給它設定一個標準值為 50%，那么它在這個標準值時，表現(xiàn)出來的色調(diào)是最正的。當它高于或者低于標準值時，就會像照相一樣，曝光過度導致相片泛白，或者曝光不足導致相片發(fā)黑
所以如果用 HSL 來表示紅綠藍三色，就是 red: hsl(0, 100%, 50%) green: hsl(120, 100%, 50%) blue: hsl(240, 100%, 50%)。當你需要隨機產(chǎn)生一些比較鮮艷的顏色時，把 hue 單獨作為變量是個不錯的選擇。
和 RGBA 一樣，HSLA 也有一個 alpha 屬性來調(diào)節(jié)透明度。
另外關于 HSL 和 RGB 之間的轉換，可以 參考頁面
關于透明度
rgb 和 hsl 有相應的 rgba 和 hsla 來設置透明度，對于 顏色名稱 和 HEX 來說，就是使用 opacity，但是兩者之間是有區(qū)別的。
opacity 是針對元素的透明度，p { opacity: .5 } 這樣的設置會使元素整體透明，包括它的子元素。
而 alpha 是針對元素樣式屬性的透明度，p { background-color: rgba(0, 0, 0, .5) } 這樣的設置只會使元素的背景色透明，并不會影響到其他屬性（比如 color），也不會對子元素起效果。
其他
顏色對于前端來說其實是比較基礎的東西，它的內(nèi)容不多，但是不熟悉的話也會引起一些小麻煩。比如通過 element.style.color = '#f00' 將元素的字體設為紅色，再想通過 #f00 來操作 DOM 是不能實現(xiàn)的，因為瀏覽器（非IE）會自動將 #f00 轉換成 rgb(255, 0, 0) 之后再加入到元素的行間樣式中 :)
