🎨
← 返回教學列表

現代 CSS 色彩函數：rgba()、hsl()、oklch() 及更多

· 標籤: css, color-functions, oklch, modern-css, web-development, rgba, hsl

現代 CSS 色彩函數：rgba()、hsl()、oklch() 及更多

CSS 色彩函數已經發生了巨大的演進。曾經只能在 hex、rgb() 和 hsl() 之間做選擇，如今已成為一個豐富的色彩空間和操作函數生態系統，為開發者提供了對色彩表示、插值和無障礙性前所未有的控制能力。

本指南涵蓋了 2026 年可用的每個主要 CSS 色彩函數，從熟悉的到最前沿的。

RGB 和 RGBA：主力函數

rgb() 函數使用紅-綠-藍加法色彩模型來定義顏色。它從 CSS1 開始就成為 CSS 的一部分，並且在有史以來的每個瀏覽器中都得到支援。

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

/* 現代空格分隔語法（CSS Color Level 4） */
color: rgb(255 0 0);
color: rgb(255 0 0 / 0.5);

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

現代 RGB 的主要變更

CSS Color Level 4 引入了兩個重要的改進：

  1. 空格分隔取代逗號分隔 — rgb() 函數現在接受以空格或斜線分隔的值
  2. 統一的 alpha 語法 — rgba() 別名已被棄用（但仍受支援）。rgb() 現在原生接受 alpha 通道

這種現代語法在 2020 年後發布的所有瀏覽器中都得到支援。對於新專案，請使用現代語法並完全跳過 rgba() 別名。

RGB 通道

每個 RGB 通道接受：

  • 0 到 255 的整數
  • 0% 到 100% 的百分比
  • none 關鍵字用於缺失的通道（CSS Color Level 4）

none 關鍵字在插值顏色時很有用——它告訴瀏覽器不要對該特定通道進行插值。

HSL 和 HSLA：直觀的色彩控制

HSL 代表色相（Hue）、飽和度（Saturation）、亮度（Lightness）。它使用圓柱坐標系統，自然地映射到人類思考顏色的方式。

/* H 是色相角度（0-360），S 是飽和度（0-100%），L 是亮度（0-100%） */
color: hsl(0 100% 50%);        /* 純紅色 */
color: hsl(0 100% 50% / 0.5);  /* 50% 不透明度的紅色 */

/* 帶單位的色相角度 */
color: hsl(0deg 100% 50%);
color: hsl(0rad 100% 50%);
color: hsl(0grad 100% 50%);
color: hsl(0turn 100% 50%);

色相角度參考

| 色相 | 顏色 | Hex | |-----|---------|----------| | 0 | 紅色 | #FF0000 | | 30 | 橙色 | #FF8000 | | 60 | 黃色 | #FFFF00 | | 120 | 綠色 | #00FF00 | | 180 | 青色 | #00FFFF | | 240 | 藍色 | #0000FF | | 300 | 洋紅 | #FF00FF |

HSL 是以程式化方式生成調色板的最佳選擇，因為僅更改亮度或飽和度通道就能創建一致的視覺變體。

HWB：與白色和黑色混合

HWB（色相、白色度、黑色度）是 HSL 更直觀的替代方案。您選擇一個色相，然後添加白色度和黑色度來創建色調和陰影。

color: hwb(0 0% 0%);    /* 純紅色 */
color: hwb(0 40% 0%);   /* 紅色調（添加白色） */
color: hwb(0 0% 40%);   /* 紅色陰影（添加黑色） */
color: hwb(0 20% 20%);  /* 色調（白色 + 黑色） */

HWB 在一個特定用例中比 HSL 更簡單：為品牌顏色創建色調和陰影變體。您永遠不需要考慮飽和度曲線——只需添加白色或黑色。

瀏覽器支援： HWB 在所有現代瀏覽器中都得到支援（Chrome 101+、Firefox 96+、Safari 15+）。

LAB 和 LCH：感知均勻的色彩空間

LAB（亮度、A 軸、B 軸）和 LCH（亮度、色度、色相）是感知均勻的色彩空間。這意味著兩個顏色值之間的歐幾里得距離對應於感知到的視覺差異——這是 RGB 和 HSL 無法做到的。

color: lab(50% 50 0);        /* 中紅色 */
color: lch(50% 50 0);        /* 圓柱形式中的相同顏色 */

為什麼感知均勻性很重要：

  • 漸層 — 在 LAB 或 LCH 中插值會產生平滑、自然的過渡，沒有 RGB 漸層產生的沉悶「泥濘區」
  • 色彩差異測量 — Delta E（感知差異度量）在 LAB 空間中是有意義的
  • 無障礙性 — 感知均勻性有助於預測色覺缺陷使用者將如何感知顏色

限制： LAB 和 LCH 可以產生 sRGB 色域之外的顏色。這些顏色在 sRGB 螢幕上顯示時會被裁剪，但在更寬色域的顯示器（DCI-P3、Rec. 2020）上可以正常顯示。

瀏覽器支援： Chrome 111+、Firefox 113+、Safari 15+ 支援。不支援 IE 或舊版 Edge。

OKLAB 和 OKLCH：現代感知標準

OKLCH 是由 Bjorn Ottosson 開發的 LCH 改進版本。它修復了 LCH 中的感知不均勻性，特別是對於藍色色調。OKLCH 已成為 2025-2026 年新建 CSS 專案的推薦預設色彩空間。

color: oklch(60% 0.2 30);
/* 亮度：0-100%，色度：0-~0.4，色相：0-360 */

為什麼 OKLCH 是 CSS 的最佳色彩空間

  1. 最佳的感知均勻性 — 相等的數值變化在所有色相上產生相等的視覺變化
  2. 可預測的亮度 — 相同亮度值的顏色看起來確實一樣亮
  3. 沒有泥濘漸層 — 插值在整個色相範圍內保持乾淨
  4. 預設 sRGB 安全 — 大多數 OKLCH 值會產生色域內的 sRGB 顏色
  5. 直觀的通道 — 像 HSL 但具有實際的感知準確性

OKLCH 實戰

/* 使用 OKLCH 創建平衡的色彩色階 */
--blue-100: oklch(95% 0.02 250);
--blue-300: oklch(75% 0.08 250);
--blue-500: oklch(55% 0.15 250);
--blue-700: oklch(35% 0.10 250);
--blue-900: oklch(15% 0.04 250);

請注意，每個階梯的亮度值變化大致相同（20 個百分點）。因為 OKLCH 在感知上是均勻的，這些階梯在人眼中看起來間距均勻——這是 HSL 難以實現的。

瀏覽器支援： OKLCH 在 Chrome 111+、Firefox 113+、Safari 15.4+ 中受支援。它已迅速成為最受推薦的現代色彩空間。

Color-Mix：在 CSS 中混合顏色

color-mix() 函數在指定的色彩空間中混合兩種顏色：

/* 在 sRGB 中等量混合紅色和藍色 */
color: color-mix(in srgb, red, blue);

/* 30% 主色，70% 白色 — 色調 */
color: color-mix(in oklch, var(--primary) 30%, white);

/* 使用感知色彩空間混合以獲得平滑結果 */
background: color-mix(in oklch, var(--accent) 20%, var(--surface));

in <color-space> 參數讓您控制插值空間。在大多數情況下，in oklch 能產生最佳的視覺效果。

使用情境：

  • 無需預處理器函數即可創建色調和陰影
  • 從單一色彩 token 建立元件變體
  • 動態生成懸停和啟用狀態
  • 在單一函數中創建類似漸層的效果

相對色彩語法：修改現有顏色

CSS Color Level 4 允許您通過修改各個通道從現有顏色推導出新顏色：

--primary: #3366cc;

/* 使用 OKLCH 通道 */
--primary-lighter: oklch(from var(--primary) l c calc(h + 30));
--primary-darker: oklch(from var(--primary) calc(l * 0.8) c h);

/* 使用 HSL 通道 */
--primary-light: hsl(from var(--primary) h s calc(l + 15%));
--primary-dark: hsl(from var(--primary) h s calc(l - 15%));

from <color> 關鍵字將來源顏色的通道解包到目標函數的通道中，然後您可以使用算術運算進行調整。

每個色彩空間的通道關鍵字

每個色彩空間暴露特定的通道關鍵字：

| 色彩空間 | 關鍵字 | |-------------|----------------------------------| | rgb() | r、g、b、alpha | | hsl() | h、s、l、alpha | | hwb() | h、w、b、alpha | | lch() | l、c、h、alpha | | oklch() | l、c、h、alpha | | lab() | l、a、b、alpha | | oklab() | l、a、b、alpha |

瀏覽器支援概覽（2026 年）

| 函數 | Chrome | Firefox | Safari | Edge | |----------|--------|---------|--------|------| | rgb() / hsl() | 全部 | 全部 | 全部 | 全部 | | hwb() | 101+ | 96+ | 15+ | 101+ | | lab() / lch() | 111+ | 113+ | 15+ | 111+ | | oklch() / oklab() | 111+ | 113+ | 15.4+ | 111+ | | color-mix() | 111+ | 113+ | 16.2+ | 111+ | | 相對色彩語法 | 111+ | 113+ | 16.2+ | 111+ |

所有現代色彩函數在 2026 年對不需要 Internet Explorer 支援的專案都是安全的。為了更廣泛的相容性，請使用建置步驟將現代語法轉換為 hex 或舊版 rgb()。

實用建議

  • 對於現有專案 — HSL 仍然是可讀性和功能之間的最佳平衡
  • 對於新專案 — 使用 OKLCH 作為主要色彩空間，以獲得感知準確性
  • 對於漸層 — 始終在 OKLCH 中插值以避免泥濘的過渡
  • 對於設計系統 — 將基礎顏色存儲在 OKLCH 中，使用 color-mix() 或相對語法生成變體
  • 對於 canvas/WebGL — 堅持使用 RGB，它對渲染管線來說是原生的

結論

現代 CSS 色彩函數已經改變了您在網頁上使用顏色能做什麼。OKLCH 提供了使色彩系統設計可預測的感知均勻性。color-mix() 和相對色彩語法消除了對預處理器色彩函數的需求。這些工具結合在一起，為網頁開發者提供了設計工具多年來一直擁有的相同色彩能力——現在直接在瀏覽器中。

使用我們的免費線上色彩轉換器在包括 OKLCH、LAB、HWB 和經典 HEX/RGB/HSL 在內的所有現代 CSS 色彩格式之間進行轉換。