顏色單位

由於 CSS 負責控制網頁的「樣式」，因此「設定頁面或元素的顏色」主要也是 CSS 負責處理，這篇教學會介紹 CSS 最常使用的十六進位色碼的色彩單位，以及各種預設的色彩名稱，只要熟悉相關寫法，就能輕鬆掌握網頁的顏色。

快速導覽：

• 十六進位色碼
• 基本色彩名稱
• 其他色彩函式

十六進位色碼

十六進位色碼是網頁最基本的顏色單位，主要將三原色的紅、綠、藍 ( RGB ) 色光分別分成 0～255 共 256 等分，並使用十六進位 ( 00～FF ) 的方式呈現這 256 等分，撰寫時開頭加上「#」符號，英文字母大小寫不拘，寫法如下圖所示：

如果三種顏色的「三組代碼兩兩相同」，則可將六碼簡寫成「三碼」，例如「#FF0000」可寫成「#F00」，「#556677」可寫成「#567」，但只要有一組顏色代碼不是兩兩相同，就必須維持六碼型態，換句話說十六進位色碼只會有「六碼」和「三碼」。下方的範例使用十六進位色碼，替不同元素加上不同的顏色。

<!-- HTML 程式碼 -->
<ul>
  <li>apple</li>
  <li>banana</li>
  <li>orange</li>
</ul>

<!-- CSS 程式碼 -->
<style>
h2 {color: #F00;}          /* 等同 #FF0000 */
h3 {
  color: #F9AB00;
  background-color: #666;  /* 等同 #666666 */
}
li {color: #006699;}       /* 等同 #069 */
</style>

隨著瀏覽器的進步，目前不少瀏覽器也支援「八碼」的十六進位色碼，多出來兩碼為「透明度」，數值越高透明度越低 00 表示全透明，FF 表示不透明，下方的範例會呈現八碼的寫法：

線上展示：https://codepen.io/oxxo/pen/rNgmGEy

<!-- HTML 程式碼 -->
<ul>
  <li>apple</li>
  <li>banana</li>
  <li>orange</li>
</ul>

<!-- CSS 程式碼 -->
<style>
  h2 {color: #f005;}          /* 等同 #FF000055 */
  h3 {
    color: #f9ab00FF;
    background-color: #666A;  /* 等同 #666666AA */
  }
  li {color: #00669922;}      /* 等同 #0692 */
</style>

基本色彩名稱

W3C 預設定義了十六個基本的色彩名稱，只要輸入色彩名稱就可以呈現對應的顏色，此外 W3C 後來也擴充了許多色彩名稱，詳細參考：CSS Extended colors。

下方的範例使用色彩名稱的寫法：

<!-- HTML 程式碼 -->
<ul>
  <li>apple</li>
  <li>banana</li>
  <li>orange</li>
</ul>

<!-- CSS 程式碼 -->
<style>
  h2 {color: red;}
  h3 {
    color: purple;
    background-color: yellow;
  }
  li {color: teal;}
</style>

其他色彩函式

通常在設定 CSS 顏色時，大多用到十六進位色碼或 rgb() 就差不多處理完成，但是除了使用十六進位色碼表現色彩，CSS 還提供了多種定義顏色的函式，透過不同色域或色彩數值的定義，讓網頁的顏色更加舒服鮮明，關於這些色彩函式，可以參考「CSS 函式 ( 色彩模型 )」教學，或點擊下方列表的連結查看教學：

下方的範例使用不同的色彩函式：

<!-- HTML 程式碼 -->
<ul>
  <li>apple</li>
  <li>banana</li>
  <li>orange</li>
</ul>

<!-- CSS 程式碼 -->
<style>
  h2 {color: rgb(255,0,0);}
  h3 {
    color: lab(100% -125 125 / 0.2);
    background-color: hsl(120, 50%, 30%); 
  }
  li {color: lch(100% 100 0);}
</style>

除了單一色彩，CSS 也能使用「漸層色」函式來產生線性漸層、放射漸層或重複漸層等色彩效果，讓網頁的色彩更豐富更多變化，關於漸層色函式，詳細參考「CSS 函式 ( 漸層色 )」教學，或點擊下方列表的連結查看教學：

下方的範例將背景色套用漸層效果：

<!-- HTML 程式碼 -->
<ul>
  <li>apple</li>
  <li>banana</li>
  <li>orange</li>
</ul>

<!-- CSS 程式碼 -->
<style>
  h2, h3, ul {
    width: 200px;
    height: 80px;
  }
  h2 {background: linear-gradient(0deg, red 0%, yellow 100%); }
  h3 {background: linear-gradient(red, yellow, green, blue, purple);}
  ul {background: radial-gradient(circle closest-corner at top , red, black);}
</style>

小結

十六進位色碼是 CSS 最基本也最常見的色彩單位，對於第一次使用的人或許不太熟悉，但只要常常使用，有時看到色碼就等同看到顏色一樣，這也是許多網頁設計師特有的「單靠色碼就能配色」的特殊能力。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～