HEX 只是以 16 進位重新表示的 RGB：顏色寫成 #RRGGBB，把紅、綠、藍三個通道打包成三組兩位數字配對，其中 00 代表 0，FF 代表 255，六位數字合在一起描述 256 × 256 × 256 = 16,777,216 種不同的顏色——這與 CSS、HTML、Figma 等設計工具，以及大多數樣式指南所使用的 24 位元色彩空間相同。因為 RGB 和 HEX 描述的是完全相同的顏色集合，兩者之間的轉換只是進位制的改變，而非顏色的改變，這代表每個 RGB 值都恰好對應一個正確的 HEX 值——而且只有通道為重複十六進位數字（00、11、22、…、FF）的子集，才會同時擁有有效的三位數簡寫形式。這也是為什麼人們犯下的大部分錯誤根本不是數學錯誤——而是在標記上出現小失誤，例如漏掉了前導井號、少了零，或未展開的簡寫。最簡單的避免方式是讓一個熟知規則的轉換器——懂得簡寫展開、零補齊、大小寫處理、以及超出範圍時的夾限處理——負責寫程式碼，你只需閱讀即時預覽並確認顏色正是你所預期的。
RGB 與 HEX 究竟如何對應
用白話文說明轉換公式很簡單。三個通道各自就是你已經在 rgb() 中使用的整數——0 到 255 的數字——而 HEX 把這個整數以 16 進位表示，並補齊為正好兩個字元。所以 0 變成 "00"，9 維持 "09"，10 變成 "0A"，255 變成 "FF"，介於其中的任何數字也會落在相同的範圍內。三個兩字元結果前置 "#" 即構成完整的 HEX 代碼。
用一個熱門的 UI 藍色作為示範範例。取 RGB (59, 130, 246)——這是許多 "blue-500" 色票背後的通道值。要得到對應的 HEX，手動把每個通道轉為 16 進位：
- 59 ÷ 16 = 3 餘 11 → "3B"
- 130 ÷ 16 = 8 餘 2 → "82"
- 246 ÷ 16 = 15 餘 6 → "F6"
把這些串接起來並加上前導 "#"，結果就是 #3B82F6，轉換器會將其標準化為小寫的 #3b82f6。兩種形式描述同一種顏色，CSS 兩者皆接受——小寫形式只是多數樣式指南採用的慣例。如果想更深入了解每一對數字的意義，RGB to HEX 完整解析指南詳細介紹了通道模式。
簡寫規則是另一個關鍵。當三組配對都是同一個數字連續出現兩次——也就是每一對都是重複字元——HEX 就能以三個字元而非六個來表示。所以 #abc 展開為 #aabbcc，#f00 變成 #ff0000（純紅），#fff 變成 #ffffff（白色）。展開規則永遠是把每個數字重複一次，而非截斷；#abc 並不代表「平均值」或「前三位數」。
| RGB | HEX（完整形式） | HEX（簡寫） | 名稱 |
|---|---|---|---|
| (0, 0, 0) | #000000 | #000 | 黑色 |
| (255, 255, 255) | #ffffff | #fff | 白色 |
| (255, 0, 0) | #ff0000 | #f00 | 純紅 |
| (0, 255, 0) | #00ff00 | #0f0 | 綠色 |
| (0, 0, 255) | #0000ff | #00f | 藍色 |
| (59, 130, 246) | #3b82f6 | — | 熱門 UI 藍 |
使用工具將 RGB 轉為 HEX
這是在你希望由可靠的轉換器代勞時的實際工作流程。
- 在任何現代瀏覽器中開啟 RGB 轉 HEX 轉換器——無需註冊，無需安裝。
- 將紅、綠、藍三個通道數字輸入三個輸入框。每個框接受 0 到 255 的數值；超出範圍或小數輸入會被夾限至最近的合法整數，而非拋出錯誤。
- 在即時色彩預覽旁讀取對應的 HEX、RGB 和 HSL 值。輸入時色票會即時更新，因此可在複製前以視覺確認色調。
- 點擊 HEX 那一列的複製按鈕，取得小寫六位數代碼（例如 #3b82f6），可直接貼到 CSS 檔、設計規格或 token 文件中。
- 若要反向轉換，請將任何 HEX——包括三位數簡寫如 #abc，或缺少前導 "#" 的輸入——貼到 HEX 欄位。工具會展開簡寫，接受大寫或小寫，並在同樣的即時色票旁顯示對應的 RGB 和 HSL。
會產生錯誤顏色的失誤
因為 RGB 和 HEX 描述的是同一組顏色，正確答案永遠是明確的——正因如此，小小的標記失誤影響才會如此嚴重。以下列舉的錯誤是在實際設計與開發工作中最常出現的情況，而每一個都可透過轉換器以簡潔方式避免。
忘了前導井號。CSS 和大多數設計工具都要求 HEX 值以 "#" 開頭。像 3b82f6 這種值會被解析為未知的識別字，或在不知不覺中被視為無效，顏色會回退為渲染程式選擇的預設值——通常是前一個顏色或透明。轉換器永遠會將輸出標準化為 "#abcdef" 的形式，因此你複製的內容可直接貼上使用。
省略了零補齊。通道值 0 必須顯示為 00，而非 0。HEX 簡寫將每一對視為剛好兩個字元；單純的 0 並非有效的 HEX 通道，某些瀏覽器會因此拒絕整個宣告。轉換器的輸出永遠是零補齊的六位數形式，所以這種失誤無法逃過複製。
混淆簡寫規則。簡寫只在每對都是同一數字連續兩次時才有效。#abc 是有效的，因為每個位置都是重複字元（#aabbcc），但 #ab9 並非簡寫——它無法被安全展開，任何將其「展開」為 #aabb99 的工具都會產生與輸入不同的顏色。請謹慎貼上簡寫，並在上線前於預覽中確認展開形式。
輸入超出範圍的通道值。rgb(260, 0, 0) 和 rgb(-10, 128, 128) 都超出了 0–255 的範圍。天真的手動計算可能產生環繞結果或剖析錯誤。轉換器會將這類輸入夾限至最近的合法整數，因此 260 變成 255，-10 變成 0——色票顯示的就是實際會出貨的顏色。
信任一個沉默的轉換器。代價最高的錯誤是那種不會報錯的錯誤。有些工具接受格式錯誤的 HEX（長度錯誤、非法字元），卻回傳「最佳猜測」或部分剖析結果而不告知。RGB 轉 HEX 轉換器會明確標示格式錯誤的輸入，而不是產出沉默的錯誤顏色，所以你隨時能確認螢幕上的值是否正是你所要求的值。
混淆大小寫處理。ABC、#abc 和 abc 描述的都是同一種顏色，CSS 也接受任何大小寫，但在同一套規則中混用 #3B82F6 與 #3b82f6 的手寫樣式表看起來不夠專業，也讓 diff 變得雜亂。統一採用轉換器輸出的小寫六位數形式，你的 token 就能在所有檔案中保持一致。
讓轉換更乾淨的訣竅
把即時預覽視為真相來源，而非數字本身。兩個相近但不完全相同的顏色，在 16 色縮圖中可能四捨五入成相同的 HEX，但在完整解析度下看起來明顯不同。如果轉換器中的色票與設計工具中的色票相符，那麼代碼就是正確的。
在 token 文件中同時保留 RGB 和 HEX。有些工具只匯出 RGB，有些只匯出 HEX，有些兩者皆接受。同時儲存兩者——即使顯得冗餘——能在每次有人開啟檔案時省去一道轉換步驟。本工具一次提供三種格式（HEX、RGB、HSL），所以只要一次複製就能涵蓋下游工具常見的所有格式。
在講求精確度時執行反向檢查。把 HEX 複製到樣式表後，貼回轉換器的 HEX 欄位，確認 RGB 能完全往返。如果不能，要嘛你複製錯了字元，要嘛你用到一個悄悄截斷數值的工具。即時色票會讓這個不一致一目瞭然——貼上後色票會立即更新，因此你能立刻看到差異，而不是在程式碼審查時才發現。
什麼時候 HSL 比原始 RGB 更實用
HEX 和 RGB 用螢幕產生顏色的方式（光的通道）來描述顏色，但不符合人類思考顏色的方式（什麼看起來更藍、什麼看起來更亮）。轉換器也會回報 HSL——色相為色環上 0 到 360 度的角度，飽和度與亮度則是 0–100% 的數值。這讓你可以輕鬆地把品牌色調亮或調淡幾個百分比，只需改一個數字，不必重新計算三個通道。當你得到想要的 HSL 後，把任一個值貼回轉換器，從同一個色票讀取對應的 HEX，再把結果直接複製到你的樣式表即可。
為什麼在瀏覽器中執行很重要
轉換在 JavaScript 中於本機進行——顏色數值絕不會上傳到伺服器。對於正在記錄品牌色板的設計師、處理尚未發布產品的開發者，以及任何處理機密客戶工作的人而言，這代表品牌色票和上線前的色彩決策都會保留在你的裝置上。本工具提供與伺服器端轉換器相同的精確度，卻不會把你的輸入送到任何地方——這是在處理不想外洩的顏色時最安全的方式——也是為什麼輸入完成的瞬間就能取得結果，整個流程沒有網路往返。
如果你正在權衡選項，網頁安全色：訣竅與應避免的常見錯誤對此有詳細說明。