RGB 轉 HEX 公式將每個顏色表示為一個六位數的十六進位字串，格式為 #RRGGBB，其中每兩個字元一組，分別代表紅、綠、藍三個色通道，以十六進位而非十進位書寫。由於一個位元組可以容納 0 到 255 的值，而十進位的 255 在十六進位中寫作 FF，因此每組正好涵蓋 00 到 FF 的範圍——也就是 RGB 色通道所能呈現的 256 個階梯。三組數字會在前面加上井號後串接起來，所以一個顏色的完整 HEX 格式就是 # 後面接六個十六進位字元：紅色兩個、綠色兩個、藍色兩個。六個數字各有 256 個值，總共可組合出 256 × 256 × 256 = 16,777,216 種不同的顏色，這就是 CSS、HTML、Figma、Photoshop 以及大多數樣式規範所採用的標準 24 位元色彩空間，也是為什麼在開發人員與設計師之間轉換 RGB 與 HEX 是如此例行的工作。
為什麼 HEX 使用十六進位而非十進位
十進位與十六進位只是表示同一組數字的兩種方式。十進位使用 0–9 的數字；十六進位則使用 0–9 的數字加上字母 A–F，其中 A 代表 10、B 代表 11、C 代表 12、D 代表 13、E 代表 14、F 代表 15。十六進位之所以特別適合用於數位色彩，是因為一個位元組——也就是大多數電腦所能定址的最小記憶體單位——正好容納 256 個值，而 256 正是 16 × 16。
將每個色通道寫成兩個十六進位數字，因此能為每一個可能的位元組值提供簡潔、固定長度的表示法。0 變成 00，1 變成 01，10 變成 0A，255 變成 FF，數字該佔幾位永遠不會有模糊地帶。這種固定長度正是 HEX 能在 CSS 與 HTML 的色彩代碼中勝過純十進位的實際原因——樣式表解析器永遠能精確知道一個色通道在哪裡結束、下一個又在哪裡開始。
前方的 # 只是個慣例，用來避免 HEX 顏色在標記語言中被誤認為數字或文字。它本身不具任何數學意義；無論是否加上 #，下面所有公式的運算結果都一樣。
RGB 轉 HEX 公式逐步說明
這個轉換只是三個獨立的十進位轉十六進位過程拼在一起。對每個色通道而言，將十進位值除以 16 得到兩個數：整數商數成為第一個十六進位數字（高半位元，high nibble），餘數則成為第二個十六進位數字（低半位元，low nibble）。接著把 10 到 15 之間的數字對應到字母 A–F，最後在前面加上 # 串接三組結果。
寫成公式形式，其中 Red、Green、Blue 是介於 0 到 255 之間的十進位值：
Hex = # (Red ÷ 16)(Red mod 16) (Green ÷ 16)(Green mod 16) (Blue ÷ 16)(Blue mod 16)
兩個運算子——整數除法（÷）與餘數（mod，除法後的餘數）——就是這個公式所需的全部算術。每個結果都寫成剛好兩個字元，當商數小於 10 時會在前面補上 0。
為了實際演練這個公式，我們以常見的 UI 藍色 RGB (59, 130, 246) 為例：
- Red 59：59 ÷ 16 = 3，餘數 11 → 數字 3 與 B → 3B
- Green 130：130 ÷ 16 = 8，餘數 2 → 數字 8 與 2 → 82
- Blue 246：246 ÷ 16 = 15，餘數 6 → 數字 F 與 6 → F6
在前方加上井號串接後，公式得出 #3B82F6——這與任何樣式表中這個常用 UI 藍色所產生的值相同。如果想更仔細了解每組數字實際代表的意義，《RGB 轉 HEX 解析：每組數字的意義》這篇白話教學會再深入一層。
使用即時工具轉換 RGB 與 HEX
這個公式對一兩個顏色來說用手算很容易，但當你在檢查一整組調色盤或依據設計師的規格表工作時，很快就會變得枯燥乏味。一個雙向的 RGB 轉 HEX 轉換器在你輸入的瞬間就會套用同樣的「除法與取餘數」運算，並讓你貼回 HEX 值以取得 RGB 色通道，不必再重做算術。
- 在瀏覽器中開啟 RGB 轉 HEX 轉換器。
- 在 RGB 欄位中輸入紅、綠、藍三個色通道的值（每個都介於 0 到 255 之間）。對應的 HEX 代碼會在你輸入的同時顯示，並搭配一個即時色塊，讓你能確認顏色。
- 若要反向轉換，把像 #3b82f6 這樣的 HEX 顏色——或簡寫的 #abc——貼到 HEX 欄位。工具會自動展開簡寫、不分大小寫，並允許省略前方的 #。
- 在即時顏色預覽旁讀取 HEX、RGB 與 HSL 的值，然後點選你所需格式（用於樣式表、電子郵件或設計檔案）旁的 複製 按鈕。
所有運算都在 JavaScript 本機端執行，因此顏色值絕不會被傳送到伺服器——這在處理品牌調色盤或未公開的設計時是個非常實用的特性。隱私與精確度指南說明了這對敏感工作實際上代表什麼意義。
參考數值：常見的 RGB 與 HEX 配對
下表列出幾組 RGB 三元組及其對應的 HEX 代碼，這些都是公式必然得到的結果。這些是 24 位元色彩空間的標準基準色，並非本文內計算出的結果，因此當你驗證自己的轉換時，可以把它們當作 sanity check 使用。
| 顏色 | RGB (R, G, B) | HEX |
|---|---|---|
| 黑色 | (0, 0, 0) | #000000 |
| 白色 | (255, 255, 255) | #ffffff |
| 純紅 | (255, 0, 0) | #ff0000 |
| 純綠 | (0, 255, 0) | #00ff00 |
| 純藍 | (0, 0, 255) | #0000ff |
| 常用 UI 藍 | (59, 130, 246) | #3b82f6 |
每一列都是公式的直接應用：三個色通道依序轉換為兩位數的十六進位組，並在前面加上 # 串接起來。例如，RGB (255, 0, 0) 會變成 #FF0000，因為 255 ÷ 16 = 15，餘數為 15，而 0 在任何進位下都永遠是 00。RGB (59, 130, 246) 會變成 #3B82F6——也就是上面演練過的同一個 UI 藍色——這是快速確認公式是否正確套用的好方法。
公式的邊界情況：簡寫、超出範圍與驗證
這個「除法與取餘數」的公式假設輸入是三個介於 0 到 255 之間、格式正確的十進位值。但有幾種常見的輸入會違反這個假設，每一種都需要明確的規則，而不是默默猜測。
三位數簡寫。像 #abc 這樣的 HEX 並非另一種格式——它是 #aabbcc 的簡寫，也就是把每個數字重複一次。按照同樣的規則，#f00 會展開成 #ff0000（純紅），而 #fff 會變成 #ffffff（白色）。展開後，其餘的公式與六位數的情況完全相同。
超出範圍的值。如果某個十進位色通道小於 0 或大於 255，或者以小數形式輸入，公式就會失效，因為除法結果不再能容納在一個位元組內。可靠的轉換器不會輸出一個無意義的 HEX，而是先把值箝制（clamp）到合法的 0–255 範圍內。-10 會變成 0，300 會變成 255，而 127.8 會變成 128。轉換仍然會執行——它只是先把輸入對應到最接近的合法色通道，再套用公式。
反向轉換時格式錯誤的輸入。當要把 HEX 轉成 RGB 時，輸入必須剛好是三個或六個合法的十六進位字元，井號可有可無。長度錯誤的字串，或包含 A–F 以外字母的字串，無法被切成三組有效的配對，與其默默產生一個錯誤的顏色，應該清楚地標記出來。如果你經常在手動轉換時碰到這些邊界情況，RGB 轉 HEX 轉換器會在介面上就地標出問題，而不是自行猜測。
大小寫與前方的 #。公式本身不區分大小寫——ABC、#abc 與 abc 描述的都是同一個顏色。按照慣例，輸出會統一規範為小寫六位數形式，每個色通道都以零補滿兩位數，因此 0 會渲染成 00 而不是單獨的 0。這個小細節是最容易在人工手算轉換時遺漏的，而這也正是針對 RGB 轉 HEX 技巧與常見錯誤的專題檢查所要抓出的那種細微失誤。