若要將十六進位色碼轉換為 RGB，請將 CSS 十六進位色彩（例如 #1e90ff）貼到一個理解四種 CSS 形式的轉換器中：#RGB、#RGBA、#RRGGBB 和 #RRGGBBAA。該工具會解析前置井字號，將剩餘的數字拆分為紅、綠、藍及選擇性的 alpha 位元組，並回傳一個標準化的小寫十六進位字串、一個 rgb() 或 rgba() CSS 值，以及個別的 0–255 通道整數。Alpha 在 CSS 標記法中永遠是最後一個位元組，並除以 255 以產生 rgba() 中使用的 0–1 不透明度。整個轉換過程都在瀏覽器中本機執行，因此色彩字串永遠不會被上傳。HEX 轉 RGB 轉換器遵循這個精確的合約，並顯示結果的每一個部分，讓您可以複製符合樣式表、canvas 呼叫或設計權杖所需的形式。
CSS 十六進位標記法究竟是什麼
CSS 十六進位色彩是一個以 # 開頭的英數字串，後面恰好接著三、四、六或八個十六進位字元。每一對字元代表一個位元組，因此 #RRGGBB 的第一位元組編碼紅色，第二位元組編碼綠色，第三位元組編碼藍色。較短的 #RGB 形式每個通道使用一個半位元組，並透過重複每個數字來展開，這就是為什麼 #1e9 和 #11ee99 是同一個顏色。當存在 alpha 通道時，CSS 會將其附加為最後一個位元組：#RRGGBBAA。這個順序很重要，因為某些在網頁 CSS 之外使用的八位數色彩慣例會將 alpha 放在最前面，但轉換器嚴格遵循 CSS 語意，永遠不會重新排列位元組。
十六進位數字的範圍從 0 到 9，以及從 A 到 F，其中 A 代表十，F 代表十五。兩位數字合在一起涵蓋 0 (00) 到 255 (FF)，這符合每個 sRGB 通道的整數範圍。Alpha 遵循相同的位元組範圍：00 表示完全透明，FF 表示完全不透明。當您在 rgba() 字串中看到 0.5 時，那是位元組 128（十六進位 80）除以 255，而不是另一種獨立的測量方式。
接受的十六進位格式
該轉換器接受所有 CSS 定義的十六進位形式。下表摘要列出每種接受的長度、其展開方式，以及是否帶有 alpha。
| 輸入 | # 後的數字 | 展開規則 | 包含 alpha |
|---|---|---|---|
| #RGB | 3 | 重複每個半位元組 (#1e9 → #11ee99) | 否，視為完全不透明 |
| #RGBA | 4 | 重複每個半位元組 (#0f08 → #00ff0088) | 是，最後一個位元組 |
| #RRGGBB | 6 | 無需展開 | 否，視為完全不透明 |
| #RRGGBBAA | 8 | 無需展開 | 是，最後一個位元組 |
大寫和小寫字母是等效的，因此 #FF5733 和 #ff5733 會產生相同的通道。解析器也會修剪完整值周圍的一般空白字元，但會拒絕任何破壞嚴格文法的內容：缺少井字號、長度錯誤、雙重井字號、內嵌空白，或超出 0–9 和 A–F 範圍的字元。當輸入失敗時，該工具會清除先前的轉換結果，而不是悄悄猜測作者的原意。
如何將十六進位轉換為 RGB
- 貼上一個以 # 開頭的三、四、六或八位數形式的 CSS 十六進位色彩。例如，在轉換器中輸入 #1e90ff。必須有前置井字號，且數字必須是 0–9 或 A–F。三位數和四位數的簡寫形式（例如 #1e9 和 #0f08）也是有效的，並會自動展開。
- 讀取標準化的十六進位值、CSS rgb() 或 rgba() 字串，以及個別的通道值。標準化形式永遠是小寫，並使用展開後的數字位數，當存在 alpha 時為八位數。CSS 字串對不透明色彩使用 rgb()，對半透明色彩使用 rgba()，通道位元組以 0–255 範圍內的個別整數顯示，以便複製到 canvas 呼叫、影像編輯器或測試 fixture 中。
- 檢查即時預覽，對於半透明色彩，當需要精確的來回轉換精度時，請保留 alpha 位元組。預覽使用覽器的 CSS 色彩渲染來確認您輸入的是您想要的內容，但數值通道才是傳遞給其他系統的部分。如果 alpha 值很重要，請複製標準化的 #RRGGBBAA 十六進位值，而不是四捨五入後的小數，因為當位元組無法以三位小數精確表示時，小數 alpha 可能會損失少量精度。
讀取輸出欄位
每次轉換都會顯示相同的少數值。下表顯示每個欄位的用途以及何時複製它。
| 輸出欄位 | 它代表什麼 | 何時複製它 |
|---|---|---|
| 標準化 HEX | 小寫展開的 #RRGGBB 或 #RRGGBBAA | 樣式表、設計權杖、精確的來回轉換 |
| CSS rgb() 或 rgba() | 瀏覽器可直接使用的含小數 alpha 字串 | 內嵌樣式、CSS 變數、需要 CSS 字串的 canvas API |
| 紅、綠、藍位元組 | 個別的 0–255 整數 | Canvas 呼叫、影像編輯器輸入、測試 fixture、需要整數通道的設計權杖 |
| Alpha 位元組（0–255）和不透明度（0–1） | Alpha 以整數及位元組/255 表示 | 需要整數 alpha 的 API；需要 rgba() 的樣式 |
| 即時預覽色塊 | 從產生的 CSS 在瀏覽器中渲染的色彩 | 視覺健全性檢查，確認通道以正確順序輸入 |
簡寫標記法的展開方式（實例演練）
簡寫十六進位標記法純粹是一種輸入快捷方式，而不是另一種色彩空間。以 #123 作為輸入。每個半位元組會被重複以形成一個六位數色彩，因此 #123 展開為 #112233。從這裡開始，紅色位元組是第一對（十六進位的 11），綠色位元組是 22，藍色位元組是 33。將每對轉換為十進位得到紅色 = 17，綠色 = 34，藍色 = 51。相同的展開規則適用於帶 alpha 的四位數簡寫，其中輸入的最後一個半位元組會成為輸出的最後一個位元組。對您遇到的每個顏色手動執行此操作很乏味，這就是為什麼 CSS 十六進位轉 RGB 轉換器會在一個步驟中同時處理重複和進位轉換。
為什麼 Alpha 在 CSS 中位於最後
CSS 將 alpha 放在最後一個位元組，因此 #RRGGBBAA 讀為紅、綠、藍，然後是透明度。一些非 CSS 慣例會反轉這個順序並使用 #AARRGGBB，這是舊版 Android 資源值中使用的順序。轉換器永遠不會將八位數值的第一個位元組解讀為 alpha，即使產生的色彩碰巧看起來合理。如果您貼上使用 #AARRGGBB 的權杖，alpha 位元組會被當作紅色讀取，且顯示的通道將與來源不符。對於半透明的網頁色彩，請務必確認來源使用的是 CSS 的 alpha 在後順序，並且在共用精確值時，請複製標準化的八位數十六進位值，這樣就不會遺失任何四捨五入。
Alpha 小數也值得理解。CSS 將 alpha 表示為 0 到 1 之間的數字，因此十六進位的 80 位元組會變成 128 除以 255，轉換器將其呈現為大約 0.502。可讀的 rgba() 輸出會修剪尾隨零並四捨五入到小數點後三位，而精確的位元組和標準化的十六進位值仍會並列顯示。端點是精確的：00 對應到 0，FF 對應到 1，沒有涉及四捨五入。如果下游系統需要該精確的不透明度，請使用位元組或十六進位值，而不是四捨五入後的小數值，因為短的小數 alpha 可能會損失少量精度，即使數值色彩在視覺上仍然正確。
轉換器會捕捉的輸入錯誤
因為解析器遵循嚴格的 CSS 十六進位文法，幾個常見的錯誤會顯示為可見的錯誤，而不是默默猜測：
- 缺少前置井字號。1e90ff 會被拒絕，因為解析器要求 #1e90ff。
- 數字位數錯誤。井字號後接五個或七個字元的字串不符合任何有效的 CSS 形式，因此會被拒絕。
- 雙重井字號。像 ##1e90ff 或 #1e#90ff 這樣的字串包含十六進位字母表外的字元，因此不被接受。
- 內嵌空白字元。#1e 90ff 會被拒絕，但完整值周圍的一般空白字元會被修剪。
- 非十六進位字元。A–F 以外的字母、標點符號，或超過 F 的數字都會被拒絕。
無效或空的輸入會以清楚的錯誤取代先前的轉換結果，因此過時的成功結果永遠不會被呈現為屬於目前值。這在逐一處理色彩清單時很重要，因為顯示的通道永遠對應於輸入欄位中目前的內容。
當您需要的不只是 RGB 通道時
十六進位和 RGB 以兩種不同的標記法描述相同的 sRGB 數字，這就是為什麼它們之間的轉換是無損的。其他色彩工作流程則存在於該簡單對應關係之外。如果您需要符合 WCAG 對比目標的前景和背景，色彩對比檢查器會從通道值為您計算比率。如果您正在為印刷設計，相同的數值 sRGB 色彩並不是 Pantone、CMYK 配方或實體墨水測量值；RGB 轉 CMYK 轉換器提供快速的製程色彩估算，但實際生產工作仍需要受管理的色彩描述檔和打樣。對於反向操作，在覽器中將 RGB 轉換為 HEX以相反的順序使用相同的通道位元組。如果您想要本轉換器實作的正式文法，W3C CSS 色彩模組第 4 級十六進位標記法和 MDN hex-color 參考資料記錄了相同的 #RGB、#RGBA、#RRGGBB 和 #RRGGBBAA 形式。
若要深入了解，請參閱CMYK 轉 RGB 無障礙對比：實用工作流程。