CSS 顏色 (Colors)

CSS 提供多種方式來指定顏色，包括顏色名稱、十六進位色碼、RGB、RGBA、HSL 等。

顏色名稱

CSS 支援 140 多種預設的顏色名稱，可以直接使用英文名稱來指定顏色。

.box {
  color: red;
  background-color: lightblue;
  border-color: darkgreen;
}

常用的顏色名稱：

十六進位色碼 (HEX)

十六進位色碼以 # 開頭，後面接 6 位或 3 位的十六進位數字，代表紅 (R)、綠 (G)、藍 (B) 三原色的強度。

.box {
  color: #ff0000;        /* 紅色 */
  background-color: #00ff00;  /* 綠色 */
  border-color: #0000ff;      /* 藍色 */
}

每兩位數字代表一個顏色通道，範圍是 00 到 FF（0 到 255）：

• #RRGGBB
• #ff0000 = 紅色（R=255, G=0, B=0）
• #000000 = 黑色
• #ffffff = 白色

簡寫形式

如果每個通道的兩位數字相同，可以簡寫成 3 位：

#ff0000 → #f00    /* 紅色 */
#00ff00 → #0f0    /* 綠色 */
#ffffff → #fff    /* 白色 */
#336699 → #369    /* 藍灰色 */

帶透明度的 HEX

可以在後面加上兩位數字表示透明度（00 = 完全透明，FF = 完全不透明）：

#ff000080    /* 50% 透明度的紅色 */
#00000033    /* 20% 透明度的黑色 */

RGB

rgb() 函數用紅、綠、藍三個數值來指定顏色，每個值的範圍是 0 到 255。

.box {
  color: rgb(255, 0, 0);         /* 紅色 */
  background-color: rgb(0, 128, 0);   /* 深綠色 */
  border-color: rgb(100, 100, 100);   /* 灰色 */
}

RGBA

rgba() 在 RGB 的基礎上加入了透明度 (alpha) 通道，範圍是 0 到 1。

.box {
  background-color: rgba(0, 0, 0, 0.5);    /* 50% 透明的黑色 */
  background-color: rgba(255, 255, 255, 0.8);  /* 80% 透明的白色 */
}

• 0 = 完全透明
• 1 = 完全不透明
• 0.5 = 50% 透明

RGBA 常用於製作半透明的覆蓋層或背景。

HSL

hsl() 使用色相 (Hue)、飽和度 (Saturation)、亮度 (Lightness) 來指定顏色。

.box {
  color: hsl(0, 100%, 50%);      /* 紅色 */
  background-color: hsl(120, 100%, 50%);  /* 綠色 */
  border-color: hsl(240, 100%, 50%);      /* 藍色 */
}

• 色相 (H)：0 到 360 度，對應色相環上的位置
  • 0° / 360° = 紅色
  • 120° = 綠色
  • 240° = 藍色
• 飽和度 (S)：0% 到 100%，0% 是灰色，100% 是純色
• 亮度 (L)：0% 到 100%，0% 是黑色，50% 是純色，100% 是白色

HSL 的好處是比較直覺，容易調整顏色的深淺和鮮豔度。

HSLA

hsla() 在 HSL 的基礎上加入透明度。

.box {
  background-color: hsla(200, 100%, 50%, 0.3);
}

現代語法

現代 CSS 允許在 rgb() 和 hsl() 中直接加入透明度，不需要用 rgba() 或 hsla()：

/* 新語法 */
color: rgb(255 0 0 / 50%);
color: hsl(120 100% 50% / 0.5);

/* 舊語法 */
color: rgba(255, 0, 0, 0.5);
color: hsla(120, 100%, 50%, 0.5);

currentColor

currentColor 是一個特殊關鍵字，代表元素目前的 color 值。

.box {
  color: blue;
  border: 2px solid currentColor;  /* 邊框會是藍色 */
}

這在製作 SVG 圖示時特別有用，讓圖示顏色自動跟隨文字顏色。

顏色表示法對照