要把 RGB 轉換成 HEX，請取三個通道值（紅、綠、藍，每個值的範圍從 0 到 255），用 16 進位表示法把每個值翻譯成兩位數的十六進位數字，然後在井號 (#) 後串接這三對數字，即可組成一個像 #3b82f6 這樣的六字元色彩代碼。這種轉換是一種純粹的數學對應，沒有四捨五入，也不會損失任何色彩資訊，這就是為什麼設計師、開發者和數位藝術家能夠在兩種格式之間不斷切換，卻完全不擔心色彩失真的原因。HEX 是網頁在 CSS、HTML、JavaScript 和 SVG 內部使用的簡寫形式，而 RGB 則是螢幕用來描述三個通道上光線強度的方式。兩者在 sRGB 色彩空間中編碼的是同一種顏色；它們只是用來表示同一組底層數字的不同語言。
如果你在建置網站、撰寫設計規格、為應用程式設計主題，或是以程式方式產生 CSS，你幾乎一定曾經需要把從某個系統選出的顏色，翻譯成另一個系統所要求的格式。偶爾處理單一數值時，手動換算還可行，但當你要比較調色盤、建立漸層，或是在不同檔案之間對齊品牌色時，手動換算很快就會變得枯燥乏味。這正是專門打造的轉換工具能發揮價值的地方。
RGB 和 HEX 究竟代表什麼
RGB 是由三個通道——紅、綠和藍——建構的色彩模型，每個通道承載從 0（該通道完全沒有亮度）到 255（該通道最大亮度）的強度值。由於每個通道有 256 種可能值，整個色彩空間共包含 256 × 256 × 256 = 16,777,216 種不同的顏色。純紅是 rgb(255, 0, 0)，純綠是 rgb(0, 255, 0)，純藍是 rgb(0, 0, 255)，而純白是 rgb(255, 255, 255)。黑色則是 rgb(0, 0, 0)。
HEX 只是同一組三個數字用 16 進位而非 10 進位來表示，並在前面加上井號。前兩個字元編碼紅色，中間兩個編碼綠色，最後兩個編碼藍色。因此 rgb(59, 130, 246) 會變成 #3b82f6——紅色為 3B，綠色為 82，藍色為 F6。由於十六進位數字從 0–9 然後是 A–F，兩個位元所能表示的最大值是 FF，等於十進位的 255。兩者的範圍完全對應。
轉換公式，一步一步來
- 從三個十進位數值開始。例如 R = 59，G = 130，B = 246。
- 把每個數值轉換成十六進位。除以 16 得到第一位數字，餘數作為第二位數字。59 ÷ 16 = 3 餘 11 → 3B。130 ÷ 16 = 8 餘 2 → 82。246 ÷ 16 = 15 餘 6 → F6。
- 必要時在單一位數前面補 0。任何小於 16 的數值（例如十進位的 5，十六進位也是 5）都必須寫成 05，這樣字串才會始終保持六位數。
- 按照 RGB 順序串接三對數字，前面加上 #。結果就是
#3B82F6。CSS 不區分大小寫，因此#3b82f6也能正常運作。
你可以反向驗算這個數學過程：3 × 16 + 11 = 48 + 11 = 59。8 × 16 + 2 = 128 + 2 = 130。15 × 16 + 6 = 240 + 6 = 246。數字完全吻合。MDN Web Docs 中關於十六進位色彩值的參考資料也確認了每一對數字代表 RGB 三元組中的一個通道。
如何使用瀏覽器工具把 RGB 轉換成 HEX
- 開啟 RGB To HEX 轉換工具。
- 在三個輸入欄位中輸入你的紅、綠、藍數值。每個欄位接受介於 0 到 255 之間的數字。
- HEX 欄位會自動更新，而色塊也會即時重新整理以顯示目前的顏色。
- 點選 HEX 數值旁的複製按鈕，把
#xxxxxx複製到你的剪貼簿。 - 如果要反向操作，把像
#3b82f6這樣的 HEX 代碼或簡寫#abc貼到 HEX 欄位；RGB 和 HSL 欄位會立刻自動填入。 - 複製你需要的格式——CSS 用 HEX，JavaScript 或設計規格用 RGB，基於色相微調則用 HSL。
工具會自動處理簡寫 HEX（像 #abc 這樣的三位數形式），方法是把每個數字展開成兩個一組：#abc 會變成 #aabbcc。這個規則定義在 CSS Color Module 中，並且所有現代瀏覽器都支援，因此這個展開動作永遠是安全的。
並列閱讀 HSL 輸出結果
HSL 代表色相（Hue）、飽和度（Saturation）和亮度（Lightness）。它以視覺上更容易理解的方式表示同一種顏色。色相是色盤上的一個角度（0 是紅色，120 是綠色，240 是藍色），飽和度是該色相的強度，從 0%（灰色）到 100%（全飽和），亮度則從 0%（黑色）到 100%（白色），其中 50% 代表純色相。hsl(217, 91%, 60%) 和 #3b82f6 以及 rgb(59, 130, 246) 代表的是同一種顏色。
設計師在建構調色盤時通常偏好 HSL，因為調整亮度滑桿可以可預期地讓顏色變亮或變暗，卻不會偏移其色相；這在 RGB 或 HEX 中較難做到，得重新計算數學。這個轉換工具會把 HSL 和 HEX、RGB 並列顯示，讓你能以三種不同的方式讀取同一種顏色。
值得認識的常見 HEX 簡寫
| HEX 形式 | 意義 | 範例 |
|---|---|---|
| 六位數 | 完整的 RGB 三元組，每個通道一對 | #3b82f6 |
| 三位數 | 簡寫；每個數字重複一次 | #abc = #aabbcc |
| 八位數（RGBA） | 六位數加上兩位數的透明度 | #3b82f680 = 50% 透明度 |
| 四位數（RGBA） | RGBA 簡寫；成對展開 | #3b82f680 縮寫成 #3f8f6 是無效的；正確形式為 #RGBA |
三位數簡寫只有在所有三對數字原本就是重複數字的情況下才有效——也就是說像 33 這種配對可以寫成 3，但 3b 不行。#3b82f6 沒有簡寫形式，因為它沒有任何一對是兩個相同的數字。
在實際專案中，何時該用 RGB 或 HEX
CSS、HTML 和大多數樣式工具都能互換使用這兩種格式，但還是有一些慣例。HEX 更精簡——只有六個字元，比 rgb() 函式呼叫來得短——因此在樣式表中，檔案大小和可讀性很重要的情況下，HEX 往往勝出。RGB（尤其是 rgba()）則更自我描述：rgb(59, 130, 246) 能讓閱讀者立刻看出哪個通道是哪個，而 #3b82f6 必須靠「第一對是紅、第二對是綠、第三對是藍」的慣例才能解讀。在 JavaScript 中，以程式方式建構顏色時，通常用 RGB 會比較乾淨，因為每個通道可以分別設定為獨立的變數。
然而，對於印刷或輸出前的處理工作來說，HEX 和 RGB 都不是合適的目標。螢幕發出光線，但印刷是在紙張上使用油墨，這兩者是根本不同的模型。如果你的顏色是要送交印刷機，請先使用 RGB 轉 CMYK 轉換工具轉成 CMYK，以大致掌握印刷機將如何重現這個顏色。CMYK 的色域比 sRGB 小，因此某些鮮豔的螢幕顏色無法在印刷機上完全精準重現。
圍繞單一顏色建立調色盤
當你手上有一個 HEX 代碼時，自然的下一步通常是衍生出相關的顏色，用於 hover 狀態、邊框、背景以及對比配色。調色盤產生器會以一個基礎顏色為起點，產生互補色、類似色、三等分色以及其他基於和諧法則的配色方案——這對於把單一品牌色擴展成完整調色盤非常有幫助，無需靠猜測。如果你需要了解兩個特定顏色之間的視覺關係，顏色混合器會把它們混合起來，並同時以 HEX 和 RGB 顯示精確的結果。
在無障礙設計方面，你挑選的每個 HEX 數值都應該和它相鄰的顏色進行檢查。顏色對比檢查工具會對一組文字與背景配對套用 WCAG 2.2 對比公式，並告訴你在所選文字大小下是否能通過 AA 或 AAA 標準。這很重要，因為一個 HEX 代碼在純白背景下可能看起來完全可讀，但在接近白色的淺色背景上卻可能嚴重不合格。
快速參考：每個工具最適合的場景
| 任務 | 最佳工具 |
|---|---|
| 轉換單一 RGB 或 HEX 數值 | RGB To HEX |
| 從單一基礎顏色建立調色盤 | 調色盤產生器 |
| 混合兩種顏色以找出中間值 | 顏色混合器 |
| 檢查文字對比是否符合無障礙標準 | 顏色對比檢查工具 |
| 準備用於印刷的顏色 | RGB 轉 CMYK 轉換工具 |
如果想更深入地了解 RGB 轉 HEX 的過程並搭配更多範例，請參閱使用免費即時色彩工具在線上把 RGB 轉換成 HEX的相關指南。如果你剛入門，並希望從不同角度再次理解這個公式，如何把 RGB 轉換成 HEX這份實用指南會以略微不同的切入點涵蓋相同的內容。
這套底層數學從網路早期至今都沒有改變，未來也不太可能改變：HEX 和 RGB 描述的是同一個 sRGB 色彩空間，兩者之間的轉換是一種固定且無損的對應關係。改變的只是設計師與開發者需要進行這種轉換的頻率——以及他們期望完成轉換的速度。一個完全在瀏覽器中運作的專用轉換工具能省去心算與打錯字的風險，讓你能把心力集中在設計決策本身，而不是編碼方式。
延伸閱讀：在 Chrome 中檢查色彩對比以提升無障礙設計。