圖解css表示顏色的4種方式:顏色名稱、十六進位值、rgb和hsl函數

當我們在編寫css樣式規則的時候，很多情況下都是在指定顏色。比如，指定元素的背景色、字體的顏色、邊框的顏色和陰影的顏色等等。所以，我們需要一種表示方法來表示我們要使用哪一種顏色。

今天我們就來講解一下css中4種基本的表示顏色的方式，它們分別是：顏色的英文名稱、十六進位顏色值、rgb顏色函數和hsl顏色函數。

1. 顏色的英文名稱

css已經預定義好了一百多種常見顏色的英文名稱，我們可以直接使用它們。比如，red（紅色）、purple（紫色）、yellow（黃色）等等。而且這些名稱是不區分大小寫的，比如RED、rED、Red等都相當於red。

使用顏色名稱非常直觀明了，這是最簡單、最直接的顏色表示方式。但是自然界中的顏色有幾乎無窮種，因此絕大多數的顏色在css中都沒有對應的名稱。而且即使是在那些命了名的顏色中也有很多顏色的名稱是很難記住的，比如CornflowerBlue（矢車菊藍）、DarkOliveGreen（暗橄欖綠）等等。

圖1 部分顏色的英文名稱

2. 十六進位顏色值

十六進位顏色值形如#ff00cc這樣，它以井號（#）開頭且後面跟著6個十六進位的數字；它的含義建立在RGB顏色模式之下。

這些數字中的前兩位、中間兩位和後兩位分別代表紅色（Red）、綠色（Green）和藍色（Blue）三種基本色的成分值，而兩位十六進位數字正好能表示0~255的值。比如#ff00cc中，ff代表紅色成分值為255，00代表綠色的成分值為0，cc代表藍色的成分值為204。

對於大於或等於10的十六進位數字（a~f），即可以用大寫形式也可以用小寫形式，甚至大小寫混合都是可以的。比如，#FF00CC、#Ff00cC等也是正確的十六進位顏色值。不過，我們一般建議使用小寫形式。

如果十六進位顏色值中每組數字中的兩位都是相同的數字，那麼該十六進位值可以簡寫為3位的形式。比如，#ff00cc可以簡寫為#f0c。但要注意，如果任何一組數字中的兩位不同，那麼就不能簡寫。比如，#ff8c00就不能簡寫為#f8c0。

圖2展示了用十六進位表示的部分顏色，因為#ff00cc可以簡寫為#f0c，所以你可以看到第1個色塊和第3個色塊的顏色相同。但是#ff8c00就不能簡寫為#f8c0，因為即便它的第1組和第3組十六進位數中的兩個數字相同，但是中間那一組的兩個數字卻為8和c，是不相同的。如果你將某個顏色表示為#f8c0，那麼將產生css語法錯誤。

圖2 十六進位表示的部分顏色

3. rgb顏色函數

rgb顏色函數和十六進位顏色值原理是相同的，只是表示方式不一樣而已。rgb顏色函數其實包含兩個函數：rgb()和rgba()。它們的語法如下所示：

rgb(red, green, blue);

rgba(red, green, blue, alpha);

這兩個函數共同的參數red、green、blue分別代表的是RGB顏色模式中紅、綠、藍三種基本色的成分值。它們要麼全為整數形式要麼全為百分比形式，而不能是這兩種形式的混合，否則就是錯誤的css語法。當為整數時，3個參數的取值範圍都為0~255；當為百分比時，3個參數的取值範圍都為0%~100%，且即便是0%也要寫成帶百分號的形式而不能寫成0；其中100%在數值上等同於整數形式的255。

注意，當這3個參數為百分比形式的時候，一定要寫成帶百分號的形式，而不能寫成0~1之間的小數的形式。否則，這些參數會被當作是整數0或1。比如rgb(0.3, 0.3, 1.0)其實等同於rgb(0, 0, 1)而不是rgb(30%, 30%, 100%)。

rgba()函數名中最後的a代表透明（alpha通道）的意思，它的第4個參數alpha用於指定該顏色的透明程度。alpha參數的取值範圍為0~1之間的小數值，其中0為完全透明而1為完全不透明。rgb()函數因為不能指定透明度，所以它表示的顏色是完全不透明的。

圖3展示了用某些參數調用rgb顏色函數的結果，我們再次強調一下如果參數是百分比的形式，那麼就絕不能寫成是0~1之間的小數。它們所代表的含義是不相同的，這通過前兩個色塊的不同顏色就能看出來。後面3個顏色對比了對同一個顏色指定不同透明度的效果。

圖3 使用rgb顏色函數的效果

4. hsl顏色函數

hsl顏色函數建立在HSL顏色模式之下，它其實也包含兩個具體的函數：hsl()和hsla()。它們的語法如下所示：

hsl(hue, saturation, lightness);

hsla(hue, saturation, lightness, alpha);

這兩個函數共同的參數hue、saturation、lightness分別代表HSL顏色模式下的色相、飽和度、亮度三種屬性的值。其中hue必須是整數，取值範圍為0~360；saturation和lightness必須為百分比形式，取值範圍為0%~100%，且即便是0%也要寫成帶百分號的形式而不能寫成0。

注意，hsl顏色函數的第2個和第3個參數必須寫成百分比形式，而不能寫成是0~1之間的小數形式，就算是0也要寫成是0%。否則，就會導致css的語法錯誤。

其中hsla()函數中的alpha參數和rgba()函數中的alpha參數的意義是一樣的。取值範圍也是0~1之間的小數，其中0為完全透明而1為完全不透明。此外，hsl()函數表示的顏色也和rgb()函數一樣是完全不透明的。

注意，經過測試，rgba()和hsla()函數中的alpha參數既可以寫成0~1之間的小數形式也可以寫成百分比形式，這和其它參數的形式無關。我們建議alpha參數還是寫成小數形式較好，但其他人可能寫成百分比形式。

圖4展示了用某些參數調用hsl顏色函數的結果，其中後3個色塊表示的是不同透明度的同一顏色。

圖4 使用hsl顏色函數的效果

（完