CSS顏色的四種寫法

在 CSS 中，顏色值可以使用顏色名、百分比、數位和十六進位制數值，共有四種寫法。

1) 使用顏色名

雖然目前已經命名的顏色約有 184 種，但真正被各種瀏覽器支援，並且作為 CSS 規範推薦的顏色名稱只有 16 種，如下表所示。

表1：CSS 規範推薦的顏色名稱

名 稱	顏 色	名 稱	顏 色	名 稱	顏 色
black	純黑	silver	淺灰	navy	深藍
blue	淺藍	green	深綠	lime	淺綠
teal	靛青	aqua	天藍	maroon	深紅
red	大紅	purple	深紫	fuchsia	品紅
olive	褐黃	yellow	明黃	gray	深灰
white	殼白

不建議在網頁中使用顏色名，特別是大規模的使用，避免有些顏色名不被瀏覽器解析，或者不同瀏覽器對顏色的解釋差異。

2) 使用百分比

這是一種最常用的方法，例如：

color: rgb(100%, 100%, 100%);

這個宣告將紅、藍、綠 3 種原色都設定為最大值，結果組合顯示為白色。相反，可以設定rgb(0%, 0%, 0%)為黑色。3 個百分值相等將顯示灰色，同理哪個百分值大就偏向哪個原色。

3) 使用數值

數位範圍從 0~255，例如：

color: rgb(255, 255, 255);

上面這個宣告將顯示白色，相反，可以設定為rgb(0, 0, 0)，將顯示黑色。3 個數值相等將顯示灰色，同理哪個數值大哪個原色的比重就會加大。

4) 十六進位制顏色

這是最常用的取色方法，例如：

color: #ffffff;

其中要在十六進位制前面加一個#顏色符號。上面這個宣告將顯示白色，相反，可以設定#000000為黑色，用 RGB 來描述：

color: #RRGGBB;

從 0~255，實際上十進位制的 255 正好等於十六進位制的 FF，一個十六進位制的顏色值等於 3 組這樣的十六進位制的值，它們按順序連線在一起就等於紅、藍、綠3種原色。