Hex 轉 RGB 轉換會將 CSS 十六進位色彩標記法(寫成 #RRGGBB 或 #RRGGBBAA)轉成樣式表、畫布或顯示驅動程式實際使用的紅、綠、藍,以及可選的 alpha 通道位元組。每一對十六進位數字是一個範圍 00 到 FF 的 16 進位數,等同於十進位的 0 到 255,因此轉換器會為三個色彩通道,以及當有 alpha 位元組存在時的 alpha 位元組,輸出一個 0 到 255 之間的整數。像 #123 這種簡寫的三位元形式,會先將每個數字重複展開成 #112233 再進行解析;像 #0f08 這種四位元形式則會展開成 #00ff0088。HEX 轉 RGB 轉換器會套用這個展開規則,以 16 進位解析每一對,並顯示標準化的小寫十六進位值、CSS rgb() 或 rgba() 字串、四個通道位元組,以及一個即時預覽色塊,讓同一個色彩的所有表示方式都能同時一目了然。

Hex 與 RGB 各代表什麼
CSS 十六進位色彩是一個精簡的字串,用來標示一個螢幕像素中三個小型光源的亮度:一個紅色子像素、一個綠色子像素,以及一個藍色子像素。每個子像素可以獨立調整明暗,眼睛則會將結果混合在一起。由於一個子像素可以關閉、半亮或全亮,而且能細分成許多層級,CSS 為每個通道提供 256 種可能的亮度等級,編號從 0 到 255。
十六進位標記法則使用 0 到 9 與 A 到 F 中的兩個字元來表示同樣的 256 個等級,其中 00 代表「這個子像素不發光」,FF 代表「這個通道能達到的最亮」。A 與 a 等價,因此 #FF8800 與 #ff8800 代表同一個色彩。這種位元組層級的結構,正是為何每個完整的 CSS 十六進位色彩在井字號後只能是六個或八個字元,絕對不會是五個或七個:每個通道兩個字元,透明度需要時再多兩個 alpha 字元。MDN 的十六進位色彩參考資料與 W3C CSS 色彩模組等級 4 都以相同方式定義這個語法,任何接受不同長度的工具都是在扭曲規格,而非遵循規格。
CSS 接受的四種十六進位形式
CSS 十六進位色彩的語法只接受剛好四種長度。轉換器也接受這四種,因為它是依據 CSS 規格所建構,而非依據特定設計應用程式可能容忍的簡寫形式。每種形式都需要開頭的 #,且值內部不允許空白。
| 形式 | # 之後的長度 | 編碼的通道 | 包含 alpha |
|---|---|---|---|
| #RGB | 3 位數 | 紅、綠、藍 | 否(完全不透明) |
| #RGBA | 4 位數 | 紅、綠、藍、alpha | 是 |
| #RRGGBB | 6 位數 | 紅、綠、藍 | 否(完全不透明) |
| #RRGGBBAA | 8 位數 | 紅、綠、藍、alpha | 是 |
三位數與六位數的形式沒有指定 alpha,因此視為完全不透明;四位數與八位數的形式則帶有 alpha 位元組,會產生半透明的色彩。解析器會在簡寫形式中重複每個半位元組,因此 #abc 會在讀取任何通道之前先變成 #aabbcc,#0f08 則會先變成 #00ff0088。
如何使用轉換器將 Hex 轉為 RGB
- 貼上一個以 # 開頭的 CSS 十六進位色彩,可為三位、四位、六位或八位形式,僅使用 0 到 9 與 A 到 F,且值內部不得有空白。
- 讀取轉換器顯示的標準化十六進位值、CSS rgb() 或 rgba() 字串,以及個別的通道位元組。
- 檢查即時預覽;對於半透明的色彩,若需要精確往返的精準度,請保留 alpha 位元組。
通道計算:從十六進位數字到 0-255 位元組
透過一個完整的範例走一遍,能讓轉換過程更具體。取八位數的十六進位色彩 #1A2B3C80。第一對 1A 是紅色通道。十六進位數字 1 代表十六,十六進位數字 A 代表十,因此 1 × 16 + 10 = 26。第二對 2B 是綠色通道:2 × 16 + 11 = 43。第三對 3C 是藍色通道:3 × 16 + 12 = 60。第四對 80 是 alpha 通道:8 × 16 + 0 = 128。
因此 CSS 輸出為 rgba(26, 43, 60, 0.502),四個通道位元組分別是 26、43、60 與 128。想看其他常見色彩以相同步驟展開的讀者,可以參考通道位元組與 alpha 逐步解說中的範例。端點規則遵循相同的數學:00 永遠變成 0,FF 永遠變成 255,無論以十六進位或十進位表示,位元組值都是同一個數字。
Alpha 計算與往返精準度
CSS 的 alpha 並非以百分比儲存。它是以 0 到 255 的位元組儲存,而顯示的十進位不透明度就是該位元組除以 255。轉換器同時顯示三項 alpha 資訊,讓精度的損失一目了然:精確的 alpha 位元組、rgba() 字串中使用的四捨五入十進位數,以及標準化的八位數十六進位值。
以 alpha 位元組 80 為例,其十進位為 128。將 128 除以 255 得到 0.5019607843,無限循環。四捨五入到小數三位並移除尾部的零,rgba() 字串顯示為 0.502。精確的位元組 80 以及結尾為 80 的標準化十六進位值會與該四捨五入數字並列顯示,因此需要將色彩往返於其他系統的設計師可以複製位元組而非四捨五入的十進位數,完全不會損失精度。有兩個端點能乾淨地四捨五入:00 保持為 0,FF 保持為 1,因為 0 ÷ 255 與 255 ÷ 255 都是精確值。其他每個位元組都會產生微小的四捨五入差異,這就是為什麼在 alpha 至關重要、且接收系統能讀取時,標準化的八位數十六進位值是最安全的參考依據。
轉換器會拒絕哪些輸入以及原因
解析器要求在井字號之後剛好為 3、4、6 或 8 個 ASCII 十六進位數字,且值內部不得有空白。看起來沒問題但實際會通過不了檢查的輸入包括:缺少井字號、雙重井字號(如 ##FF8800)、嵌入的空白(如 #FF 88 00)、0 到 9 與 A 到 F 以外的字元(如 #GG0000),以及任何不是 3、4、6 或 8 個字元的長度。完整值周圍的一般空白會被自動去除,因此數字外部的換行或空白不會破壞有效的 token。
拒絕這些輸入並非出於吹毛求疵。CSS 本身就會拒絕它們,而一個默默猜測作者意思的工具,會回傳一個樣式表拒絕載入的色彩。W3C CSS 色彩模組等級 4 的十六進位標記法章節明定了相同的語法,轉換器的嚴格界線只是讓這個語法變得明顯。輸入無效或為空時,也會以清楚的錯誤取代先前的轉換結果,而不是讓一個過時的成功結果看起來仍對應到新的輸入。
針對不同工作選擇正確的輸出欄位
不同的消費者需要同一個色彩的不同表示形式。轉換器會顯示所有形式,便於直接複製正確的版本,無需手動重新計算。
當 API、畫布操作、影像編輯器、測試 fixture 或設計 token 需要獨立的整數輸入時,請使用個別的通道位元組。這些也是自動化測試中最容易斷言的,因為 0 到 255 的位元組範圍既精確又與平台無關。對於接受 CSS 色彩函式的樣式(包括行內樣式、樣式表規則,以及大多數現代 UI 框架),請使用 CSS rgb() 或 rgba() 字串。在需要精確往返時,尤其是當 alpha 無法精確表示為簡短的十進位數時,請使用標準化的小寫十六進位值。
即時預覽是健全性檢查,而非色彩管理的參考依據。瀏覽器會在當前文件中呈現產生的 CSS 色彩,能抓出像是通道順序顛倒這類明顯錯誤,但螢幕描述檔、亮度、環境光以及寬色域顯示器,仍可能讓同一個數值 sRGB 色彩在不同機器上呈現出不同的外觀。若要計算前景與背景之間的對比度,請使用專門的對比工具來讀取實際的亮度值,而非位元組範圍,這類比較應屬於獨立的工作流程。
延伸閱讀:RGB 轉 CMYK 範例:常見色彩與公式。