色彩格式詳解：HEX、RGB、HSL 轉換指南

螢幕上的每個像素都由數字定義。但同一個顏色可以用多種格式表示 — HEX、RGB、HSL、HSB 等等。瞭解這些格式以及何時使用每一種，能讓你成為更高效的開發者和設計師。

色彩模型

RGB（紅、綠、藍）

RGB 是一種基於螢幕運作原理的加法色彩模型。每個像素都是紅、綠、藍三種光以不同強度組合而成的。

color: rgb(59, 130, 246);       /* 純藍色 */
color: rgba(59, 130, 246, 0.5); /* 50% 透明藍色 */

每個通道的範圍從 0（無）到 255（最大強度）：

• rgb(0, 0, 0) = 黑色（無光）
• rgb(255, 255, 255) = 白色（全部光線）
• rgb(255, 0, 0) = 純紅色

適用場景：程式化色彩操作、畫布運算、影像處理。RGB 直接對應硬體，使計算更加直觀。

HEX（十六進位）

HEX 就是用十六進位表示法寫的 RGB。每對字元代表一個通道（00-FF）：

color: #3B82F6;   /* 與 rgb(59, 130, 246) 相同的藍色 */
color: #3B82F680; /* 含 50% 透明度（8 位數十六進位） */

轉換是直接的：3B = 59、82 = 130、F6 = 246。

簡寫：當每對數字相同時，可以縮寫：#AABBCC → #ABC

適用場景：CSS 樣式表（最常見的格式）、設計交付、品牌規範。HEX 簡潔且被廣泛理解。

HSL（色相、飽和度、明度）

HSL 以人類感知的方式表示顏色。不是混合光通道，而是透過屬性來描述顏色：

• 色相：色輪上的角度（0-360°）。0° = 紅色、120° = 綠色、240° = 藍色
• 飽和度：顏色的鮮豔程度（0% = 灰色、100% = 完全飽和）
• 明度：顏色的明暗程度（0% = 黑色、50% = 純色、100% = 白色）

color: hsl(217, 91%, 60%);       /* 同樣的藍色 */
color: hsla(217, 91%, 60%, 0.5); /* 含透明度 */

適用場景：建立色彩調色盤、程式化調整顏色（例如透過調整明度來建立懸停狀態）、無障礙色彩設計。HSL 是人類思考色彩時最直覺的格式。

HSB/HSV（色相、飽和度、亮度/數值）

HSB 與 HSL 類似，但對亮度的定義不同。在最大亮度時，你得到純色；在最小亮度時，你得到黑色。這個模型被 Figma、Sketch 和 Photoshop 等設計工具使用。

與 HSL 的主要區別：在 HSL 中，明度 50% 產生純色。在 HSB 中，亮度 100% 產生純色。這使得 HSB 在某些任務中更直覺，但在 CSS 中較不實用（CSS 原生不支援 HSB）。

格式之間的轉換

格式之間的轉換涉及簡單的數學運算。以下是主要的對應關係：

HEX 轉 RGB

將十六進位字串分成成對字元，然後將每對轉換為十進位：

#3B82F6 → 3B=59, 82=130, F6=246 → rgb(59, 130, 246)

RGB 轉 HSL

演算法將 RGB 值正規化到 0-1，找到最大和最小通道，然後根據哪個通道為主來計算色相，從範圍計算飽和度，從平均值計算明度。

與其手動實作這些轉換，不如使用我們的色彩轉換器即時在任何格式之間轉換。

實際應用

使用 HSL 建立色彩調色盤

HSL 非常擅長產生一致的調色盤。保持色相不變，調整飽和度和明度：

:root {
  --blue-100: hsl(217, 91%, 95%);  /* 最淺 */
  --blue-200: hsl(217, 91%, 85%);
  --blue-300: hsl(217, 91%, 75%);
  --blue-400: hsl(217, 91%, 65%);
  --blue-500: hsl(217, 91%, 60%);  /* 基色 */
  --blue-600: hsl(217, 91%, 50%);
  --blue-700: hsl(217, 91%, 40%);
  --blue-800: hsl(217, 91%, 30%);
  --blue-900: hsl(217, 91%, 20%);  /* 最深 */
}

這種方法保證了感知上一致的漸進步階。想手動建立完整的調色盤？我們的色彩調色盤產生器能自動完成這個過程。

懸停與聚焦狀態

使用 HSL，建立互動狀態變得輕而易舉：

.button {
  background: hsl(217, 91%, 60%);
}
.button:hover {
  background: hsl(217, 91%, 55%); /* 深 5% */
}
.button:active {
  background: hsl(217, 91%, 50%); /* 深 10% */
}

無障礙與對比度

WCAG 2.1 要求一般文字的最低對比度為 4.5:1，大型文字為 3:1。HSL 中的明度分量讓你能直覺地確保足夠的對比度：

• 淺色背景（明度 > 90%）搭配深色文字（明度 < 30%）效果好
• 深色背景（明度 < 20%）搭配淺色文字（明度 > 80%）效果好

現代 CSS 色彩函式

CSS 現在支援強大的色彩操作函式：

/* 相對色彩語法（CSS Color Level 4） */
.element {
  --base: hsl(217 91% 60%);
  background: hsl(from var(--base) h s calc(l - 10%));
}

/* oklch - 感知均勻的色彩空間 */
color: oklch(0.7 0.15 250);

oklch 格式正逐漸被採用，因為它在感知上是均勻的 — 相等的數值變化產生相等的感知變化，不像 HSL 中 10% 的明度變化在不同色相值下看起來不同。

常見問題

在 CSS 中應該使用哪種色彩格式？

對大多數專案來說，簡單顏色使用 HEX，需要建立變化或程式化操作顏色時使用 HSL。HEX 是最精簡且最廣泛認知的格式。HSL 在建立色彩系統時更具可讀性。現代 CSS 支援所有格式，可以互換使用。

HSL 和 HSB 有什麼區別？

HSL 和 HSB 都使用色相和飽和度，但它們對亮度的定義不同。在 HSL 中，明度 0% 是黑色、50% 是純色、100% 是白色。在 HSB 中，亮度 0% 是黑色、100% 是純色（單靠亮度無法達到白色）。CSS 原生支援 HSL；HSB 主要用於 Figma 和 Photoshop 等設計工具。

相關資源

• 色彩轉換器 — 即時在 HEX、RGB、HSL 和 HSB 之間轉換
• 色彩調色盤產生器 — 產生和諧的色彩調色盤
• CSS 漸層指南 — 使用 CSS 建立精美漸層