CSS 十六進位制色碼轉 RGB 會將以井字號開頭的十六進位制顏色，轉換為其紅、綠、藍以及選用的 alpha 通道值，而其輸入格式只有四種是有效的:#RGB、#RGBA、#RRGGBB 與 #RRGGBBAA。轉換本身是直觀的運算:每一對十六進位數字會變成 0 到 255 之間的一個位元組，但陷阱存在於輸入端:缺少井字號、位數錯誤、alpha 位元組放錯位置，或是四捨五入後的小數悄悄喪失精度。一個嚴格遵守 CSS 規範的轉換工具會讓這每一種錯誤都清楚浮現，而不是去猜測你的意思。HEX 轉 RGB 轉換器接受 W3C CSS 顏色模組所定義的四種格式，將簡寫展開為複製每個半位元組，依序解析紅、綠、藍與 alpha，並顯示標準化的小寫十六進位色碼、各通道的位元組值、CSS rgb() 或 rgba() 字串，以及即時預覽——一切都在你的瀏覽器中完成，無需上傳色彩字串。了解表示法的規則，正是正確轉換與「看起來很接近但實際上印錯」之間的分野。
CSS 十六進位制標記法的四種有效形式
W3C CSS 顏色模組明確定義了四種十六進位制色彩形式。除此之外——缺少井字號、長度錯誤、井字號重複、內含空白字元，或出現 0–9 與 A–F 以外的字元——都會被拒絕，而非默默重新解讀，詳見 W3C CSS 顏色模組十六進位制標記法規格。這個嚴格的界線，正是讓轉換器能夠攔截無效的 CSS 代號，而不是給出看似合理但實際錯誤的結果。
簡寫形式透過複製每個半位元組來展開。例如，#abc 展開為 #aabbcc,#0f08 展開為 #00ff0088。大寫與小寫字母意義相同，所以 #FF5733 與 #ff5733 代表完全相同的顏色。前導的 # 是必須的，不可省略;完整數值周圍的一般空白會被去除，但數值內部的空白則會被拒絕。
| 形式 | # 之後的位數 | 是否包含 alpha? | 輸入範例 | 展開後的形式 |
|---|---|---|---|---|
| #RGB | 3 | 否 (視為不透明) | #123 | #112233 |
| #RGBA | 4 | 是 | #0f08 | #00ff0088 |
| #RRGGBB | 6 | 否 (視為不透明) | #FF5733 | #FF5733 |
| #RRGGBBAA | 8 | 是 | #FF573380 | #FF573380 |
三位數與六位數的形式沒有指定 alpha，因此轉換器在預覽中將其視為完全不透明。四位數與八位數的形式則包含透明度。這個區別很重要，因為當 alpha 低於 1 時，同一個數值顏色疊在不同背景上看起來可能差異極大;若不小心把不透明代號與半透明代號互換，就會覆蓋掉下方的內容。
三步驟將十六進位制色碼轉為 RGB
- 貼上以 # 開頭的 CSS 十六進位制顏色。請使用 #RGB、#RGBA、#RRGGBB 或 #RRGGBBAA。大寫與小寫等價，但井字號必須存在，數值必須剛好包含 3、4、6 或 8 個十六進位數字，內部不能有空格。
- 讀取標準化後的輸出。轉換器會顯示展開後的小寫十六進位色碼、各通道的位元組值(紅、綠、藍，以及存在時的 alpha)、CSS rgb() 或 rgba() 字串、精確到小數點後兩位的不透明度百分比，以及非端點的 alpha 值(以最多三位小數顯示，並去除尾隨零)。當程式碼需要個別的整數——canvas 繪圖、測試 fixture、設計 token、影像處理——請使用通道位元組;若要給接受 rgb() 或 rgba() 的樣式表使用，則使用 CSS 字串。
- 檢查預覽並決定要保留什麼。即時色塊能讓你一眼看出通道順序錯誤。對於半透明色彩，若需要精確往返(round-trip)的精度，請保留標準化的八位數 HEX，而非四捨五入後的 rgba() 值，因為較短的 alpha 小數未必能精確表示。
那些悄悄改變色彩的錯誤
大多數的 hex-to-RGB 錯誤並非運算錯誤——而是輸入錯誤。運算是機械性的;輸入才是出問題的地方。逐一檢視常見陷阱，是從設計工具到正式上線之間維持色彩準確的最快途徑。
把 alpha 放在最前面而非最後
CSS 寫的是 #RRGGBBAA,alpha 在結尾。某些非 CSS 慣例則寫成 #AARRGGBB,alpha 在開頭。如果你把這類慣例中的值複製到 CSS 環境，位元組順序就會被悄悄調換:前兩位變成紅，接著兩位變成綠，真正的 alpha 反而被當成藍色讀取。轉換器不會根據視覺猜測去重新排列輸入。它把輸入當作 CSS 代號——依序為紅、綠、藍、alpha——而這也正是 CSS 之後解析它的方式。
輕信四捨五入後的 alpha 小數
CSS 的 alpha 是該位元組除以 255。轉換器為求易讀，會以最多三位小數(去除尾隨零)顯示非端點的 alpha 值。同時，精確的 0–255 位元組、精確到兩位小數的不透明度百分比，以及標準化的八位數 HEX 也都一併顯示，因此只要保留 HEX，就不會損失任何精度。四捨五入只是給人眼看的，並非用於儲存。若某個代號必須能精確往返——例如測試 fixture、設計系統匯出、印刷打樣——請保留標準化的 HEX。四捨五入後的小數可能會損失微小的精度，在細微的漸層、混合或合成中就會顯現出來。
忘記井字號
沒有 # 的十六進位值不是 CSS 顏色。部分設計工具容許裸的十六進位值;CSS 並不容許。轉換器會拒絕缺少井字號的輸入，而非默默補上，因為若補上，就代表它接受了一個原始碼之後會拒絕的值，這種偽陽性比明確的錯誤更難以排查。
使用錯誤的位數
五位或七位十六進位數字並非有效形式，也沒有合理的規則可以將其展開。轉換器會拒絕這類輸入，這才是正確的行為:五位數的代號若不靠猜測，無法被明確地展開為紅、綠、藍與 alpha。若位數錯誤，請修正來源，而不是讓工具自行捏造一個值。
將不同大小寫視為不同顏色
#FF5733 與 #ff5733 是同一個顏色。轉換器會將顯示標準化為小寫。如果兩個本應相符的代號在 diff 中看起來不同，請確認該大小寫差異在你的工作流程中是否有意義，或只是標準化所產生的假象。
把色塊當作色彩管理的參考依據
預覽由瀏覽器以 sRGB 渲染，但你正在看的螢幕，可能與另一位開發者的螢幕校色不同，環境光、亮度與寬色域設定檔都會改變感知到的顏色。數值輸出才是契約;色塊只是健全性檢查，並非真理來源。
完整範例:#FF5733 轉為 (255, 87, 51)
為了展示轉換實際如何進行，以 #FF5733 為例，這是一個不含 alpha 的六位數 CSS 顏色。將其拆成三對: FF=33。每一對都是一個以 16 為基底的位元組。
- FF → 15 × 16 + 15 = 240 + 15 = 255(紅)
- 57 → 5 × 16 + 7 = 80 + 7 = 87(綠)
- 33 → 3 × 16 + 3 = 48 + 3 = 51(藍)
因此 #FF5733 變成 rgb(255, 87, 51)，未指定 alpha，轉換器將其視為完全不透明。這與轉換器內部執行的運算完全相同。這些通道位元組——255、87、51——正是你會餵給 canvas 繪圖操作、影像處理程式庫，或是預期接收個別整數輸入的測試 fixture 的數值。
若要做半透明範例，請看 #FF573380。在結尾加上 alpha 對 80(CSS 的 alpha 為最後一個位元組)，得到 alpha 位元組 128，亦即 128 ÷ 255 ≈ 0.502 的不透明度，以三位小數顯示並去除尾隨零。若精確往返的精度比易讀的 rgba() 字串更重要，請保留標準化的八位數 HEX。
轉換器不會為你做的事
這個轉換器嚴格只處理 CSS 十六進位制標記法，而且只處理這個。了解它「不做」什麼，才能避免請它做錯的事——也讓每次轉換對實際測量結果保持誠實。
| 功能 | 是否在此處理? | 更合適的工具 |
|---|---|---|
| 解析 rebeccapurple 或 coral 等具名顏色 | 否 | HTML 顏色名稱對照表 |
| 解析 hsl()、lab()、lch()、color() 或 CSS 變數 | 否 | 特定領域的 CSS 工具 |
| 將 sRGB 轉為印刷用的 CMYK | 否 | RGB 轉 CMYK 轉換器 |
| 測量對比度以評估可及性 | 否 | 顏色對比檢查工具 |
| 從影像中取樣平均顏色 | 否 | 影像平均色尋找器 |
| 使用 CIEDE2000 比較兩種顏色 | 否 | 顏色差異計算工具 |
| 對應 Pantone 或預測印刷機輸出 | 否 | 受管色彩設定檔與打樣流程 |
十六進位制 CSS 顏色描述的是 sRGB 通道值。它們既不是 Pantone 對照、也不是 CMYK 分色、更不是實體油墨配方。任何與印刷相關的工作，請把這個轉換器當作起點，然後在送印前執行受管的設定檔與打樣流程。至於可及性的決策，數值輸出是必要但不充分的條件——對比度是相對於 WCAG 門檻的另一項獨立測量，並非 hex-to-RGB 步驟能單獨提供的。組合各個專注工具的輸出，比要求單一工具做所有事來得更快，也能讓每次轉換都對自己的規則負責。