若要在 JavaScript 中將十六進位色碼轉換為 RGB，請驗證 CSS 十六進位詞元、展開任何簡寫形式、將其拆成位元組配對，並以 16 為基數解析每組配對。
HEX 與 RGB 是同一組 sRGB 通道值的兩種表示方式。像 #RRGGBB 這樣的六位數 CSS 色彩會依序儲存紅、綠、藍，而 #RRGGBBAA 則會在最後加上 alpha 位元組。三位數或四位數版本使用簡寫形式，因此解析器必須先將其展開，才能讀取個別通道。
若要快速進行瀏覽器轉換，HEX 轉 RGB 轉換器可接受 CSS 十六進位表示法，並顯示標準化 HEX、CSS rgb() 或 rgba() 值、通道位元組、alpha 資訊及即時預覽。下列 JavaScript 實作套用相同的通道排序規則，不依賴視覺估算。
適用於 CSS 十六進位詞元的 JavaScript 轉換
此函式接受包含 #RGB、#RGBA、#RRGGBB 或 #RRGGBBAA 的字串。它會拒絕格式錯誤的值、展開簡寫形式，並回傳整數通道與可直接用於 CSS 的字串。
可重複使用的函式： function hexToRgb(input) { const hex = input.trim(); if (!/^#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(hex)) { throw new Error("Expected #RGB, #RGBA, #RRGGBB, or #RRGGBBAA"); } const digits = hex.slice(1); const expanded = digits.length <= 4 ? digits.split("").map(d => d + d).join("") : digits; const bytes = expanded.match(/.{2}/g).map(pair => parseInt(pair, 16)); const [r, g, b, alphaByte] = bytes; const alpha = alphaByte === undefined ? 1 : alphaByte / 255; return { r, g, b, alphaByte, alpha, normalized: `#${expanded.toLowerCase()}`, css: alphaByte === undefined ? `rgb(${r}, ${g}, ${b})` : `rgba(${r}, ${g}, ${b}, ${alpha})` }; }
將字串傳入 hexToRgb，再依目的地讀取回傳的欄位。r、g 和 b 屬性是 0 到 255 的整數位元組。alphaByte 屬性一律存在；當來源不含 alpha 時，其值為 undefined，而 alpha 為 1。normalized 屬性包含展開後的小寫 HEX 值，而 css 包含對應的 rgb() 或 rgba() 宣告值。
- 用於樣式表時：使用回傳的 css 值。
- 用於 canvas、API 或其他以通道為基礎的 API 時：使用整數 r、g 和 b 屬性。
- 需要精確往返保留半透明效果時：保留 normalized 和 alphaByte。
在瀏覽器中轉換 CSS 十六進位色彩
- 貼上 CSS 十六進位色彩。 包含開頭的 #，並使用三位數、四位數、六位數或八位數的值。
- 讀取轉換結果。檢視標準化十六進位值、CSS rgb() 或 rgba() 字串，以及個別通道位元組。
- 檢查即時預覽。若精確往返的精度很重要，半透明色彩應保留 alpha 位元組與標準化 HEX。
轉換會立即在目前的瀏覽器中進行。解析、格式化、驗證與預覽渲染皆在本機完成，因此色彩字串不會上傳至 Lizely。三位數與六位數輸入因為不含 alpha 元件，在預覽中會視為完全不透明。
CSS 十六進位形式與通道順序
| CSS 輸入 | 展開形式 | 通道順序 | CSS 輸出 |
|---|---|---|---|
| #RGB | #RRGGBB | 紅、綠、藍 | rgb() |
| #RGBA | #RRGGBBAA | 紅、綠、藍、alpha | rgba() |
| #RRGGBB | #RRGGBB | 紅、綠、藍 | rgb() |
| #RRGGBBAA | #RRGGBBAA | 紅、綠、藍、alpha | rgba() |
可接受的形式遵循MDN 的 CSS 十六進位色彩參考資料。大寫與小寫字母具有相同意義。在簡寫形式中，每個數字代表一個十六進位半位元組，因此將每個數字重複一次，就能在解析前將其轉換為完整位元組。
以一個實際例子來說，#123 會展開為 #112233。使用 parseInt(pair, 16) 解析 11、22 和 33 各組配對後，會得到 R = 17、G = 34 和 B = 51。
在 CSS 中，alpha 一律位於最後。CSS Color Level 4 十六進位表示法定義的是 #RRGGBBAA，而非某些非 CSS 慣例採用的 opacity 優先排列。轉換器不得重新解讀 #AARRGGBB，也不得依畫面上呈現的顏色重新排列通道。
選擇程式所需的輸出形式
不同使用端需要同一種色彩的不同表示形式。選擇正確的輸出形式，可避免原本正確的轉換結果損失精度，或無法符合目的地的格式。
- CSS 樣式請使用 rgb() 或 rgba()。這些值可直接指派給接受 CSS 色彩語法的屬性。
- 需要整數的程式碼請使用個別通道位元組。Canvas 操作、影像編輯器、API 傳輸內容、測試固定資料與設計權杖通常會將紅、綠、藍當成 0 到 255 的數值使用。
- 需要精確往返保留時請使用標準化 HEX。這對半透明色彩尤其重要，因為簡短的十進位 alpha 可能損失少量精度。
alpha 位元組是 0 到 255 的整數，其不透明度是將該位元組除以 255 計算而得。轉換器會顯示最多具有三位小數位的易讀十進位值，但也會保留精確的 alpha 位元組與標準化十六進位值。上述 JavaScript 函式會在 alpha 屬性中回傳未經四捨五入的比例，因此對精度敏感的工作而言，alphaByte 欄位是最可靠的來源。
拒絕無效或模稜兩可的值
嚴格的解析器應回報無效的 CSS 詞元，而不是暗中猜測作者的原意。JavaScript 函式中的驗證會強制套用與轉換器相同的接受範圍。
- 必須包含開頭的井字號。不含 # 的值會被拒絕，因為它不是完整的 CSS 十六進位色彩。
- 只允許精確長度。接受三位數、四位數、六位數與八位數；五位數與七位數字串則不接受。
- 拒絕內嵌空白與無效字元。值內只接受 0 到 9 的十六進位數字與 A 到 F 的字母。
- 不得重新排列通道。紅色在前、綠色其次、藍色第三；若有 alpha，則置於最後。
完整輸入前後的一般空白會被去除，因此即使複製的值帶有前後空格，仍可處理。內嵌空格仍屬無效。轉換器不會解析具名色彩、hsl()、lab()、lch()、color()、系統色彩、CSS 變數、漸層或以逗號分隔的色票。
空白或無效的值也會在瀏覽器工具中取代先前的轉換結果，並顯示明確錯誤。如此可避免過時的成功結果看似屬於目前正在編輯的值。
瞭解預覽可確認的事項
即時預覽會渲染所產生的 CSS 色彩，因此有助於找出明顯的通道順序錯誤，但它並不是色彩管理參考資料。螢幕品質、瀏覽器設定檔、顯示器亮度、環境光源與廣色域工作流程，都可能使相同的數值 sRGB 值在不同裝置上看起來不同。
十六進位 CSS 色彩代表的是 sRGB 通道值，而非 Pantone 配色、CMYK 墨色配方或實體色彩量測值。轉換器不會在色彩空間之間轉換、計算對比、選擇無障礙前景色、從影像擷取像素，或判斷兩種色彩在印刷時的呈現方式。預覽可以確認瀏覽器是否接受所產生的值，但正式的色彩決策仍需 appropriate 的後續工作流程。
可靠的交接檢查清單
使用轉換值之前，請複製包含井字號在內的完整 CSS 詞元，並確認其中包含預期數量的數字。將顯示的紅、綠、藍值與將使用這些值的系統進行比較。若涉及透明效果，請確認來源遵循 CSS 將 alpha 置於最後的排序方式。
對於動態進入應用程式的值，例如使用者提供的主題色彩或資料驅動的設計權杖，請使用 JavaScript 函式。對於需要檢查並複製到 CSS、API 傳輸內容、canvas 常式或測試固定資料中的靜態色彩，請使用瀏覽器轉換器。當半透明值必須在交接過程中保留，且不能承受簡短十進位 alpha 所帶來些微的四捨五入損失時，請保留標準化 HEX。
相關閱讀：如何比較 HTML 與 CSS 色彩名稱圖表方法。
相關閱讀：免費 RGB 轉 CMYK 轉換器：轉換數值色彩。