顏色格式轉換指南：HEX、RGB、HSL、OKLCH 全搞定

顏色格式概覽

Web 開發中常用的顏色格式：

格式	範例	特點
HEX	`#FF6B35`	最常見，緊湊
RGB	`rgb(255, 107, 53)`	直覺，通道值 0-255
HSL	`hsl(16, 100%, 60%)`	色相/飽和度/亮度，調色直覺
OKLCH	`oklch(0.68 0.17 37)`	感知均勻，現代 CSS 推薦

不同格式表達的是同一個顏色，只是座標系統不同。

HEX 格式詳解

HEX 使用十六進位表示 RGB 三通道：

#FF6B35
 ↑ ↑ ↑
 R G B  → 每通道 00-FF（0-255）

3 位簡寫：#F63 等價於 #FF6633
4 位簡寫帶 Alpha：#F63A 等價於 #FF6633AA
8 位完整帶 Alpha：#FF6B3580（80 = 50% 透明度）

RGB 與 Alpha 通道

RGB 直接對應顯示器三原色：

rgb(255, 107, 53)          /* 不透明 */
rgba(255, 107, 53, 0.5)    /* 50% 透明 */
rgb(255 107 53 / 50%)      /* 現代語法 */

Alpha 通道：1 = 完全不透明，0 = 完全透明。現代 CSS 推薦用 rgb() + 空格分隔 + / 表示透明度。

HSL：直覺式調色

HSL 將顏色分解為色相、飽和度、亮度：

參數	範圍	含義
H（色相）	0-360°	色輪角度：0=紅, 120=綠, 240=藍
S（飽和度）	0-100%	0%=灰色, 100%=純色
L（亮度）	0-100%	0%=黑色, 50%=純色, 100%=白色

調色技巧：

想要同色系深淺？固定 H 和 S，調整 L
想要柔和色調？降低 S 值
想要互補色？H 值 ± 180°

OKLCH：感知均勻的新標準

OKLCH 是 CSS Color Level 4 引入的顏色空間，基於人眼感知建模：

優勢	說明
感知均勻	亮度從 0.5 到 0.6 的視覺差異與 0.7 到 0.8 一致
色域更廣	支援 P3 等廣色域顯示器
調色可預測	固定 L 調 C/H，亮度視覺不變

oklch(0.68 0.17 37)
       ↑    ↑   ↑
       L    C   H  → 亮度/色度/色相

HSL 的 L=50% 在不同色相下視覺亮度差異巨大，OKLCH 修復了這個問題。

使用顏色轉換工具

第一步：開啟工具

造訪顏色轉換工具，輸入任意格式的顏色值。

第二步：選擇輸入格式

在輸入框中輸入顏色，支援：

HEX：#FF6B35
RGB：255, 107, 53
HSL：16, 100%, 60%
OKLCH：0.68, 0.17, 37

第三步：檢視轉換結果

工具自動顯示所有格式的轉換結果，可直接複製使用。

第四步：調整 Alpha 通道

勾選「包含透明度」，輸入 Alpha 值（0-1），結果會附帶 Alpha 通道。

CSS color-mix() 實戰

OKLCH 配合 color-mix() 可以精確混合顏色：

/* 在 OKLCH 空間混合，感知均勻 */
.button {
  background: color-mix(in oklch, #FF6B35, #3B82F6);
}

/* 混合 30% 的強調色 */
.card {
  border-color: color-mix(in oklch, #FF6B35 30%, white);
}

使用對比度檢查工具驗證混合後顏色與文字的對比度是否達標。

漸層中的顏色格式

使用漸層產生器時，推薦 OKLCH 格式：

/* OKLCH 漸層過渡更均勻 */
background: linear-gradient(
  in oklch,
  oklch(0.7 0.15 30),
  oklch(0.7 0.15 250)
);

傳統 RGB/HSL 漸層在色輪中間會出現灰暗區域，OKLCH 可避免此問題。

常見問題

問題	原因	解決
HEX 轉 RGB 結果不對	輸入了簡寫但未補全	先展開為 6 位 HEX
HSL 轉 HEX 色偏	浮點精度遺失	使用工具精確轉換
OKLCH 瀏覽器不支援	舊瀏覽器不支援	使用 CSS fallback 或 PostCSS 外掛
Alpha 值顯示異常	百分比與小數混用	統一使用 0-1 小數或 0%-100%

總結

掌握 HEX、RGB、HSL、OKLCH 四種格式的原理與轉換，是前端開發和設計的基礎技能。OKLCH 的感知均勻特性使其成為現代 CSS 的首選。顏色轉換工具幫你一鍵完成所有格式互轉，配合對比度檢查和漸層產生器建構完整的色彩工作流。