HEX 色彩代碼將顏色描述為 #RRGGBB，其中每兩個一組的數字對代表一個以十六進位表示的 RGB 色頻——例如，常見的 UI 藍色 rgb(59, 130, 246) 在 CSS 中寫成 #3b82f6。對於網頁設計來說，這點很重要，因為同一個 24 位元色彩空間支援了 CSS、HTML、Figma、Photoshop，以及幾乎所有現代的樣式規範，所以在不同格式之間轉換顏色，是幾乎每個樣式工作中都會遇到的環節。從 Figma 規格出發的網頁設計師需要 HEX 來填入樣式表；讀取 CSS 檔案的開發者需要 RGB 色頻值以供影像編輯器或色彩運算使用；而記錄調色盤代符的品牌團隊，則希望所有格式能並列呈現。一個瀏覽器型的 RGB 轉 HEX 轉換工具能在同一處完成三種方向的轉換，並提供即時色塊，讓你在複製到程式碼前能先確認色調。由於轉換是在 JavaScript 中於本機端執行，因此調色盤數值與未公開的品牌色都不會離開你的電腦。
為什麼網頁設計師每天都將 RGB 轉為 HEX
網頁設計師不斷在 RGB 與 HEX 之間切換，因為不同工具預設使用的標記法不同。像 Figma 和 Sketch 這類設計工具通常以 RGB 三元組或 HSL 顯示顏色，而 CSS 檔案、HTML 屬性、SVG 填色，以及大多數文件則以 HEX 字串表示。對單一顏色來說，手動轉換只需幾秒鐘，但當要記錄整組調色盤、將截圖選色器的數值對應到樣式表變數，或審核品牌規格中不一致之處時，就會變得繁瑣。
專門的 RGB 轉 HEX 轉換器能消除這種摩擦。你可以貼上任何一種格式的數值，立即取得對應的標記法，並同時顯示 HSL 讀數與即時色塊，讓你複製到工作流程下一個檔案時，能取得最精確的表示方式。
HEX 代碼如何對應到 RGB 色頻
HEX 格式是一種精簡的寫法，用來表示三個整數。每個 RGB 色頻的值介於 0 到 255 之間，以十六進位表示時則寫成兩位數，從 00 到 FF。完整的顏色會串接成 #RRGGBB 的形式——先是紅色，再來是綠色，最後是藍色。由於每一對涵蓋 256 個數值，且三對彼此獨立，因此六位數的 HEX 能描述 256 × 256 × 256 = 16,777,216 種不同的顏色。這正是 CSS、HTML 和主流設計工具所依賴的同一個 24 位元色彩空間，這也說明了為何樣式表中的 hex 字串與選色器中的 rgb() 三元組描述的是同一個實體顏色。
三位數的簡寫也很常見。像 #abc 這樣的代碼會將每位數字重複來解讀，因此展開後是 #aabbcc。簡寫 #f00 會變成 #ff0000（純紅），#0f0 變成 #00ff00（綠色），#fff 變成 #ffffff（白色）。大多數轉換器（包括 RGB 轉 HEX 工具）都接受簡寫、大寫或小寫，並把前端的井字號視為可選，因此 abc、#abc 和 ABC 都能解析為同一個顏色。
輸出的 HEX 通常會正規化為小寫六位數形式，每個色頻皆以零補滿。例如紅色色頻為 12 時會顯示為 0c，而不是只有 c 而缺少其他位數，這個小細節經常讓手動轉換出錯。超出範圍或非整數的色頻值會被限制在有效的 0–255 整數區間內，而不是直接報錯；格式錯誤的輸入（長度不對或含有非法字元）也會清楚地標示出來，而不是靜默地產生錯誤的顏色。
如何在網頁設計中將 RGB 轉為 HEX
- 在瀏覽器中開啟 RGB 轉 HEX 轉換器。無需帳號、外掛或上傳步驟。
- 在 RGB 輸入欄位中輸入紅、綠、藍色頻值。每個色頻接受 0 到 255 的整數；超出範圍的值會被限制而非拒絕，因此 300 會變成 255，而不是中斷計算。
- 從 HEX 輸出欄位讀取對應的 HEX 代碼。即時色塊會在你輸入時更新，讓你在複製前能以視覺方式確認色調。
- 如果你想將顏色反查回 RGB，可在 HEX 欄位貼上 HEX 值——例如 #3b82f6 或簡寫 #abc。轉換可在同一畫面雙向進行。
- 點擊你要使用的格式旁的「複製」按鈕。HEX、RGB 與 HSL 都可供複製，因此你可以直接將正確的格式貼入樣式表、設計檔或品牌規格中。
- 對調色盤中的每個顏色重複相同步驟。此工具不會在連線階段之間儲存任何輸入，因此可以放心貼上品牌限定或尚未公開的數值。
快速參考：常見的網頁 UI RGB 與 HEX 配對
一份收錄常用 UI 顏色的小表格，能在你已經知道目標色調時，省去使用轉換器的麻煩。下方所列的數值是精確且記載詳實的參考值，當設計師交給你一組 hex 字串、而你需要驗證色頻拆分時，可作為起點；對於未列出的顏色，請將你的數值貼入轉換器，並複製對應的格式。
| 顏色名稱 | RGB | HEX |
|---|---|---|
| 純紅 | 255, 0, 0 | #ff0000 |
| 純綠 | 0, 255, 0 | #00ff00 |
| 純藍 | 0, 0, 255 | #0000ff |
| 白色 | 255, 255, 255 | #ffffff |
| 黑色 | 0, 0, 0 | #000000 |
| Tailwind blue-500 | 59, 130, 246 | #3b82f6 |
| Tailwind slate-900 | 15, 23, 42 | #0f172a |
在樣式表與設計檔中讀取 HEX 代碼
取得 HEX 代碼後，它能像 rgb() 函式一樣輕鬆地放入樣式表。CSS 接受這兩種形式且彼此互通，因此 color: #3b82f6; 與 color: rgb(59, 130, 246); 會呈現相同的色調。設計工具則將同一個數值視為填色或描邊顏色，無需任何轉換步驟。SVG 的 fill 與 stroke 屬性直接接受 HEX，而許多電子郵件模板偏好使用 HEX，因為部分用戶端會在清理過程中移除 rgb() 函式。
當你拿到一份樣式表，並需要色頻層級的數值時——例如為了確認顏色符合品牌規格、將其與另一個色調混合，或將 RGB 三元組交給印刷廠商——請將 HEX 貼入轉換器。RGB 讀數、HSL 分解與即時色塊能讓你在交付前驗證顏色是否如你所預期。
在網頁設計中搭配 HSL 與 HEX 使用
HSL 以更貼近設計師思考方式的角度來描述同一個顏色：色相是色輪上 0 到 360 度的角度，而飽和度與亮度則是 0 到 100 的百分比。將亮度從 35% 微調到 45%，會讓品牌色稍微變淡；將飽和度從 80% 降到 60%，會讓顏色更為柔和。你可以快速調整這些數值，因為 HSL 的變化在感覺上比原始 RGB 色頻的微調更具比例性。
RGB 轉 HEX 工具會同時顯示 HSL 與 HEX、RGB，因此不論下一個檔案需要哪種格式，你都能直接複製。針對以無障礙為考量的設計，RGB 轉 HEX：無障礙色彩對比指南會帶領你使用相同的 HEX 與 HSL 讀數來挑選對比組合。
讓網頁設計色彩工作流程更順暢的訣竅
幾個習慣能讓 RGB 與 HEX 轉換在整個專案中更不易出錯：
- 在提交前先將 HEX 字串正規化。小寫六位數形式是最安全的預設；混用大小寫或簡寫雖然可行，但容易讓 diff 工具與設計交付匯出產生混淆。
- 為每個品牌色同時記錄 HEX 與 HSL。HEX 是 CSS 實際使用的格式；當設計師要求「再亮一點」或「飽和度降低」時，HSL 就是你要調整的依據。
- 將 RGB 貼入轉換器，並把 HEX 直接複製到 CSS 自訂屬性中。這能避免手動轉換時產生的算術錯誤，特別是在偏離主軸的色頻上。
- 將即時色塊視為最後的視覺檢查。超出範圍的色頻會被限制而非拒絕，因此不小心打成 380 時會靜默變成 255；色塊能讓你在複製前清楚看到這個錯誤。
- 從單一基準色衍生變化。一旦有了品牌 HEX，調色盤產生器就能在同一個 24 位元色彩空間內，產生互補、類似與三等分等配色變體。
對於需要從單一起始顏色產生一組協調色調的專案來說，調色盤產生器與本轉換器搭配使用十分自然——選定一個基準 HEX，產生變體顏色，再將每個結果以 RGB 或 HSL 形式讀回以便記錄。這兩個工具涵蓋了網頁設計師從規格到樣式表、再到交付的完整流程。
延伸閱讀：RGB 轉 HSV 轉換器：色相刻度與邊界情況。