一款以嚴格 CSS 色彩規則為基礎打造的 hex 轉 RGB 轉換器替代方案，將 #RGB、#RGBA、#RRGGBB 以及 #RRGGBBAA 視為唯一有效的輸入格式，對其他任何內容一概拒絕猜測。轉換器在顯示任何結果之前，會先驗證井號、位數以及十六進位字元，因此無效的 CSS 代碼會產生清楚的錯誤訊息，而不是被悄悄修正成某個值。三位數與四位數的簡寫形式會透過重複每個半位元組來展開，六位數與八位數的形式則直接讀取，而 alpha 位元組位於 #RRGGBBAA 的結尾，而非開頭。各通道位元組會以 0 到 255 的整數形式呈現，正規化後的小寫 HEX 會被保留下來以維持來回轉換的精確度，並產生可直接用於樣式表的 CSS rgb() 或 rgba() 字串。整個處理流程都在當前瀏覽器中執行，因此色彩字串絕不會被上傳，而即時預覽則使用瀏覽器自身的 sRGB 渲染來呈現這個數值色彩在螢幕上的實際樣貌。這使得這個工具成為一個務實的替代方案，特別適合那些曾被過於寬鬆的轉換器悄悄竄改數值、或被託管服務外洩調色盤資料所困擾的使用者。
為何要尋找 Hex 轉 RGB 轉換器的替代方案
許多線上 hex 轉 RGB 轉換器都承諾能快速給出答案，但卻做了設計師與開發者最終會察覺的權衡取捨。有些會靜悄悄地接受格式錯誤的值，例如缺少井號、重複的井號，或多餘的字元，然後在未告知你的情況下「修正」輸入，這代表你貼上的色彩與你收到的色彩可能並不相同。有些則將常見於舊版 Android 資源與特定遊戲引擎中的八位數 ARGB 慣例 #AARRGGBB 當作 CSS 來處理，將 alpha 放在錯誤的位元組位置，從而產生截然不同的色彩。少數服務會將色彩字串傳送到遠端伺服器進行處理，當該數值屬於尚未公開的設計系統或客戶專屬調色盤時，便會引發明顯的隱私疑慮。本文所述的嚴格 CSS 替代方案採取了不同的立場：依據 W3C CSS Color Module Level 4 十六進位標記法 來驗證輸入、完全在當前瀏覽器中執行，並在值格式錯誤時拒絕猜測。
轉換器接受與拒絕的內容
解析器要求輸入必須以井號開頭，後接恰好 3、4、6 或 8 個 ASCII 十六進位數字。數字可以是 0 到 9，以及 A 到 F 的字母，無論大小寫皆可，且整個值周圍允許一般空白字元（會被自動去除）。在值內部則不允許任何空白。簡寫標記會透過重複每個半位元組來展開，因此 #123 會變成 #112233，而 #0f08 會變成 #00ff0088。可接受的形式摘要如下。
| 形式 | 輸入範例 | 展開後的 HEX | 是否指定 alpha？ |
|---|---|---|---|
| #RGB | #123 | #112233 | 否（視為完全不透明） |
| #RGBA | #0f08 | #00ff0088 | 是 |
| #RRGGBB | #336699 | #336699 | 否（視為完全不透明） |
| #RRGGBBAA | #336699CC | #336699CC | 是 |
任何不符合這些形式的情況都會回傳錯誤：缺少井號、重複的井號、值內部嵌入的空白、十六進位字元集之外的字元，或位數為 1、2、5、7 等情況。錯誤訊息會取代先前的轉換結果，而不會在螢幕上留下過時的成功結果，因此新值絕對不會被誤認為屬於舊的輸入。這些規則的參考依據為 MDN hex-color 文件，其中說明了相同的四種可接受形式，以及簡寫標記相同的位數重複規則。
如何使用此工具將 Hex 轉換為 RGB
- 在任何現代瀏覽器中開啟 HEX 轉 RGB 轉換器。
- 將 CSS hex 色彩貼到輸入欄位中，以 # 開頭，並使用恰好 3、4、6 或 8 個十六進位數字。
- 讀取正規化的十六進位值、CSS rgb() 或 rgba() 字串，以及顯示在輸入欄位正下方的個別通道位元組。
- 快速查看即時預覽色塊，確認通道順序在你的螢幕上看起來正確。
- 若為半透明色彩，且你需要精確的來回轉換準確度，請複製正規化的八位數 HEX，而非四捨五入後的十進位 alpha。
解讀輸出結果：位元組、CSS 與正規化 HEX
結果面板會以三種有用的形式呈現同一個色彩，分別適用於不同的使用情境。正規化 HEX 永遠是小寫，且為展開後的六位數或八位數形式，因此 #123 會變成 #112233，而 #0f08 會變成 #00ff0088。CSS 輸出則是可直接貼上的 rgb() 或 rgba() 宣告，瀏覽器可直接在樣式表中接受。通道位元組會將每個分量以 0 到 255 的整數形式顯示：端點 00 與 FF 會分別成為精確的 0 與 255，而所有中間值則是將以 16 為基底的位元組轉換為十進位。當存在 alpha 時，它也會以除以 255 後的十進位不透明度形式顯示，介於 0 到 1 之間，最多顯示三位小數，並去除尾部的零。精確的 alpha 位元組與正規化的八位數 HEX 會顯示在該十進位數值旁邊，因此四捨五入後的 alpha 絕對不會在不知情的情況下變更來源值。
使用 #123 的實作範例。簡寫展開：每個數字都會重複，因此 #123 變成 #112233。以 16 為基底的通道轉換：紅色 = 0x11 = 1×16 + 1 = 17，綠色 = 0x22 = 2×16 + 2 = 34，藍色 = 0x33 = 3×16 + 3 = 51。六位數值中沒有指定 alpha 位元組，因此預覽將該色彩視為完全不透明。CSS 最終輸出為 rgb(17, 34, 51)。
| 輸出欄位 | #123 的範例 | 最佳用途 |
|---|---|---|
| 正規化 HEX | #112233 | 設計 token、版本控制、精確來回轉換 |
| CSS rgb() | rgb(17, 34, 51) | 樣式表、行內樣式、CSS 變數 |
| 紅色位元組 | 17 | Canvas 呼叫、影像編輯器腳本、API 參數 |
| 綠色位元組 | 34 | Canvas 呼叫、影像編輯器腳本、API 參數 |
| 藍色位元組 | 51 | Canvas 呼叫、影像編輯器腳本、API 參數 |
八位數 Hex 中的 Alpha：常見的錯誤來源
八位數 CSS 形式 #RRGGBBAA 將 alpha 置於結尾，在紅、綠、藍之後。某些其他系統（特別是較舊的 Android XML 資源以及特定遊戲引擎）則使用 #AARRGGBB，將 alpha 置於開頭。當來源慣例假設錯誤時，能自由解讀任一種順序的轉換器將會產生截然不同的色彩。本工具絕不會根據視覺結果重新排序輸入，也絕不會將八位數值的第一個位元組視為 alpha。若你正在轉換的來源使用 AARRGGBB，請在貼上之前先調換位元組順序，然後將正規化的 HEX 輸出視為正式的 CSS 形式。
此轉換同時避開了一個更為微妙的精確度陷阱。CSS 不透明度是 alpha 位元組除以 255，而這個除法結果很少會落在整齊的數字上。十六進位的位元組 80 在十進位為 128，而 128 ÷ 255 約等於 0.50196，可讀形式顯示為 0.502，但四捨五入後的顯示無法精確呈現該數值。對於設計 token 與版本控管的樣式表，正規化的八位數 HEX 是較安全的提交項目，因為它在不經過失真四捨五入的情況下保留了原始位元組。僅在樣式表或函式庫確實需要帶有簡短小數值的 rgba() 字串時，才使用十進位不透明度。
本工具不會執行的功能
一款只處理 hex 與 RGB 的 hex 轉 RGB 轉換器在實務上並不完整，因此了解本工具刻意略過的功能會有所幫助。它不會解析 CSS 命名色彩，例如 rebeccapurple 或 coral；若需要這些，HTML 色彩名稱對照表 列出了每個標準化關鍵字及其精確的 RGB 對應。它不會轉換為 HSL、HSV、LAB、LCH 或 OKLCH；當你需要這些座標時，RGB 轉 HSV 轉換器專門處理整數到 HSV 的轉換。它不會測量兩種色彩之間的對比，也不會挑選可存取的的前景色彩，因此 色彩對比檢查工具 可即時套用 WCAG 比率規則，讓你驗證任何色彩組合的實際可讀性。它不會轉換為印刷用的 CMYK，也不會宣稱某個 sRGB 數字是 Pantone、印刷油墨配方或實體測量值；印刷生產需要受管理的設定檔與打樣工作流程，而 RGB 轉 CMYK 轉換器僅提供基本的未校正估算。它同樣不會從影像中取樣像素、混合兩種色彩，或產生調色盤，因為這些功能各自都有專屬的工具。預覽色塊使用瀏覽器自身的 sRGB 渲染，僅作為健全性檢查而非色彩管理參考，因此螢幕設定檔、亮度與環境光仍可能讓相同的數值色彩在不同機器上看起來略有差異。
若你正在權衡各種選項，HTML 色彩名稱對照表：148 個 CSS 關鍵字參考 對此有詳細說明。
若你正在權衡各種選項，可立即貼上的隨機色彩產生器 CSS 程式碼 對此有詳細說明。