一個像 #3b82f6 這樣的六位數 HEX 色碼，只是三個 0–255 RGB 色通道值的緊湊表示法，寫成 #RRGGBB，其中每一對以十六進位 (00–FF) 編碼一個顏色通道。將 RGB 轉換為 HEX 會得到樣式表、設計工具和無障礙工作流程所使用的標準 CSS 就緒格式，這樣你在影像編輯器中取樣的同一個顏色，就能以瀏覽器、對比度檢查器和設計系統都能理解的單一字串來表示。因為 HEX 和 RGB 描述的是相同的 24 位元色彩空間，翻譯過程中不會遺失任何資訊 — (59, 130, 246) 會變成 #3b82f6 而無需四捨五入，將 #3b82f6 解碼也會正好回到 (59, 130, 246)。對無障礙工作而言這點很重要：當你選定一個品牌色時，你需要它的 HEX，才能把它和背景或文字顏色一起貼到 色彩對比度檢查器，並在上線前驗證這組配色符合網頁內容無障礙指引 (WCAG) 的門檻。
RGB 與 HEX 表示法說明
螢幕能顯示的每一種顏色，都是由三個通道 — 紅、綠、藍 — 所組成，每個通道取 0 到 255 之間的整數值。這個 24 位元空間涵蓋 256 × 256 × 256 = 16,777,216 種不同的顏色，與 CSS、HTML、Figma、Photoshop 以及大多數設計系統所使用的色域相同。RGB 表示法直接寫出這三個數值，例如 rgb(59, 130, 246) 就是常見的 UI 藍色。
HEX 表示法則把同樣的三個通道打包成一個簡短字串。每個 0–255 的通道都改寫成兩位十六進位數字，00 代表 0，FF 代表 255，然後把三對數字以井字號串接起來：#RRGGBB。所以 (59, 130, 246) 變成 #3b82f6，純紅 (255, 0, 0) 變成 #ff0000，白色是 #ffffff，黑色是 #000000，綠色則是 #00ff00。
這兩種格式可以互換 — 它們描述相同的顏色，只是語法不同。CSS 在任何接受顏色的屬性中，同時接受 rgb() 和 #hex，因此開發人員常會依設計師給的是通道值還是樣式表片段，而在兩者之間轉換。設計師通常以 HSL (色相 0–360°、飽和度 0–100%、亮度 0–100%) 來描述顏色，因為這比較接近人類對色彩的感受方式，但 HSL 仍然會對應回一個 RGB 三元組，因此也對應回單一的 HEX 色碼。
HEX 也有一種三位數的簡寫形式。#abc 會把每個數字加倍，變成 #aabbcc，因此 #f00 展開為 #ff0000，而 #fff 展開為 #ffffff。簡寫形式受到所有現代瀏覽器的支援，但正式上線的樣式表通常會使用完整的六位數形式，以避免歧義。一個好用的 RGB 轉 HEX 轉換器，無論你貼上什麼內容 — 三位數或六位數、有沒有前置 #、大寫或小寫 — 都會正規化為相同的小寫六位數輸出，這樣可以避免一類手動轉換的錯誤，例如缺少前置零而產生一個不易察覺的錯誤顏色。
如何在瀏覽器中將 RGB 轉換為 HEX
使用 RGB 轉 HEX 轉換器進行轉換本身，然後將產生的 HEX 帶到對比度工具中進行無障礙驗證。了解要填入哪些欄位後，工作流程中的轉換部分只需一瞬間。
- 在瀏覽器分頁中開啟 RGB 轉 HEX 轉換器。
- 將紅色、綠色和藍色通道值輸入到三個 RGB 欄位中。每個欄位接受 0 到 255 之間的整數。
- 觀察 HEX 欄位自動填入，並確認即時顏色預覽與你預期的色調一致。
- 如果你需要同一顏色的色相、飽和度和亮度檢視，請參閱色塊旁邊的 HSL 讀數。
- 點擊 HEX 值的複製按鈕，將 #RRGGBB 字串放入剪貼簿，以便貼入 CSS、設計權杖或對比度檢查器。
- 若要反轉轉換，請將任何 HEX 色碼 (例如 #3b82f6 或簡寫 #abc) 貼到 HEX 欄位。RGB 和 HSL 欄位會立即更新，色塊也會反映解碼後的顏色。
UI 藍色 RGB (59, 130, 246) 的演算範例：
- 紅色 59 → 59 ÷ 16 = 3 餘 11 → 第一位數 3，第二位數 b → 3b
- 綠色 130 → 130 ÷ 16 = 8 餘 2 → 第一位數 8，第二位數 2 → 82
- 藍色 246 → 246 ÷ 16 = 15 餘 6 → 第一位數 f，第二位數 6 → f6
- 串接結果：#3b82f6
這就是工具為你執行的完整運算，而且可以推廣到任何有效的 RGB 三元組。超出範圍或帶有小數的通道值會被限制在 0–255 的整數範圍內，格式錯誤的 HEX 則會被標記出來，而不是悄悄產生錯誤的顏色，因此你可以放心地相信色塊所顯示的，就是你的 CSS 將呈現的內容。
為什麼 HEX 對無障礙測試很重要
HEX 已成為無障礙色彩文件的事實共通語，因為它簡潔、明確且易於複製貼上。樣式指南以 HEX 發佈品牌色；JSON 或 CSS 自訂屬性中的設計權杖使用 HEX；而大多數無障礙工具 (包括專門的對比度檢查器) 也都直接接受 HEX 作為輸入。
RGB 雖然也可以貼到這些工具中，但較長的字串 rgb(59, 130, 246) 較難一眼讀懂，也更容易打錯。在無障礙審查中，設計師與開發人員需要確認他們談論的是同一個色調，六位數 HEX 能消除這種疑慮：#3b82f6 只有一個意思。
並不存在「更無障礙」的顏色格式 — 對比度是兩種顏色的屬性，而非其表示法的屬性。重點在於工作流程中的所有人都參考相同的數值，而 HEX 讓這一點最容易達成。一旦你取得品牌色的 HEX，以及背景或文字顏色的 HEX，對比度檢查器就能計算兩者之間的亮度比，並告訴你這組配色是否能通過一般文字、大字文字或非文字 UI 元件的 WCAG 門檻。
文字與 UI 的 WCAG 對比度比率
WCAG 2.2 定義了前景與背景顏色之間的最低對比度比率。該比率是根據每種顏色的相對亮度計算得出，無論你以 RGB、HEX 或 HSL 表示顏色，得到的數值都相同 — 改變的是依內容類型而必須達到的門檻。
| 內容類型 | AA | AAA |
|---|---|---|
| 一般文字 (18pt 以下，或 14pt 以下的粗體) | 4.5:1 | 7:1 |
| 大字 (18pt 以上，或 14pt 以上的粗體) | 3:1 | 4.5:1 |
| UI 元件與圖形物件 | 3:1 | — |
這些門檻來自 WCAG 2.2 的成功準則 1.4.3 (對比度 — 最低)、1.4.6 (對比度 — 強化) 及 1.4.11 (非文字對比度)。達到或超過 AA 最低標準的比率是正式上線網站的實際底線；AAA 是更嚴格的目標，通常保留給長篇閱讀的內文使用。
計算比率時，每種顏色會先透過分段式 sRGB 轉線性轉換，被簡化為介於 0 和 1 之間的相對亮度值，然後代入 (L1 + 0.05) ÷ (L2 + 0.05)，其中 L1 是兩種顏色中較亮的那一個。你不必手動進行這些計算 — 只要貼上兩個 HEX 值，對比度檢查器就會立即套用公式。如需更深入的 WCAG 檢查步驟，請參閱關於檢查 WCAG 合規的色彩對比度的實用指南。
從 RGB 到 HEX 的無障礙色彩工作流程
將轉換與對比度檢查結合起來，就能為無障礙色彩決策建立一個緊密的循環。
從設計師給你的顏色開始，可能是 RGB 通道值或 HSL 表示式。使用 RGB 轉 HEX 工具將其轉換為 HEX，再與你預計使用的背景或文字顏色配對，並將兩個 HEX 值都貼到對比度檢查器中。檢查器會回傳一個比率，例如 4.7:1 或 2.9:1，你再判斷這組配色是否能通過你正在設計之內容類型的 AA 最低標準。如果未通過，檢查器通常會建議其中一個顏色的較深或較淺變體；你可以複製那個建議的 HEX，貼回 RGB 轉 HEX 轉換器以查看其 RGB 與 HSL 值，反覆調整直到該組配色通過。
對於品牌系統而言，這種往返流程是不可或缺的：設計師以 RGB 或 HSL 定義品牌色，開發人員需要 HEX 來撰寫 CSS，而無障礙審查需要文字與背景之間經過驗證的比率。RGB 轉 HEX 轉換器和對比度檢查器涵蓋了這三個步驟，且無需將任何色板上傳到伺服器 — 這在顏色仍處於保密狀態或屬於機密品牌重塑專案時特別重要。
在上線一組顏色之前的簡短檢查清單：
- 使用轉換器將設計師的 RGB 規格轉換為 HEX。
- 將文字顏色 HEX 與背景 HEX 貼到對比度檢查器中。
- 確認回傳的比率符合該內容類型的 AA 門檻 (一般文字為 4.5:1，大字或 UI 元件為 3:1)。
- 將經驗證的 HEX 值記錄到你的設計權杖與元件文件中。
- 每當你調整顏色時重新測試，因為即使是細微的色相變化也可能使比率低於門檻。
遵循這個循環，你對品牌顏色的決策就能在 RGB、HEX 與對比度比率之間流暢傳遞，無需任何人猜測數值，而且任何審查人員都能僅依據已發佈的 HEX 色碼重現結果。