十六進位色碼就是把三個 RGB 通道（紅、綠、藍，每個通道的數值範圍是 0–255）改寫成 16 進位，再加上一個井字號黏在一起，產生像 #3b82f6 這樣的字串，網頁設計師每天在 CSS、HTML 和設計軟體中都會用到。用手在兩種格式之間轉換，就是把每個十進位通道轉成兩個十六進位數字再串起來，做幾次之後就會變快，交給計算機處理時更是輕而易舉。在 /color/rgb-to-hex/ 的 RGB 轉 HEX 工具可以讓你貼上任何一種格式，立刻讀出另一種，輸入欄旁邊還有即時預覽和對應的 HSL 數值，讓你在寫進樣式表之前能先 sanity-check 結果。
RGB 和 HEX 只是用兩種不同的記法描述同一個顏色，所以轉換本身不會改變你在螢幕上看到的畫面。差別只在於誰在讀這個值。在 Figma 或 Photoshop 中發想的設計師通常會用 RGB 思考，因為每個通道對應一個滑桿；而前端開發人員則幾乎都偏好十六進位，因為六個字元的字串好打好輸入、在程式碼庫中容易 grep，而且當每個通道恰好重複時還能縮寫（#ffffff 變成 #fff）。腦中同時有這兩種數字，可以更快把色彩需求轉成程式碼，而不必每次都去翻色票挑選器。
RGB 與 HEX 一覽
RGB 把顏色視為光的加法混合，紅、綠、藍三個通道各取一個 0 到 255 之間的整數。零代表「該通道沒有貢獻」，255 代表「全強度」。設為 rgb(0, 0, 0) 的像素不發光，渲染為黑色；而 rgb(255, 255, 255) 則同時全力輸出三個通道，渲染為白色。純紅是 rgb(255, 0, 0)，純綠是 rgb(0, 255, 0)，純藍是 rgb(0, 0, 255)；其他所有顏色都是這三者之間的某種組合。
HEX 使用相同的三個通道，但以 16 進位表示，這是一種每位數可以是 0–9 或 A–F 的數字系統。兩個十六進位數字可以表示 0 到 255 之間的任何值，正好是一個 RGB 通道的範圍。由於這個對應關係，井字號後的十六進位代碼永遠是三對數字，依序為紅、綠、藍。developer.mozilla.org 上的 W3C 顏色規範記錄了完整的語法，包括 CSS 在每對重複時所允許的三位數縮寫形式，例如 #3b82f6 只有在每對都剛好重複時才能簡寫成等效的 #38f。
轉換公式
要把單一通道從十進位轉成十六進位，先除以 16——整數商成為第一個十六進位數字，餘數成為第二個。例如，十進位數值 59 拆成商數 3 和餘數 11，寫成十六進位就是兩個數字 3B。把三個通道代碼依序（紅、綠、藍）疊起來，就得到一個完整的十六進位值。
公式寫出來是這樣：對於通道值 V，hex = (floor(V / 16))(V mod 16)，其中每個結果會對應到它的十六進位符號。十進位 10 到 15 對應到 A 到 F，所以單一的十進位 59 寫成「3B」而不是「311」。每個通道都這樣做三次，就會產生一組完整的六字元字串。
實例演練：RGB(59, 130, 246)
讓我們一步步手動轉換熱門的 Tailwind 藍色 rgb(59, 130, 246)。第一個通道是 59；59 除以 16 得到商數 3 和餘數 11，也就是十六進位對「3B」（因為 11 對應 B）。綠色通道是 130；130 除以 16 得到商數 8 和餘數 2，因此十六進位對是「82」。藍色通道是 246；246 除以 16 得到商數 15 和餘數 6，也就是「F6」（因為 15 是 F）。依序把這三對疊起來，就得到十六進位代碼 #3B82F6，這也是許多 UI kit 中廣為人知的「blue-500」色票背後的代碼。在 RGB 轉 HEX 工具中確認轉換結果，會得到完全相同的字串並顯示對應的即時預覽，方便在上線前驗證品牌色是否正確。
這是本指南中唯一的手動計算示範。對於其他任何數值，請打開 轉換器，輸入數字，複製輸出，而不是用紙筆算數；即使是經驗豐富的開發人員，當數值超過個位數時也會依賴這個工具。
如何在瀏覽器中將 RGB 轉成 HEX
現在最快的 RGB 轉 HEX 工作流程是使用專門的工具，而不是心算捷徑。RGB 轉 HEX 頁面把兩個方向的轉換集中在一處，讓你可以在格式之間切換而不會失去脈絡，而且輸入欄旁邊還有即時預覽色塊，讓你立刻看出貼上或輸入的數字是否指向正確的顏色。
- 在瀏覽器中開啟 RGB 轉 HEX 轉換器；不需要註冊、安裝或下載。
- 在三個 RGB 欄位中輸入紅、綠、藍的數字，每個值介於 0 到 255 之間。頁面會在你輸入時更新預覽和十六進位輸出。
- 在即時色彩預覽旁邊讀出產生的十六進位代碼。複製前先確認它與你預期的顏色視覺一致。
- 點擊十六進位欄位的複製按鈕來抓取該字串（包含前面的 #），以便貼到 CSS、HTML、Figma 或任何接受十六進位的工具中。
- 若要反向操作，把十六進位值（例如 #abc 或 #3b82f6）貼到 HEX 欄位；RGB 和 HSL 欄位會立即重新填入，預覽也會同步更新。
- 如果設計工具或程式化 API 需要 RGB 或 HSL 格式，也可以用同樣的方式複製輸出。
同樣的流程也適用於 alpha 通道：貼上像 #3b82f6cc 這樣的八位數十六進位，或帶有第四個參數的 rgb(...) 呼叫，工具都能毫無問題地讀回來。當十六進位值感覺與需求略有出入時，把 HSL 讀數當作快速的 sanity check，因為 HSL 更容易看出問題是飽和度太高，或是色相偏移了幾度。
在程式碼庫中何時使用 HEX 與 RGB
HEX 在簡潔度和樣式表中的可讀性上勝出，這就是為什麼大多數正式環境的 CSS 都使用它。在設計系統中，單一六字元代幣比 rgb(59, 130, 246) 更容易掃讀，而像 #fff 或 #000 這樣的縮寫則能消除常見情況下的視覺雜訊。相反地，當你需要表達透明度（rgba(59, 130, 246, 0.5)），或某個值是在 JavaScript 中於執行階段計算時，RGB 標記法就更友善——通道值比一串十六進位數字更容易餵給數學運算。常見的模式是把品牌代幣以十六進位保存在共用變數中，在需要 alpha 的呼叫端再切換成 rgba()。
HSL 也有自己的利基。當設計師交給你一個顏色並要求「再亮一點」或「更鮮豔」的變化時，調整 HSL 比微調三個 RGB 滑桿直覺得多。這就是為什麼許多 調色盤產生器（例如本站上的那一個）會同時把 HSL 當作 RGB 和十六進位之外的第三種表示法，讓你不必離開頁面就能反覆調整。
常見陷阱與快速修正
很少有轉換錯誤在技術上很難，但其中幾個出現的頻率高到值得特別提出。下表把每個地雷與在上線前最快察覺它的方法配在一起。
| 陷阱 | 症狀 | 快速修正 |
|---|---|---|
| 通道順序顛倒 | 顏色看起來「不對」——綠色偏紅、藍色混濁 | 重新檢查數字順序：HEX 永遠是 #RRGGBB，依序對應 R、G、B |
| 字母大小寫與數字混用 | 有些瀏覽器接受 #3B82f6，有些則不一致地拒絕 | 堅持使用小寫，以符合大多數 minifier 和 linter 的慣例 |
| 假設縮寫可展開 | #3b8 的行為與 #33bb88 不同 | 記住縮寫只在每對重複時才成立，所以 #3b8 表示 #33bb88，而不是 #3b8000 |
| 通道值超出 0–255 | 瀏覽器悄悄夾到最近的邊界 | 在上游驗證輸入——CSS 不會警告，只會把通道值直接抓回 0 或 255 |
| 在印刷輸出上使用 HEX | 打樣印回來的顏色比螢幕預覽暗淡 | 螢幕 RGB 與 CMYK 不是同一個色彩空間；在送印之前先切換到 RGB 轉 CMYK 轉換器 |
第二個陷阱是忘記無障礙設計。一個單看起來舒服的十六進位代碼，配上選定的背景後仍然可能產生難以閱讀的文字。在實際採用新的顏色組合之前，請把前景與背景都跑過 顏色對比檢查器，它會即時依據 WCAG AA 和 AAA 標準評估該組合。跳過這步的設計師經常在無障礙稽核後被迫回退顏色，所以提早測試比晚測試便宜得多。
如果你要產生一系列相關的顏色而不是單一值——例如，為同一個按鈕建立 hover、active 和 disabled 狀態——使用 調色盤產生器 可以省去為每個色階猜測數學的麻煩。從一個基礎色相和明度漸層出發，就能產生一個連貫的色階，不必手動試誤。
當你手上已經有十六進位值，同時也需要驗證它在隨機樣本中是否一致呈現——例如，用輪流的主色瀏覽 UI 來做壓力測試——把轉換器搭配 隨機顏色產生器 使用，是一種低成本確認任何來源值轉換行為都一致的做法。相反地，如果你在設計漸層而不是純色填色，顏色漸層產生器 可以在兩個十六進位端點之間平滑插值，一鍵輸出 CSS 程式碼。
請同時參考：如何在幾秒內檢查網頁無障礙的色彩對比。
相關閱讀：CMYK 轉 RGB：在螢幕上預覽印刷顏色。