HEX 色彩代碼將任何 RGB 色彩寫成 #RRGGBB，其中每兩個一組的數字代表紅、綠、藍三個通道之一，以 16 進位表示（00 到 FF，等同於十進位的 0 到 255）。因為每組涵蓋 256 個值，六位數格式能描述 256 × 256 × 256 = 16,777,216 種不同的色彩 — 也就是 CSS、HTML、Figma、Photoshop 以及大多數樣式指南所依賴的同一個 24 位元色彩空間。這個共通空間正是為何 RGB 與 HEX 之間的轉換會成為網頁設計與前端開發中每日最常見的工作之一：設計師給你三個十進位數字，樣式表跟你要一個 #HEX，而你需要在兩者之間完成一個值得信賴的乾淨轉換。轉換本身的算術很簡單：將每個十進位通道轉成兩字元的十六進位字串，再用前導的 # 串接起來。做一次很快，但若要套用整個品牌色票、同時處理像 #abc 這類簡寫、正規化大小寫，並避免手寫轉換常見的 off-by-one 錯誤，就會變得繁瑣且容易出錯。這正是具備即時預覽的雙向 RGB ↔ HEX 轉換器所要解決的工作流程 — 而 RGB 轉 HEX 工具能在你的瀏覽器中執行這個流程，不會將任何色彩值傳送到伺服器。
RGB 與 HEX：同一色彩的兩種標記方式
RGB 與 HEX 是同一色彩空間的兩種標記方式，而非兩個獨立的空間。RGB 用三個十進位整數為色彩命名，每個通道各一，範圍從 0 到 255。HEX 則用 0–9 與 a–f 中的六個字元為同一色彩命名，格式為 #RRGGBB。每對十六進位數字都直接對應到一個十進位通道，這也是為什麼了解每對的意義後，你就能直接用肉眼讀懂 HEX 代碼。
HEX 在輸入與貼上時更為精簡，因此成為 CSS 與 HTML 中撰寫色彩的主流方式。RGB 則較容易逐通道進行思考，這也是設計師與影像編輯工具常使用它的原因。HSL 建構在同一個空間之上，但以人類覺得自然的方式描述色彩：色相為色環上的角度（0–360°），而飽和度與亮度則為百分比。這三者描述的都是同一個 16,777,216 色的空間 — HEX 是「每通道兩個十六進位數字」的簡寫，RGB 是「每通道一個十進位整數」，HSL 則是「一個角度加上兩個百分比」。
轉換公式與逐步示範
從 RGB 到 HEX 的轉換是同一個運算重複三次：取一個 0 到 255 之間的十進位整數，將它除以 16，然後將商數與餘數寫成兩個十六進位數字。第一位是 16 的個數；第二位是剩下的餘數。舉例來說，熱門的 UI 藍色 (59, 130, 246) 會如下轉換為 #3b82f6：
- 紅色 59： 59 ÷ 16 = 3 餘 11。商數 3 → "3"，餘數 11 → "B"。組合：3B。
- 綠色 130： 130 ÷ 16 = 8 餘 2。商數 8 → "8"，餘數 2 → "2"。組合：82。
- 藍色 246： 246 ÷ 16 = 15 餘 6。商數 15 → "F"，餘數 6 → "6"。組合：F6。
- 將各組以前導的 # 串接起來：#3B82F6，正規化為小寫後為 #3b82f6。
練習幾次之後，你就能輕鬆地將一段 HEX 代碼以三個十進位數字唸出來，而反向操作 — 取第一、第二、第三組十六進位數字，再分別從 16 進位轉回十進位 — 則是同一個算術的逆向。若想更深入了解每對數字如何對應到特定通道，RGB 轉 HEX 解析指南 會逐通道詳細說明。
在瀏覽器中轉換 RGB 為 HEX（以及 HEX 為 RGB）
在兩種格式間進行轉換最快的方式（特別是處理整個色票時），是使用一個能為你處理各種邊角情況的即時轉換器。請開啟 RGB 轉 HEX 轉換器並依照下列步驟操作：
- 在三個通道欄位中輸入紅、綠、藍的值。每個欄位接受 0–255 範圍內的十進位數字，輸入超出範圍的值會被限制為最接近的有效數值，而不是直接跳出錯誤。
- 在即時色彩預覽旁讀取對應的 HEX 代碼。色塊會隨每次按鍵更新，讓你在複製前能確認色彩與預期相符。
- 若要反向操作，將 HEX 色彩貼到 HEX 欄位中。像是 #3b82f6 的六位數形式與 #abc 的三位數簡寫皆可接受，前導的 # 可省略，且大小寫不限。
- 若需要對同一個色彩的人性化描述（例如想讓品牌色稍微變亮或更柔和），可一併讀取 HEX 與 RGB 旁的 HSL 數值。
- 在你需要的那一行旁點選 複製。複製的 HEX 一律正規化為小寫六位數格式，且每組會以零補齊，因此通道值 0 會變成 00，而非單獨的 0。
因為轉換是在 JavaScript 中於本機執行，不會有任何色彩值被傳送到遠端伺服器。當你處理品牌色票、尚未公開的產品 mockup，或任何不想貼到第三方表單的內容時，這點非常重要。
解讀即時預覽、HSL 數值與複製按鈕
即時預覽是首次打錯通道值時就值回票價的功能。當你變更任一個 RGB 輸入，色塊會立即更新，HSL 數值也會重新計算，讓你能在代碼送進樣式表前抓出錯誤。納入 HSL 是因為多數人能直覺地以它來思考色彩：色相是色環上的角度（紅色約在 0°，綠色約在 120°，藍色約在 240°），飽和度與亮度則是 0–100% 的比例，會將同一色彩推向灰色或推向白色／黑色。若要將品牌色調亮 10%，將 L 值提高 10；若要讓它更柔和，則降低 S 值。接著再將調整後的 HSL 轉回樣式表實際可用的 HEX 代碼。每種格式旁邊的複製按鈕讓你直接取得所需內容而無需重新輸入，這消除了在正式 CSS 中以 off-by-one 通道錯誤形式出現的、雖然小但極為常見的抄錄錯誤。
簡寫 #abc、大小寫規則與其他輸入特性
三位數的 HEX 簡寫會將每個數字複製一次，因此 #abc 會展開為 #aabbcc，#f00 會變成 #ff0000（純紅），#fff 則為 #ffffff（白色）。轉換器接受簡寫、完整六位數形式、有無前導的 #，以及任意大小寫組合 — ABC、#abc 與 abc 都會解析為同一色彩。輸出會正規化為小寫六位數格式，讓你複製的值與手寫進樣式表的值完全一致。
| 輸入 | 輸出 | 備註 |
|---|---|---|
| #3b82f6 | #3b82f6 | 標準六位數形式 |
| 3b82f6 | #3b82f6 | 前導 # 可省略 |
| ABC | #aabbcc | 大小寫不敏感 |
| #abc | #aabbcc | 簡寫每位數複製一次 |
| #f00 | #ff0000 | 純紅 |
| #fff | #ffffff | 白色 |
| RGB (0, 0, 0) | #000000 | 黑色，以零補齊 |
| RGB (300, -10, 128) | 限制為 255, 0, 128 → #ff0080 | 超出範圍會被限制，不會跳錯 |
超出範圍或帶有小數的通道值不會跳錯。它們會被限制為 0–255 範圍內最接近的有效整數，這在其他工具不小心傳入不合規範的值時，通常正是你所想要的結果。格式錯誤的 HEX（去掉前導 # 後長度不對、含有非法字元，或任何其他解析問題）會被明確標示出來，而不是靜默地產生錯誤色彩 — 這個小細節能抓出手寫轉換常漏掉的拼字錯誤。
建議隨手保存的常用參考值
大多數色票都會回到幾個核心色彩。下表列出在設計系統、教學內容與標準 CSS 色彩關鍵字中常見的 RGB／HEX 標準配對。若需要更完整的對照表，RGB 轉 HEX 對照表指南 收錄了更多轉換範例，並在每一行旁附上公式。
| 色彩 | RGB | HEX |
|---|---|---|
| 黑色 | (0, 0, 0) | #000000 |
| 白色 | (255, 255, 255) | #ffffff |
| 純紅 | (255, 0, 0) | #ff0000 |
| 純綠 | (0, 255, 0) | #00ff00 |
| 純藍 | (0, 0, 255) | #0000ff |
| 熱門 UI 藍色（例如 Tailwind blue-500） | (59, 130, 246) | #3b82f6 |
最後一列正是上面逐步示範所使用的色彩 — 也是一個實用的驗證方式，確認你的轉換器對你已認識的色彩產生了正確的代碼。
轉換後的 HEX 代碼在實際專案中的應用
將 RGB 轉為 HEX 最常見的原因，是為了把結果貼進 CSS 檔案、SVG fill、Tailwind 設定檔或設計 token 中。反向操作最常見的原因，則是為了從樣式表讀回 HEX，再轉成 RGB 通道值，供影像編輯工具或以十進位記錄規格的品牌文件使用。轉換器在同一個畫面中涵蓋了雙向需求，這也正是工作時將它開啟的意義所在。
一旦取得可信賴的 HEX 代碼，就能直接放進 CSS 規則、style 屬性或設計工具中，無需再做進一步轉換。若你需要圍繞這個色彩建立更廣的色票、互補色組合，或符合無障礙規範的對比配對，Lizely 色彩工具箱的其餘功能會在這個轉換器之後接續上場 — 同一個瀏覽器工作階段、同樣的即時預覽方式，無需反覆複製貼上。