每一個 CSS 十六進位顏色都是一種簡潔的方式，用來表示三或四個以 16 為基底的通道位元組。RR 配對代表紅色，GG 配對代表綠色，BB 配對代表藍色，若有最後一對 AA，則代表 alpha；每一對會被解析為 0 到 255 之間的十六進位整數。若要將十六進位轉換為 RGB，請去掉井號後將數字兩兩分組，並依紅-綠-藍-alpha 的順序將每一對讀作 16 進位整數。例如，#FF5733 會變成紅色 255、綠色 87、藍色 51，由於六位數形式並未指定 alpha，因此沒有 alpha 元件。四位數形式如 #3A7F 會透過複製每個數字展開為 #33AA77FF — 紅色 51、綠色 170、藍色 119、alpha 255 — 因為每個半位元組會擴展成一個完整位元組。規則是機械式的，並非詮釋性的：去掉井號、配對數字、以 16 為基底解析每一對，再依 CSS 定義的順序讀取位元組。一旦位元組已知，CSS 的 rgb() 或 rgba() 字串便直接產生，而正規化的八位數十六進位則是把相同的位元組以固定寬度、小寫形式再次寫出。
轉換器接受的 CSS 十六進位表示法
HEX 轉 RGB 轉換器嚴格遵循 CSS 十六進位顏色語法。只有四種代碼形式有效，而且僅限這四種。每個代碼必須以井號開頭，包含剛好正確數量的十六進位數字（0–9、a–f 或 A–F），且不可內含空白。三位數與六位數形式未指定 alpha；四位數與八位數形式包含透明度，alpha 配對永遠位於最後。
| 形式 | 範例 | 展開為 | 包含 alpha |
|---|---|---|---|
| #RGB | #3A7 | #33AA77 | 否 |
| #RGBA | #3A7F | #33AA77FF | 是（最後） |
| #RRGGBB | #33AA77 | （無變更） | 否 |
| #RRGGBBAA | #33AA77FF | （無變更） | 是（最後） |
大寫與小寫字母等價；A 與 a 都代表 10。代碼外部的空白會被去除，但代碼內部的任何東西 — 缺少井號、數字之間夾雜空白、雙井號，或十六進位字母表以外的字元 — 都會導致輸入直接被拒絕。這樣嚴格界線的原因很簡單：CSS 本身就精確定義了這四種形式，轉換器忠實反映該契約，因此無效的代碼會以錯誤呈現，而不會被靜默地重新解讀。如需四種 CSS 十六進位形式的完整規格，包括簡短形式的展開方式以及 alpha 的位置，MDN 十六進位顏色參考文件是最容易取得的權威來源。
如何使用瀏覽器工具將十六進位轉換為 RGB
對於開發人員、設計師以及任何與程式碼打交道的人而言，從十六進位字串到可用的通道整數，最快的途徑是採用遵循 CSS 規範的瀏覽器端轉換器。HEX 轉 RGB 轉換器完全在您目前的瀏覽器中執行，因此顏色字串不會離開該頁面。以下是操作流程。
- 開啟轉換器。在任何現代瀏覽器中載入 HEX 轉 RGB 轉換器頁面。不需要註冊、安裝或帳號。
- 貼上以 # 開頭的 CSS 十六進位顏色。輸入必須是四種有效形式之一：#RGB、#RGBA、#RRGGBB 或 #RRGGBBAA。請使用 0–9 的數字與 A–F 的字母；大寫與小寫皆可。
- 讀取正規化後的十六進位、CSS 字串以及各通道位元組。頁面會顯示展開後的小寫十六進位、紅綠藍與選用 alpha 的位元組值（範圍為 0 到 255 的整數），以及可直接貼上的 rgb() 或 rgba() 字串。
- 檢查即時預覽色塊。預覽由您的瀏覽器使用產生的 CSS 顏色進行渲染，這能讓明顯的通道順序錯誤立即顯現。若色塊與您預期不符，請再次確認輸入為 CSS 順序 — 紅、綠、藍、alpha — 而非來自行動框架的 alpha 在前的慣例。
- 針對半透明顏色，請保留正規化的八位數十六進位。可讀的 alpha 顯示至小數三位，但精確的 0–255 位元組與正規化的 #RRGGBBAA 值仍會保留顯示。當您需要精確的來回轉換 — 將顏色再次放入樣式表、設計權杖或測試固件中 — 請複製正規化的十六進位，而非四捨五入後的小數值。
一個實際演練的範例有助於讓機制更具體。以四位數輸入 #3A7F 為例。每個數字會被複製，因此 3→33、A→AA、7→77、F→FF，產生正規化的十六進位 #33AA77FF。以 16 為基底解析每個位元組可得 red = 0x33 = 51、green = 0xAA = 170、blue = 0x77 = 119，以及 alpha = 0xFF = 255。由於 alpha 為 255，因此不透明度為 1（完全不透明），CSS 輸出為 rgba(51, 170, 119, 1)。相同的程序適用於所有其他有效形式：配對數字、以 16 為基底解析、依紅-綠-藍-alpha 順序讀取。
解讀輸出欄位
一旦有效的十六進位代碼就位，轉換器會以多種並列方式呈現同一個顏色。選擇哪一個，取決於您工作流程中下一步實際需要什麼。下表摘要說明每個欄位的意義及其常見用途。
| 輸出欄位 | 意義 | 常見用途 |
|---|---|---|
| 正規化十六進位 | 展開後的小寫 #RRGGBB 或 #RRGGBBAA | 重新貼入樣式表、設計權杖或測試固件 |
| 紅 / 綠 / 藍 | 整數位元組，各為 0 到 255 | API、canvas 操作、影像編輯器、程式化輸入 |
| Alpha 位元組 | 0 到 255 的整數（僅在存在時） | 位元組層級的儲存與精確來回轉換 |
| Alpha 不透明度 | 位元組 ÷ 255，最多 3 位小數，去除尾端零 | CSS rgba()、設計工具的滑桿 |
| Alpha 百分比 | 以百分比顯示的不透明度，保留 2 位小數 | 文件、交接註記 |
| CSS rgb() / rgba() | 可直接貼上的字串 | 樣式表、行內樣式、CSS-in-JS |
| 即時預覽 | 瀏覽器使用產生的 CSS 顏色所渲染的色塊 | 快速的視覺健全性檢查 |
預覽是快速的健全性檢查，而非色彩管理參考。螢幕各有差異、瀏覽器設定檔不同、環境光線會變化，且廣色域工作流程可能讓相同的數值 sRGB 顏色在兩種螢幕上看起來不同。若需跨裝置的色彩嚴謹比較，請使用經校色的工作流程，並將通道位元組視為事實基準。
為何 Alpha 的位置在 CSS 十六進位中很重要
CSS 對於 alpha 在八位數十六進位顏色中的位置毫不含糊：它是最後一對，依 #RRGGBBAA 順序。然而該慣例並非普遍通用。數個行動裝置、Android 原生以及較舊的設計工具格式使用 #AARRGGBB，alpha 位元組置於最前。轉換器嚴格遵循 CSS，因此以 #AARRGGBB 形式撰寫的輸入會依其字面解析 — 第一個位元組會被視為紅色，而非不透明度 — 而不會根據色塊呈現的結果被靜默地重新排序。
這在兩個實際層面上很重要。首先，從 Android 資源或非 CSS 設計來源複製的十六進位字串，可能需要反轉其位元組順序，才能在樣式表中產生預期的顏色。其次，當涉及 alpha 時，不透明度在前的代碼與在後的代碼之間可能僅差一個位元組的位移，這足以將半透明填色變成幾乎不透明，反之亦然。在來源處確認位元組順序 — 並再次核對即時預覽與您的參考 — 是避免該錯誤最便宜的方式。
轉換器會拒絕哪些輸入及其原因
由於轉換器忠實反映 CSS 規範而非猜測意圖，數種常見的輸入會刻意被拒絕：
- 缺少前置井號。沒有 # 的裸字 FF5733 不符合任何有效形式，因此會被拒絕。
- 長度錯誤。五位、七位，或任何非 3、4、6、8 的數字數量皆為無效。
- 雙井號。##FF5733 並非 CSS 代碼。
- 內含空白。#FF 57 33 或 #FF_5733 含有非十六進位數字的字元。
- 非十六進位字元。A–F 以外的字母、附加變音符號的字元，或值內的標點都會使驗證失敗。
當上述任一條件成立時，轉換器會以明確的錯誤取代先前的轉換結果，確保不會將過時的結果呈現為屬於當前值。這樣嚴格的界線正是輸出值得信賴的原因：若有結果顯示，代表輸入為有效的 CSS 代碼，且位元組已完全依規範解析。若您需要從近似有效（但仍無效）的輸入中恢復 — 例如您擁有沒有井號的 FF5733 — 修正方式是在字串最前面加上一個字元，而非更換工具。
本工具不會做的事
了解轉換器「不會」做什麼，與了解它「會」做什麼一樣有用。HEX 轉 RGB 轉換器的功能刻意保持精簡：它解析 CSS 十六進位代碼，並顯示結果位元組、CSS 字串與預覽。它不會解析像 rebeccapurple 或 tomato 這類具名顏色，也不會處理 hsl()、lab()、lch()、color()、系統顏色、CSS 變數、漸層，或以逗號分隔的調色盤。它不會在色彩空間之間轉換、量測對比、挑選可達性的前景色、從影像中取樣像素，或聲稱兩個顏色看起來相同。
十六進位 CSS 顏色代表的是 sRGB 通道數值，而非 Pantone、CMYK、印刷油墨配方或實體測量。若您的下游工作是基礎的製程色估計，RGB 轉 CMYK 轉換可提供一組起始百分比，但印刷生產仍需受管理的色彩描述檔與打樣工作流程。針對無障礙用途，合適的工具是依已知規則比較兩種顏色的對比檢查器。若要反向操作 — 將通道整數轉回十六進位代碼 — RGB 轉 HEX 來回轉換指南以相同的預覽契約補上這個環節。
若想進一步了解，請參閱 Procreate RGB 轉 CMYK：印刷就緒方法。