這節我們來講一下顏色，因為我們後面學習 CSS 樣式時，會常用到顏色，顏色也是網頁中不可或缺的一個元素。例如我們可以為某個字體設定顏色，為元素的邊框設定顏色，設定元素的背景顏色等。要想一個網頁好看，肯定是需要為它添加一些色彩的。

顏色值

顏色是透過對紅、綠和藍光的組合來顯示的。我們一般會透過下面三種方式來規定 CSS 中的顏色：

顏色名稱

HTML 和 CSS 顏色規格中定義了 147 種顏色名，其中有 17 種標準顏色，加上 130 種其他顏色。

例如 red 紅色、green 綠色、blue 藍色等，因為顏色名稱太多了，這裡就不一一給大家列出來啦。我們主要講一下如何設定顏色。

範例：

例如透過顏色名，將字體顏色設定為紅色：

color:red;

或將元素的背景顏色設定為粉紅色：

background-color: pink;

使用的使用很簡單，直接在 CSS 屬性後面接顏色名即可，不需要加別的修飾符。

十六進位顏色值就是透過十六進位來表示顏色，十六進位顏色的規定為：#RRGGBB。其中 RR 是紅色、GG 綠色、BB 藍色，十六進位整數規定了顏色的成。所有數值必須介於 0-9 與 A-F 之間。

十六進位值使用三個雙位數來編寫，並且要以 # 號開頭。例如 #000000 黑色、#FF0000 紅色、#00FF00 綠色、#0000FF 藍色。

而當雙位數相同時（一二位相同、三四位相同、五六位相同），可以縮寫，例如 #000000 可以縮寫為 #000、#FF0000 可以縮寫為 F00 等。但是像 #101010 這種就不能縮寫。

範例：

例如分別將字體顏色設定為紅色、綠色、藍色：

color:#FF0000;color:#00FF00;color:#0000FF;

上述程式碼也可以簡寫成：

color:#F00;color:#0F0;color:#00F;

RGB 顏色值是透過rgb(red, green, blue) 來規定的，三個參數分別定義紅、綠、藍的強度，參數值可以是介於0 與255之間的整數，或是0% 到100 % 的百分比。

例如 rgb(255,0,0) 表示紅色、 rgb(0,0,255) 表示藍色等。

範例：

例如將背景顏色設定為紅色、綠色、藍色：

background-color:rgb(255,0,0);background-color:rgb(0,255,0);background-color:rgb(0,0,255);

< h1 class="pgc-h-arrow-right">總結

上述就是我們所講的三種規定CSS 中顏色的方法啦，可以設定使用的顏色有很多，但我們不可能將這些顏色值全部記住，所以其實只需要搞清楚顏色值是怎麼使用的就可以啦。

像我們平常工作中，一般會由設計師將網頁設計好，然後將設計圖給我們，我們在製作網頁的時候，就只需要透過顏色吸取器吸一下設計圖中的顏色，然後就知道是什麼顏色啦。