手動將 CSS 十六進位顏色轉換為 RGB 是以 16 為基底的算術：每一對十六進位數字會透過將左側數字乘以 16、再加上右側數字，變成一個 0 到 255 之間的整數通道值。以 #FF8040 這個值為例，第一對 FF 等於 15×16 + 15 = 255（紅色），第二對 80 等於 8×16 + 0 = 128（綠色），第三對 40 等於 4×16 + 0 = 64（藍色），轉換後等同於 CSS 字串 rgb(255, 128, 64)。這個規則適用於所有 CSS 十六進位格式，因為三位數與四位數的輸入會先將每個半位元組（nibble）複製一次，所以 #123 會展開為 #112233，展開後同樣適用上述通道運算。對單一色塊手動計算沒什麼問題；但若設計系統中包含數十個設計令牌（token），錯誤就容易在此時悄悄出現。HEX 轉 RGB 轉換器在瀏覽器中執行完全相同的解析邏輯，並加入即時預覽，只要貼上顏色字串，就會回傳通道位元組、rgb() 或 rgba() 表示式，以及標準化後的八位數十六進位值。解析過程在本地端完成，顏色字串不會被上傳。
CSS 十六進位標記法實際代表的意義
CSS 十六進位標記法是一種簡潔的方式，可書寫三或四個位元組的 sRGB 色資料。每個位元組涵蓋一個 0 到 255 的整數通道值。兩個十六進位數字代表一個位元組，這是因為位元組有 8 個位元，而單一十六進位數字代表 4 個位元，因此兩個數字即可涵蓋完整的 0–255 範圍。第一個位元組代表紅色，第二個代表綠色，第三個代表藍色，第四個位元組（選用）則代表 alpha（透明度）。
十六進位的字母表為 0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F，其中 A 到 F 分別代表十到十五。因此，1F 等於 1×16 + 15 = 31，A0 等於 10×16 + 0 = 160，而 FF 等於 15×16 + 15 = 255。大寫與小寫字母意義相同，這也是為什麼 #ff8040 與 #FF8040 描述的是同一種顏色。開頭的井字號（#）為必填；W3C CSS Color Module Level 4 規範與MDN 的 hex-color 參考資料都將其視為 token 的一部分。
手動轉換公式逐步解析
對於任何六位數的十六進位值 #RRGGBB，請寫下三對數字，並使用相同規則分別轉換每一對：
- 取該對的左側數字，將其乘以 16。
- 加上右側數字的值（0–9 維持原值，A–F 對應為 10–15）。
- 其總和即為一個 0 到 255 之間的通道整數值。
以這個規則逐步計算 #2A7F5C，數字會很清楚地得出來。第一對 2A 變成 2×16 + 10 = 42，代表紅色。第二對 7F 變成 7×16 + 15 = 112 + 15 = 127，代表綠色。第三對 5C 變成 5×16 + 12 = 80 + 12 = 92，代表藍色。因此 #2A7F5C 等於 rgb(42, 127, 92)。這只是一個完整的範例；在本文其餘部分，請將值貼上轉換器，並讀取它回傳的通道位元組。
為何實務上手動轉換會力有未逮
對單一顏色進行這樣的計算沒什麼問題。但若設計系統包含四十或五十個設計令牌，手動方式就會開始浪費時間並產生錯誤。常見的陷阱包括：通道順序顛倒、漏掉前導零、將 B 誤認為 11 而非 12，以及忘記 #0F08 應展開為 #00FF0088 而非 #00FF0800。這些錯誤在貼到 CSS 之前都難以察覺，直到出現一個略為偏差的顏色才會被發現。
第二個問題是精確度。Alpha 是以一個 0 到 255 的位元組儲存，再除以 255 以產生 CSS 的不透明度小數值。位元組 80 是 255 分之 128，約等於 0.502，而非剛好 0.5。經過四捨五入的小數 alpha 在來回轉換回八位數十六進位時，可能會損失少量精確度，這對需要完全匹配的設計令牌來說相當重要。
第三個問題是簡寫展開。三位數與四位數的輸入在解析前會先複製每個半位元組，因此 #123 變成 #112233，而 #0F08 變成 #00FF0088。對每個簡寫手動追蹤展開過程會使工作量加倍，特別是在有 alpha 的情況下。HEX 轉 RGB 轉換器只需一次貼上，即可同時處理複製、通道運算與 alpha 標準化。
| 輸入格式 | 展開後的形式 | 通道 | 是否有 Alpha？ |
|---|---|---|---|
| #RGB（3 位數） | #RRGGBB | R, G, B | 無 — 視為完全不透明 |
| #RGBA（4 位數） | #RRGGBBAA | R, G, B, A | 有 — 為最後一個位元組 |
| #RRGGBB（6 位數） | 不變 | R, G, B | 無 — 視為完全不透明 |
| #RRGGBBAA（8 位數） | 不變 | R, G, B, A | 有 — 為最後一個位元組 |
如何使用 HEX 轉 RGB 轉換器
- 將 CSS 十六進位顏色貼到輸入欄位。值必須以 # 開頭，並恰好包含 3、4、6 或 8 個十六進位數字（0–9 與 A–F）。
- 讀取標準化後的十六進位輸出，一律以展開後的小寫形式顯示（無 alpha 時為六位數，有 alpha 時為八位數）。
- 讀取 CSS 輸出：不透明顏色使用 rgb()，包含 alpha 位元組的半透明輸入則使用 rgba()。
- 查看各通道的位元組（0–255），若包含 alpha，則一併查看精確的 alpha 位元組以及四捨五入後的小數不透明度。
- 查看即時預覽色塊以肉眼確認顏色，然後複製呼叫端程式碼所預期的表示形式。
轉換作業會立即執行，並在瀏覽器本地端運行，因此貼上設計令牌時不會上傳任何資料。若需對半透明顏色進行精確的來回轉換，請保留標準化後的八位數十六進位值，而非四捨五入後的 rgba 小數值。
解讀工具回傳的每個欄位
輸出面板提供四項獨立的資訊，讓使用者能挑選最適合接收端需求的格式。標準化後的十六進位值是最安全的分享格式，因為它保留了原始顏色的每一個位元，包括 alpha。CSS rgb() 或 rgba() 字串則是要貼到樣式表或元件屬性中的內容。各通道位元組則是 API、canvas 操作、影像編輯器或設計令牌通常預期的格式。即時預覽色塊使用產生的 CSS 顏色，方便以肉眼確認結果。
Alpha 同時以三種形式顯示：精確位元組（0–255）、小數不透明度（0.000 到 1.000，顯示至小數點後三位，並移除尾隨的零），以及百分比（0.00% 到 100.00%，顯示至小數點後兩位）。原始標準化後的八位數十六進位值無論小數如何四捨五入顯示都保持不變，因此從十六進位欄位複製可避免任何四捨五入造成的精度損失。
CSS 十六進位顏色中 Alpha 的位置
CSS 將 alpha 放在八位數十六進位值的結尾：#RRGGBBAA。這與某些其他慣例相反，那些慣例會將不透明度放在最前面，例如在某些 Android 與設計工具環境中的 #AARRGGBB。轉換器不會根據輸入外觀重新排列位元組，也不會將第一個位元組視為 alpha。在 CSS 之外以 #AARRGGBB 順序書寫的值，將無法解析為有效的 CSS token，轉換器會予以拒絕。
若需對來回精確度有要求的半透明顏色，請複製標準化後的八位數十六進位值，而非四捨五入後的 rgba() 字串。位元組 80 顯示為約 0.502 的不透明度，因為 128 除以 255 並非剛好等於 0.5；若在第二次轉換中使用四捨五入後的小數值，轉回八位數十六進位時將會產生略為不同的結果。
輸入規則與轉換器會拒絕的情況
僅接受以下四種 CSS 十六進位格式：#RGB、#RGBA、#RRGGBB 與 #RRGGBBAA。每個兩位數的元件必須使用 0 到 9 的數字與 A 到 F 的字母。開頭必須有井字號。解析器會修剪完整值周圍的一般空白字元，但會拒絕缺少井字號、井字號重複、內嵌空白、非十六進位字母表的字元，以及長度不是 3、4、6 或 8 的輸入。這樣嚴格的界線意味著無效的 CSS token 會顯示清楚的錯誤，而不是被默默猜測為某個顏色。
轉換器不會解析具名顏色（例如 rebeccapurple）、hsl()、lab()、lch()、color()、CSS 變數、漸層，或以逗號分隔的調色盤。它不會從影像中取樣像素、測量對比、挑選符合無障礙標準的前景色，或宣稱兩種顏色看起來相同。如需對比度比率，請使用色對比度檢查器；若要對 sRGB 幕顏色進行基礎的製程色估計，請使用 RGB 轉 CMYK，並記得實際印刷生產需要受控的色彩描述檔與打樣流程。
如需更深入的說明，請參影像的平均顏色：在本地端取得精確的 HEX。
如需更深入的說明，請參閱在 InDesign 中將 RGB 轉換為 CMYK：實務工作流程。