CSS 十六進位色彩標記法是一個六位數、八位數、三位數或四位數的編碼字串，用來表示 sRGB 色頻值，將其轉換為 RGB 意即讀取紅、綠、藍以及可選的 alpha 位元組，使其成為介於 0 到 255 之間的整數。對於 #RRGGBB 與 #RGB 形式，解析器會複製每個半位元組(nibble)——因此 #abc 會變成 #aabbcc——再將產生的位元組對拆解為整數色頻。對於 #RRGGBBAA 與 #RGBA，最後一對視為 alpha 位元組，其中 0 表示完全透明，255 表示完全不透明;CSS 將 alpha 放在最後面，而不是最前面。網頁設計師通常需要整數色頻以便用於 canvas 操作、設計標記以及影像編輯器腳本，需要 CSS rgb() 或 rgba() 字串以便用於樣式表，並需要正規化的十六進位值以便進行無損往返轉換。HEX 轉 RGB 轉換器可一次產生這三種讀數，並從產生的 CSS 色彩即時渲染預覽，使色頻順序或輸入錯誤能立即顯現。
轉換器如何解析 CSS 十六進位標記法
轉換器僅接受 CSS 所定義的四種形式:#RGB、#RGBA、#RRGGBB 與 #RRGGBBAA。必須以井字號(#)開頭，且本體只能使用 0–9 的數字與 A–F 的字母，內部不可包含空格。大寫與小寫字母意義相同，完整數值周圍的一般空白會被自動去除。任何不符合此語法規則的內容——缺少井字號、雙重井字號、不支援的長度、嵌入的空格，或非十六進位字元——都會以明確的錯誤訊息拒絕，而不是靜默猜測。
三位數與四位數的輸入遵循 CSS 簡寫規則:每個半位元組都會被複製。因此輸入 #3F8 會展開為 #33FF88,#0F08 則展開為 #00FF0088。展開後，解析器由左至右將結果讀取為十六進位的位元組對。紅色在最前，綠色居次，藍色第三，若有 alpha 則在最末。這種順序很重要，因為 CSS 之外某些八位數色彩慣例會將不透明度置於前端;本轉換器不會根據外觀重新排序輸入，也不會將 #AARRGGBB 解讀為 CSS 色彩。
| CSS 形式 | 位數 | 包含 Alpha | 展開規則 | 範例 |
|---|---|---|---|---|
| #RGB | 3 | 否 | 每個半位元組複製 | #3F8 → #33FF88 |
| #RGBA | 4 | 是 | 每個半位元組複製 | #0F08 → #00FF0088 |
| #RRGGBB | 6 | 否 | 無 | #3F8A50 |
| #RRGGBBAA | 8 | 是 | 無 | #3F8A50FF |
根據 W3C CSS 色彩模組第四級規範以及 MDN 十六進位色彩參考資料，這四種形式是 CSS 解析器必須接受的唯一合法十六進位標記法。嚴格處理這些形式，能讓無效的代碼在程式碼審查時一目了然，而不至於讓一個不小心打錯的字元變成替代色彩。
解讀輸出結果:色頻、Alpha 與 CSS 字串
每次轉換都會顯示四種有用的檢視:展開後的小寫十六進位形式、各色頻位元組的整數值、CSS rgb() 或 rgba() 表示法，以及以該 CSS 值即時渲染的預覽。三位數與六位數的輸入在預覽中視為完全不透明，因為它們未指定 alpha;四位數與八位數的輸入則會將透明度傳遞到渲染的色塊上。
每個兩位數元件是範圍 0 到 255 的十六進位位元組，因此端點 00 與 FF 始終讀為 0 與 255。alpha 位元組除以 255，即可表示範圍 0 到 1 的不透明度。為了讓 CSS 易於閱讀，非端點的 alpha 會顯示至多三位小數並去除尾端零;精確的 alpha 位元組仍會並列顯示，百分比則顯示至兩位小數。例如十六進位值 80 會儲存為位元組 128，並顯示為大約 0.502 的不透明度。這種顯示上的四捨五入並不會改變正規化的八位數十六進位值——那是往返轉換半透明色彩時應保留的形式。
色頻位元組(而非四捨五入後的 CSS 字串)才是 HTML canvas 操作、影像編輯器腳本、測試 fixture 或設計標記系統通常需要的內容。CSS 輸出是樣式表所需要的。正規化的十六進位值則是無損交接所需要的。為不同的消費者選擇正確的欄位，才是進行轉換的實際效益所在。
需要 RGB 色頻位元組的網頁設計工作流程
網頁設計很少在樣式表就結束。同一個顏色經常需要在 Figma 或 Sketch、CSS 檔案、JavaScript canvas 處理程序，以及共用的設計標記檔案之間往返。每個消費者偏好的表示方式略有不同，而轉換為設計師提供了一個可以複製的單一事實來源。
- Canvas 與影像處理。繪圖操作與腳本處理程序若需要數值三元組，通常會期望 0–255 的整數色頻而非十六進位字串。直接讀取色頻位元組可以省下手動解碼的步驟。
- 設計標記。以 JSON 匯出的標記通常會將色頻分開儲存，以便執行階段能重建 rgb()、rgba() 或其他表示法。轉換器列出的色頻與該結構直接對應。
- 程式化主題設計。從單一品牌色所衍生的主題——例如推導出一個半透明覆蓋層——是以數值三元組加上 alpha 位元組為起點，而不是從 CSS 字串開始。
- 跨工具色彩交接。當色彩要移轉到顯示 RGB 色塊的工具時，整數色頻可以直接乾淨地貼上。預覽功能可在色彩離開設計師手中之前先行驗證其值。
至於更廣泛的色彩工作，色彩對比檢查器可讀取相同類型的色彩輸入以評分 WCAG 對比，RGB 轉 CMYK則將螢幕色頻轉換為印刷百分比。HEX 轉 RGB 的步驟位於這兩者上游，因為可靠的整數三元組是後續每個步驟所依賴的基礎。
如何在三個步驟內將十六進位代碼轉換為 RGB
- 將以 # 開頭、使用三位、四位、六位或八位數的 CSS 十六進位色彩——例如 #3F8A50——貼入轉換器。
- 讀取結果面板中顯示的正規化十六進位值、CSS rgb() 或 rgba() 字串，以及個別的色頻位元組。
- 將即時預覽與預期結果進行比對;對於半透明色彩，請保留正規化的八位數 HEX，而不是四捨五入後的小數 alpha，如此才能保留原始的位元組。
轉換作業在本機目前的瀏覽器中執行，因此關於該色彩的任何資訊都不會離開裝置。若輸入無效或為空，先前的轉換結果會被明確的錯誤訊息取代，而不是留在畫面上，如此可避免將舊的、看似成功的結果誤認為當下的值。
Alpha 位置與往返轉換的精確度
CSS 明確指出，#RRGGBBAA 是將 alpha 置於末端、藍色之後。某些將第一位元組視為 alpha 的轉換器(在某些非 CSS 色彩資源中很常見)會誤讀同一個字串。當轉換從非 CSS 來源複製過來的半透明色彩時，請先確認原始來源採用的是 alpha 在後的順序，然後再信任結果。
小數的四捨五入看起來無害，但值得特別提醒。以 #3F8A50 為例:數字對為 3F、8A 與 50。以十六進位計算，紅色色頻為 3 × 16 + 15 = 48 + 15 = 63，綠色色頻為 8 × 16 + 10 = 128 + 10 = 138，藍色色頻則為 5 × 16 + 0 = 80。因此 CSS 字串為 rgb(63, 138, 80)。對於八位數的變體如 #3F8A50C8，最後一對 C8 會解析為位元組 200，即 200 ÷ 255 ≈ 0.784 的不透明度。四捨五入後的小數雖然接近，但不等於 200/255，因此任何系統若先將小數重新編碼再解碼，將會產生零點幾個單位的誤差。在意精確交接的設計師會保留正規化的 HEX，僅將小數用於人眼閱讀。
限制與常見的網頁設計陷阱
本轉換器對於 CSS 十六進位標記法的處理是嚴格且刻意限縮的。它不會解析命名色彩(如 rebeccapurple)，也不處理 hsl()、lab()、lch()、color()、系統色彩、CSS 變數、漸層，或以逗號分隔的調色盤。它不會在色彩空間之間轉換、不會測量對比、不會建議無障礙前景色，也不會從影像中取樣像素。十六進位 CSS 值代表的是 sRGB 色頻位元組，並非 Pantone、CMYK、印刷配方或物理測量值，因此本轉換器無法取代受管理的印刷色彩設定檔與打樣工作流程。
有兩個實際陷阱值得向網頁設計師提出。第一，預覽反映的是瀏覽器對所產生 CSS 色彩的解讀;環境光、螢幕亮度、色彩設定檔，以及寬色域工作流程，都可能讓同一個數值 sRGB 在不同螢幕上看起來不同。第二，三位數與六位數的輸入在預覽中視為不透明，因為它們不帶 alpha。若設計意圖是半透明效果，請明確寫出 #RRGGBBAA，以使 alpha 位元組成為該值的一部分。
若要建立可靠的網頁設計工作流程，請複製包含井字號的完整 CSS 標記、確認位數符合預期形式，並將顯示的色頻與即將取用它的系統進行比對。若透明度是設計的一部分，請確認來源使用 CSS 的 alpha 在後順序，並保留正規化的八位數 HEX 作為標準參考。
若想深入了解，請參閱 從 CSS 色彩名稱構建的 CMYK 色卡與調色盤靈感。
若想深入了解，請參閱 RGB 轉 CMYK 入門:平實英語逐步解說。