🎨
← 返回教學列表

HEX vs RGB vs HSL：應該使用哪種色彩格式？

· 標籤: hex-vs-rgb-vs-hsl, color-formats, css, web-development, color-converter

HEX vs RGB vs HSL：應該使用哪種色彩格式？

CSS 提供了多種定義顏色的方式，但最常見的三種格式是 HEX、RGB 和 HSL。每種格式都有獨特的優勢，了解何時使用每種格式可以大幅提升樣式表的可維護性以及創建動態色彩系統的能力。本指南將詳細分析每種格式，讓您可以在任何情況下選擇最合適的格式。

HEX 色彩格式：業界標準

HEX（十六進位）顏色是網頁設計中使用最廣泛的格式。hex 顏色以 # 開頭，後跟六個十六進位數字，按順序表示紅色、綠色和藍色值。

#FF5733
  • #FF — 紅色（十進位 255）
  • #57 — 綠色（十進位 87）
  • #33 — 藍色（十進位 51）

HEX 變體

HEX 支援多種記法以滿足不同需求：

/* 標準六位數字 hex */
color: #FF5733;

/* 簡寫 — 相同配對的數字折疊為三位 */
color: #F53; /* 展開為 #FF5533 */

/* 帶 alpha 通道的八位數字 hex */
color: #FF573380; /* 50% 不透明度 */

簡寫 HEX 在每個配對使用相同字元時有效：#AABBCC 變成 #ABC。這純粹是一種節省空間的慣例，所有瀏覽器都支援。

八位數字 HEX（#RRGGBBAA）添加了 alpha 透明度。alpha 值範圍從 00（完全透明）到 FF（完全不透明）。八位數字 hex 在所有現代瀏覽器中都有出色的瀏覽器支援。

四位數字簡寫（#RGBA）也存在：#F538 展開為 #FF553388。

何時使用 HEX

  • 從設計工具複製貼上 — Figma、Sketch 和 Adobe XD 預設都輸出 hex
  • 硬編碼的品牌色彩 — 對於永不改變的值，hex 明確且緊湊
  • 文件和模型 — hex 是設計師和開發者之間最容易辨識的格式
  • CSS 自訂屬性 — 以 hex 儲存品牌 token 是常見做法

何時避免使用 HEX

  • 程式化色彩操作 — 調整個別通道需要字串解析
  • 創建色彩系統 — 生成較亮或較暗的變體涉及非平凡的數學運算
  • 傳達色彩意圖 — hex 不提供關於顏色的任何語義資訊

RGB 色彩格式：通道控制

RGB 代表紅、綠、藍。在 CSS 中，它以函數形式撰寫，值範圍為 0 到 255 或百分比（0% 到 100%）。

/* 舊版逗號分隔語法 */
color: rgb(255, 87, 51);
color: rgba(255, 87, 51, 0.5);

/* 現代空格分隔語法 */
color: rgb(255 87 51);
color: rgb(255 87 51 / 0.5);

/* 百分比值 */
color: rgb(100% 34% 20%);

現代 RGB 語法改進

CSS Color Level 4 規範以兩種重要方式現代化了 rgb() 函數：

  1. 空格分隔的值 — 不再需要逗號，使語法更簡潔
  2. 斜線分隔的 alpha — 不再需要 rgba() 別名；rgb() 現在接受可選的 alpha 通道

舊版和現代語法都得到完全支援，但建議對新程式碼使用現代語法。

何時使用 RGB

  • Canvas 和 WebGL — 圖片資料 API 以 RGB 返回像素值
  • 數值色彩調整 — 當您將紅色、綠色和藍色值作為單獨變數存儲時
  • 從設計規範翻譯 — 某些設計系統以 RGB 三元組指定顏色
  • 使用色彩選擇器 — 許多色彩選擇器 UI 使用 0-255 滑桿

何時避免使用 RGB

  • 創建一致的調色板 — 獨立調整所有三個通道使一致的調整變得困難
  • 人類可讀性 — rgb(123, 45, 67) 不會立即給人它所代表顏色的感覺

HSL 色彩格式：人性化的顏色

HSL 代表色相、飽和度和亮度。這種格式對人類來說更直觀，因為它將顏色本身（色相）與其強度（飽和度）和明亮度（亮度）分開。

/* 舊版語法 */
color: hsl(12, 100%, 60%);
color: hsla(12, 100%, 60%, 0.5);

/* 現代語法 */
color: hsl(12 100% 60%);
color: hsl(12 100% 60% / 0.5);

了解 HSL 通道

色相（0-360） — 色輪上的顏色角度。這是「它是什麼顏色」的組成部分：

| 色相值 | 顏色 | |-----------|---------| | 0 或 360 | 紅色 | | 30 | 橙色 | | 60 | 黃色 | | 120 | 綠色 | | 180 | 青色 | | 240 | 藍色 | | 300 | 洋紅 |

飽和度（0-100%） — 顏色的強度或鮮豔程度。0% 產生灰色調；100% 是該色相最純淨的版本。

亮度（0-100%） — 顏色的明暗程度。0% 始終是黑色，50% 是該色相的「正常」版本，100% 始終是白色。

為什麼 HSL 更適合色彩系統

HSL 使在 HEX 或 RGB 中困難的任務變得極其簡單：

/* 主要品牌顏色 */
--brand: hsl(220, 80%, 50%);

/* 懸停狀態 — 稍微亮一點 */
--brand-hover: hsl(220, 80%, 60%);

/* 啟用狀態 — 稍微暗一點 */
--brand-active: hsl(220, 80%, 40%);

/* 停用狀態 — 去飽和 */
--brand-disabled: hsl(220, 30%, 70%);

/* 背景色調 — 非常亮 */
--brand-bg: hsl(220, 40%, 95%);

使用 HSL，每個變體只需更改一個變數。 這在 HEX 中是不可能的，在 RGB 中也很繁瑣。

何時使用 HSL

  • 創建調色板 — HSL 是設計 token 生成的事實標準
  • 主題和深色模式 — 交換亮度值來創建深色模式變體
  • 懸停和焦點狀態 — 以固定百分比調整亮度
  • 無障礙調整 — 增加亮度對比度而不改變顏色
  • 互動式色彩選擇器 — HSL 滑桿比 RGB 滑桿更直觀

快速比較表

| 特性 | HEX | RGB | HSL | |---------|-----|-----|-----| | 像素級別可讀性 | 差 | 中等 | 好 | | 通道語義 | 不透明 | 數值 | 感知 | | 程式化調整 | 困難 | 中等 | 簡單 | | Alpha 透明度 | 八位數字 hex | rgb(R G B / A) | hsl(H S% L% / A) | | 瀏覽器支援 | 優秀 | 優秀 | 優秀 | | 現代語法 | 無 | 有 | 有 | | 設計工具預設 | 是 | 常見 | 罕見 | | 色彩系統適用性 | 差 | 尚可 | 優秀 |

瀏覽器支援：三種都很安全

HEX、RGB 和 HSL 享有相同的瀏覽器支援。這三種格式在 Internet Explorer 9 以來發布的每個瀏覽器中都能運作。現代空格分隔語法（rgb(255 0 0 / 0.5)）在 2020 年後發布的所有瀏覽器中都受支援。沒有任何相容性理由去選擇其中一種而不是另一種。

實用決策框架

根據您正在做的事情選擇格式：

  1. 從設計模型複製？ 使用 HEX — 這是設計工具輸出的格式。
  2. 建立設計 token 系統？ 使用 HSL — 它使調色板生成變得簡單。
  3. 使用 canvas 或圖片資料？ 使用 RGB — pixel API 原生使用 RGB。
  4. 撰寫一次性樣式規則？ 使用 HEX — 它是最緊湊的。
  5. 創建動態色彩過渡？ 使用 HSL — 插值色相創建彩虹效果；插值 RGB 會產生泥濘的中間色。

在任何格式之間轉換

使用我們的免費線上色彩轉換器在 HEX、RGB、HSL 和其他 CSS 色彩格式之間即時轉換。不再需要手動數學計算或瀏覽器開發者工具的繁瑣操作。