如何轉換 HEX、RGB、HSL 色彩並檢查對比度

同一個顏色常以多種格式出現

設計工具用 HEX、CSS 用 RGB 或 HSL、無障礙檢查用對比度。處理色彩時，同一個顏色常需在多種表記間往返。格式間的轉換有助於串連設計交付、前端實作與無障礙審查。

色彩轉換與對比度檢查工具 可在瀏覽器中進行 HEX、RGB、HSL 轉換，以及前景色與背景色的對比度確認。

範例：檢查按鈕的文字顏色

假設你以品牌色 #2563eb 作為按鈕背景，並想用白色文字。

.primary-button {
  background: #2563eb;
  color: #ffffff;
}

在工具中輸入前景色 #ffffff、背景色 #2563eb，即可在實作前檢查對比度。若夠清楚就直接使用；若偏低，則加深背景、更換文字顏色，或重新檢視按鈕大小與粗細。同樣的藍色若調亮——例如 #60a5fa——搭配白字可能變得難以閱讀，所以請以數值而非印象來驗證。

不只看樣式，也要檢查可讀性

一組配色可能很好看，卻在手機螢幕、明亮顯示器或低品質螢幕上難以閱讀。在發布按鈕、標籤、連結、警示與導覽狀態前，請先檢查對比度。

若你在準備上線素材，請在確定品牌色後使用 Favicon 生成工具，讓圖示與 UI 保持一致。

HSL 適合製作變體

HSL 讓你更容易為 hover 狀態、邊框、淡色背景與停用狀態調整明度與飽和度。將 HEX 值轉成 HSL、調整後，再把結果用於 CSS。

.primary-button:hover {
  background: hsl(221 83% 45%);
}

.primary-button-subtle {
  background: hsl(221 83% 96%);
  color: hsl(221 83% 32%);
}

為 hover 稍微加深、為淡色背景提高明度，或只加深文字顏色——把色彩維持在 HSL 時，這些調整更容易推理，在審查時也更容易說明。

總結

色彩轉換與對比度檢查應一併進行。格式轉換有助於實作，而對比度檢查能確保最終介面維持易讀與好用。

常見問題

我需要多少對比度？

WCAG 無障礙指南建議一般文字對比度至少 4.5:1，大型文字（約 18pt，或粗體 14pt）至少 3:1。按鈕、連結等互動元素的可讀性同樣重要，因此實作前請用 色彩轉換與對比度檢查工具 確認數值。

何時該用 HEX、RGB 或 HSL？

HEX（#2563eb）簡潔，是設計工具與程式碼的標準。RGB 在需要透明度（rgba）時很方便。HSL 可直觀調整色相、飽和度與明度，最適合製作同一色彩的變體——hover 用較深、背景用較淺。

同一個顏色在不同格式下看起來會不同嗎？

顏色本身相同，但 HSL 讓「把明度降低 5%」這類調整變得直觀。重點是用對比度數值來保證可讀性，而不是僅憑印象決定。