HEX 轉 RGB 轉換器，會把一個 CSS 十六進位色彩——寫法為 #RGB、#RGBA、#RRGGBB，或 #RRGGBBAA——轉換成它的紅、綠、藍，以及選用的 alpha 色版數值，每個數值都以 0 到 255 之間的整數位元組表示。井字號（#）是必要的，每個字元都必須來自十六進位字母表（0–9 與 A–F），而且總位數，必須恰好符合四種被接受的長度之一。短寫法在剖析之前，會先把每個半位元組（nibble）重複一次，因此 #123 會展開成 #112233，色版位元組為 17、34、51。八位數寫法會把 alpha 放在最後，遵循 CSS 的 #RRGGBBAA 順序，而不是某些非 CSS 系統所使用的「alpha 在前」慣例。轉換完全在目前的瀏覽器本機端進行，並回傳一個正規化的小寫十六進位數值、一個 CSS rgb() 或 rgba() 字串、各別的色版位元組、確切的 alpha 位元組、一個不透明度數值，以及一個即時預覽色塊。使用HEX 轉 RGB 轉換器，能讓轉換嚴謹到一個無效的字串會明顯失敗，而不是被悄悄猜測處理——當下游的使用端是樣式表、canvas 呼叫，或需要精確數值的設計代符時，這條界線就非常重要。
可接受的十六進位格式與 CSS 語法規則
CSS 把十六進位色彩表示法，定義在一個很小、封閉的形式集合中。W3C CSS Color Module Level 4 規範與 MDN 參考文件，都把十六進位色彩限制在四種形式，任何宣稱能把 CSS 十六進位轉成 RGB 的工具，都應該恰好接受這四種：
| 格式 | 範例 | 正規化後 | 是否指定 alpha？ |
|---|---|---|---|
| #RGB | #123 | #112233 | 否（視為完全不透明） |
| #RGBA | #0f08 | #00ff0088 | 是 |
| #RRGGBB | #1f8a3c | #1f8a3c | 否（視為完全不透明） |
| #RRGGBBAA | #1f8a3c80 | #1f8a3c80 | 是 |
這些形式伴隨著幾條規則。開頭的 # 是必要的——沒有井字號的十六進位色彩，不屬於 CSS 表示法，會被拒絕。數字 0 到 9 與字母 A 到 F，是唯一合法的字元；大小寫不影響意義，因此 #ABC 與 #abc 會產生完全相同的結果。三位數與四位數的形式，會透過重複每個半位元組來展開，這也是為什麼 #123 會變成 #112233，而不是 #000123。剖析器會去除整個數值前後的一般空白，但不允許數值內部有空白，而且會拒絕重複的井字號、缺少的井字號，以及任何不是 3、4、6 或 8 的長度。
如何使用轉換器把十六進位轉成 RGB
- 在輸入欄位中輸入或貼上一個 CSS 十六進位色彩，開頭為 #，並恰好使用 3、4、6 或 8 位十六進位數字。
- 查看轉換器與您的輸入並列顯示、正規化後的小寫十六進位數值——對短寫法而言，這是展開後的形式；對較長的輸入而言，則是標準大小寫的形式。
- 查看轉換器產生出來的 CSS rgb() 或 rgba() 字串，並把它複製到樣式表、CSS-in-JS 物件，或任何需要這種語法的使用端。
- 查看各別的色版位元組——紅、綠、藍，以及（如果存在）alpha——並在 API、canvas 操作、影像編輯器，或測試夾具需要獨立的整數輸入時使用它們。
- 檢查即時預覽，確認色版順序看起來正確；對於半透明色彩，請複製正規化後的八位數十六進位數值，讓確切的 alpha 位元組能來回轉換而不損失精確度。
解讀輸出結果：色版位元組、CSS 字串與預覽
這個轉換器會回傳四種輸出，讓您能對應到下游程式碼所需要的任何一種形式。正規化後的十六進位值，是標準的小寫字串，有 alpha 時採八位數形式，沒有時採六位數形式——這對於在設計系統中維持單一事實來源很有幫助。CSS 的 rgb() 或 rgba() 字串，是可直接用於樣式表的正式數值：#1f8a3c 對應 rgb(31, 138, 60)，#00ff0088 對應 rgba(0, 255, 0, 0.533)。各別的色版位元組，則是 API 或 canvas 操作所需要的整數輸入——把 31、138、60 餵給需要三個引數的 JavaScript fillStyle 賦值，或是把它們傳進一個分別儲存各色版的設定物件中。
以短寫法數值 #123 為具體範例。轉換器會先把每個半位元組重複一次，把它變成 #112233。以 16 進位剖析這些位元組配對，紅色得到 0x11 = 17，綠色得到 0x22 = 34，藍色得到 0x33 = 51，因此 CSS 輸出會變成 rgb(17, 34, 51)。由於來源是三位數形式，沒有指定 alpha，因此結果會被視為完全不透明——預覽色塊呈現時不帶任何透明度。同樣的半位元組重複規則，也適用於四位數簡寫，不過 alpha 的情況，會在下一節有更詳細的說明。
alpha 在八位數十六進位中如何運作
alpha 的位置，是十六進位色彩最容易出錯的地方之一，因為不同的生態系統，會把它放在不同的位置。CSS 使用 #RRGGBBAA——alpha 是最後一個位元組，接在藍色色版之後。有些非 CSS 慣例則使用 #AARRGGBB，alpha 排在最前面。HEX 轉 RGB 轉換器絕不會把 #AARRGGBB 解讀成 CSS 色彩，也絕不會依據視覺上看起來的結果，去重新排列輸入的順序；如果您貼上 #80ff0000，希望它代表「50% 透明的紅色」，這個工具會把它讀成 red=128、green=255、blue=0、alpha=0——也就是完全不透明的亮紅色，沒有綠色或藍色色版——這正是提醒您，應該在重新貼上之前，先把位元組順序調整過來。
顯示出來的不透明度，是把 alpha 位元組除以 255 計算出來的。依照這個轉換器所使用的慣例，十六進位的 80，會被儲存為位元組 128，並顯示為約 0.502 的不透明度，而 00 則恰好是 0，FF 恰好是 1。可讀的 rgba() 數值，最多使用三位小數，並會去除尾端的零，但確切的 alpha 位元組，以及正規化後的八位數十六進位數值，仍會並列顯示，因此四捨五入後的顯示，永遠不會犧牲精確度。如果精確的來回轉換很重要——例如在不同檔案之間分享一個半透明色彩，或把它餵給另一個工具時——請複製正規化後的十六進位值，而不是四捨五入後的小數。若想更深入了解 alpha 的細節，如何把十六進位轉成 RGBA 並取得 CSS rgba() 輸出這篇指南，涵蓋了相同的剖析規則，並附上更多實際計算的範例。
剖析器會拒絕的輸入
嚴謹的驗證，正是區分「CSS 十六進位剖析器」與「寬鬆猜測字串的工具」的關鍵。這個轉換器刻意拒絕以下輸入，讓一個無效的字串，永遠不會被回報為轉換成功：
| 輸入 | 問題所在 |
|---|---|
| 123abc | 缺少開頭的井字號 |
| ##123456 | 重複的井字號 |
| #12 | 長度錯誤——既不是 3、4、6，也不是 8 |
| #GG0000 | 含有十六進位字母表以外的字元 |
| #12 34 56 | 數值內部含有空白 |
| rebeccapurple | 命名色彩——不是 CSS 十六進位表示法 |
| hsl(120, 100%, 50%) | 不同的 CSS 色彩函式，不支援 |
無效或空白的輸入，會用一個清楚的錯誤訊息，取代先前的轉換結果，而不是讓一個過時的結果，看起來像屬於新輸入的內容一樣繼續顯示。如果預覽色塊消失並出現拒絕訊息，問題就出在輸入字串本身——而不是某個隱藏的設定或需要切換的選項。
什麼時候該用色版位元組、CSS 字串，還是正規化十六進位值
這三種輸出形式，描述的都是同一個色彩，但每一種都各自適合不同的使用端。任何接受 CSS 色彩語法的樣式表或樣式化元件，都應該使用 CSS 的 rgb() 或 rgba() 輸出；它可以乾淨俐落地複製到樣式區塊或 CSS 變數中。當使用端是一次 API 呼叫時——例如需要三個整數引數的 canvas fillStyle 內容、一個把紅、綠、藍分別儲存為獨立數字的設定物件、影像編輯器的腳本層，或是針對整數色版做斷言的測試夾具——就應該使用各別的色版位元組。當 alpha 無法用一個簡短的小數精確表示時——簡短、四捨五入後的 alpha 數值，可能會損失一點點精確度——就應該使用正規化後的八位數十六進位值，因為確切的位元組，會被保留在正規化的形式中。
轉換完成後，若想快速做個合理性檢查，可以一起看看預覽色塊與色版數值。如果色塊看起來跟您預期的顏色不一樣，最常見的原因就是位元組順序：可能是一個以 #AARRGGBB 形式撰寫、而不是 #RRGGBBAA 形式的數值，或是一個原本打算用於 HSL、卻被誤貼成十六進位的輸入。
超越十六進位轉 RGB：這個轉換器不會做的事
十六進位的 CSS 色彩代表的是 sRGB 色版數值，這個轉換器也只停留在這個範圍內。它不會剖析 CSS 命名色彩、hsl()、lab()、lch()、color()、系統色彩、漸層，或以逗號分隔的調色盤。它不會在不同色彩空間之間轉換、量測對比度、挑選具無障礙性的前景色，也不會從圖片中取樣像素。它也不會把十六進位等同於 Pantone、CMYK，或印刷油墨配方——若需要基本的印刷四色估算，請使用RGB 轉 CMYK 轉換器，同時要記得，正式印刷生產仍需要經過管理的色彩描述檔與打樣。若需要文字與背景配對的 WCAG 對比度，請使用色彩對比檢查工具。MDN 十六進位色彩參考文件與W3C CSS Color Module Level 4 規範，是這個轉換器所實作的表示法規則的權威資料來源。
延伸閱讀：線上 RGB 轉 CMYK 轉換器安全嗎？。