RGB 轉 HEX 格式是一個六字元的十六進位字串，用緊湊表示法 #RRGGBB 代表一個 RGB 色彩。每組兩個字元編碼一個色彩通道：RR 代表紅色，GG 代表綠色，BB 代表藍色。由於每組的範圍從十六進位的 00 到 FF——等同於十進位的 0 到 255——這個六位數形式能夠精確描述 256 × 256 × 256 = 16,777,216 種不同的色彩，也就是 CSS、HTML 以及 Figma、Photoshop 等主流設計工具所使用的同一個 24 位元色彩空間。這個格式體積小巧、結構固定，並且在瀏覽器和繪圖軟體中獲得普遍支援，使其成為在樣式表、設計規格和品牌文件中撰寫色彩的標準方式。了解這個格式的組成方式，能幫助你讀懂任何遇到的色彩字串、必要時手動轉換，並檢查轉換工具回傳的結果是否合理。一個實際可用的工具是 RGB To HEX 轉換器，它能即時將 HEX 解碼為 RGB 通道、將 RGB 編碼為 HEX，並提供即時色塊讓你即時查看格式產生的結果。
這個格式之所以存在，是因為開發人員和設計師需要一種單一、可重複的方式來記錄「這個藍色調」，而不產生歧義。像 rgb(59, 130, 246) 這樣的 RGB 數值雖然精確但冗長；像 cornflowerblue 這樣的具名關鍵字雖然簡短，但僅涵蓋所有可能色彩中的一小部分。HEX 格式正好居中：它夠短，能放入任何 CSS 規則；夠有結構，能一眼解碼回 RGB；夠密集，能定址 24 位元空間中的每一種色彩而無需查表。
RGB 轉 HEX 格式的結構解析
一個有效的 RGB 轉 HEX 字串具有嚴格的結構，使其易於辨識和解析。每個部分都扮演特定的角色。
- 前置井字號 — # 字元用來標記該值為 HEX 色彩。某些情境接受井字號，某些則省略；這兩種形式指的是同一個色彩。
- 六個十六進位數字 — 正好六個字元，來自 0–9 和 a–f（或 A–F）這個集合，分為三組兩個數字的配對。
- 配對 1 — 紅色 — 第 1–2 個字元以十六進位設定紅色通道強度，其中 00 表示無，FF 表示最大。
- 配對 2 — 綠色 — 第 3–4 個字元以相同方式設定綠色通道。
- 配對 3 — 藍色 — 第 5–6 個字元以相同方式設定藍色通道。
由於每組從 00 跑到 FF，你可以將 0–255 RGB 範圍內的任何整數，透過除以 16（十六進位的基底）並將商數和餘數轉換為其十六進位等價物，映射為一個兩位數的十六進位字串。單一通道有 256 個可能的值，三個通道相乘便得到先前提到的完整 16,777,216 色彩空間。
有效的 HEX 格式規則與簡寫
RGB 轉 HEX 格式伴隨著一組簡短的規則，用以定義什麼構成有效的色彩字串。了解這些規則能幫助你除錯樣式表、驗證使用者輸入，或在拼字錯誤悄悄改變色彩之前先抓出來。
- 長度 — 標準 HEX 字串為六位數。三位數簡寫（例如 #abc）也是有效的；每個數字會加倍，所以 #abc 變成 #aabbcc，#f00 變成 #ff0000（純紅），#fff 變成 #ffffff（白色）。
- 字元集 — 僅允許 0–9 和 a–f（不區分大小寫）。其他任何字元——f 之後的字母、空格、標點——都會使該字串無效。
- 前置井字號 — 在大多數現代轉換器中為可選。ABC、#abc 和 abc 都描述同一個色彩。
- 大小寫 — 輸入不區分大小寫。輸出會正規化為小寫，使同一個色彩在程式碼中看起來始終一致：#3B82F6 和 #3b82f6 完全相同。
- 補零 — 會進位為單位數的通道會以前置零撰寫。值 0 會呈現為 00，而不是單獨的 0——這是手動轉換時容易出錯的細節。
當你貼上格式錯誤的 HEX 字串（長度錯誤或非法字元）時，一個行為良好的轉換器會標記錯誤，而不是猜測某個色彩。RGB To HEX 轉換器會清楚地顯示格式錯誤的輸入，而不是悄悄產生錯誤的色調。
如何在 RGB 與 HEX 格式之間轉換
在 RGB To HEX 工具中，兩種格式之間的轉換只需要幾個點擊。
- 在瀏覽器中開啟 RGB To HEX 轉換器。
- 將紅、綠、藍的值（每個 0–255）輸入 RGB 輸入欄位，以產生對應的 HEX 代碼。
- 若要反向操作，將像 #3b82f6 這樣的 HEX 色彩——或簡寫 #abc——貼到 HEX 欄位，對應的 RGB 值就會出現。
- 在即時色彩預覽旁邊讀取 HEX、RGB 和 HSL 讀數，以確認色塊符合你的預期。
- 點擊你所需要的格式旁邊的 Copy，然後貼到你的樣式表、設計檔案或品牌文件中。
如果你輸入超出 0–255 範圍的通道值或非整數，轉換器會將輸入限制在有效的整數範圍內，而不是拋出錯誤，因此意外的拼字錯誤不會中斷你的工作流程。一切都在 JavaScript 中於本地端執行，這代表沒有任何色彩值會上傳到伺服器——可安全用於品牌色調與未公開的作品。
實作範例：手動讀取 HEX 格式
以廣為使用的 UI 藍色 rgb(59, 130, 246) 為例。若要以 HEX 格式表示，請將每個十進位通道轉換為兩位數的十六進位字串：
59 ÷ 16 = 3 餘 11 → 十六進位數字 3 和 b → 3b 130 ÷ 16 = 8 餘 2 → 十六進位數字 8 和 2 → 82 246 ÷ 16 = 15 餘 6 → 十六進位數字 f 和 6 → f6
依序將三組配對以前置井字號連接起來，就得到 HEX 字串 #3b82f6。反向操作——讀取 #3b82f6——則可拆回 3b（紅 = 59）、82（綠 = 130）和 f6（藍 = 246）。RGB To HEX 工具會在兩個方向上為你完成這些運算，並在即時預覽色塊旁顯示結果。
常見的 RGB 轉 HEX 格式數值
下表列出眾所周知的參考點，作為該格式的基準。用它們來檢查轉換器是否產生預期的輸出。
| 色彩 | RGB | HEX 格式 |
|---|---|---|
| 黑色 | rgb(0, 0, 0) | #000000 |
| 白色 | rgb(255, 255, 255) | #ffffff |
| 純紅 | rgb(255, 0, 0) | #ff0000 |
| 純綠 | rgb(0, 255, 0) | #00ff00 |
| 純藍 | rgb(0, 0, 255) | #0000ff |
| UI 藍 | rgb(59, 130, 246) | #3b82f6 |
簡寫形式對這些色彩也很有用：#000 等於 #000000，#fff 等於 #ffffff，#f00 等於 #ff0000。選用簡寫能在程式碼中省下幾個字元，但產生相同的色彩，因此只要其他格式規則成立，兩種形式都可接受。
為何 RGB 轉 HEX 格式歷久不衰
這個格式之所以沿用數十年，是因為它正好位於三種需求的交會點：它夠密集，能定址 24 位元空間中的每一種色彩；它夠緊湊，能舒適地放進 CSS 規則；它夠有結構，能以機械方式解析。設計師能在 Figma 和樣式表之間直接貼上，無需翻譯；開發人員能將它讀回 RGB 通道以用於影像編輯器；簡寫形式則讓任何人不必透過計算機就能撰寫常見的色彩。
除了 HEX 和 RGB，RGB To HEX 轉換器還會回報 HSL——色相、飽和度和亮度——以人類更直觀的方式描述同一個色彩。色相是色環上從 0 到 360 度的角度；飽和度和亮度則是百分比。這使得 HSL 成為微調品牌色彩（讓它稍亮一些或稍暗一些）的好方法，而不必猜測原始通道數值，接著再直接轉回你的樣式表可用的 HEX 字串。
若要對文字可讀性進行快速檢查（在設定好 HEX 色彩之後），color contrast checker 能在你發布之前確認前景/背景配對符合 WCAG 對比指南。
如果你正在權衡選項，RGB to HSV on Android: Match the Color.RGBToHSV Scale 對此有詳細說明。
如果你正在權衡選項，Is My Data Uploaded Anywhere When I Mix Two HEX Colors? 對此有詳細說明。