HEX 標記法將色彩寫成 #RRGGBB，其中每一對數字分別代表紅、綠或藍通道，以 16 進位表示，因此 HEX 程式碼本質上就是更簡潔形式的 RGB。在 CSS、HTML 以及任何你叫得出名字的設計工具所使用的標準 24 位元色彩空間中，每個通道的範圍都是 0 到 255。HEX 只是用每通道兩個十六進位數字（範圍 00 到 FF）來表示同樣的三個數字。將紅色的 256 種可能值乘以綠色的 256 種，再乘以藍色的 256 種，總共得到 16,777,216 種不同的色彩，這也正是 HEX 用六位數所能涵蓋的總數。這就是為什麼在處理樣式表、設計檔案或品牌色票時，兩者之間的轉換是日常工作，也正是為什麼一個小型的專用轉換工具每次都比心算來得實用。RGB 轉 HEX 工具能雙向處理這個過程，並在數值旁顯示即時色塊，讓你在複製到 CSS、Figma 檔案或影像編輯器之前能先確認色調。

rgb to hex explained
rgb to hex explained

RGB 與 HEX 實際上描述的是什麼

RGB 是以光來描述色彩的方式。一個色彩會被拆成紅、綠、藍三個通道，每個通道會給予一個 0 到 255 的數值，表示該原色光要以多少強度混合到最終的像素中。在 (0, 0, 0) 時，所有通道都是關閉的，像素呈現黑色。在 (255, 255, 255) 時，所有通道都是全開的，像素呈現白色。在 (255, 0, 0) 時，只有紅色通道開啟，像素呈現純紅。螢幕上的每一個其他色調——每一張照片、每一個漸層、每一個 UI 按鈕——都是這三個通道在某個介於 0 到 255 之間的數值上的某種組合。

HEX 是同一個色彩的不同描述方式。你不用寫 rgb(255, 0, 0)，而是寫 #ff0000。255 以 16 進位表示就是 ff，因此每個通道剛好佔兩個字元。總長度永遠是井字號後面的六位數，這也是為什麼 HEX 程式碼有時被稱為六位數十六進位或十六進位三元組。它輸入更簡短，在設計工具與樣式表之間更容易複製，並且從 CSS 早期開始就是網頁設計中事實上的標準格式。這兩種表示法描述的是完全相同的色彩空間——它們只是同一組三個數字的不同寫法。

為什麼同一個色彩會存在兩種格式

RGB 是像素與影像編輯器的自然語言。Photoshop 的選色器、作業系統中的滴管工具，以及大多數影像處理函式庫，都是以十進位的通道值進行溝通。CSS 與 HTML 則傾向使用 HEX，因為像 #3b82f6 這樣的單一字串很容易放進樣式規則中、在程式碼庫中容易搜尋，也能一眼辨識出是某個特定的品牌藍。設計師仍然習慣以 RGB 思考，而開發者與設計令牌（design tokens）則傾向統一使用 HEX，這就是為什麼轉換會成為日常工作。

這種分歧正是反覆轉換的根源。設計師給你一份 rgb(59, 130, 246) 的規格說明，而你需要 CSS 格式。設計系統以 HEX 記錄色票，但影像編輯器要的是 RGB 三元組。品牌指南發佈的是 HEX，而你想要對等的 HSL，以便產生用於 hover 狀態的較亮與較暗變體。兩種格式、一種色彩、數十個容易出錯的地方——這正是一個可靠的轉換工具能填補的缺口。HEX 在程式碼中也比 RGB 更精簡。字串 #3b82f6 只有 7 個字元，而對等的 rgb(59, 130, 246) 則有 18 個字元，這樣的節省在現代設計系統中每一個色彩變數上都會累積起來。

RGB 值如何變成 HEX 程式碼

轉換過程其實只是進位制的轉換。十進位（以 10 為基底）是你輸入的方式；十六進位（以 16 為基底）則是 HEX 使用的進位。從 0 到 255 的每個十進位值都會對應到一組獨特的兩字元十六進位字串（從 00 到 ff）。轉換過程是機械化的：取一個通道值，除以 16 得到第一位數字，餘數作為第二位數字，而任何介於 10 到 15 之間的餘數則對應到 a 到 f。三個通道各做一次，再把三組結果串接起來。

以一個具體的例子來看，拿熱門的 UI 藍色 rgb(59, 130, 246) 來說：

  • 紅：59 ÷ 16 = 3 餘 11 → 3b（因為十六進位的 11 就是 b）。
  • 綠：130 ÷ 16 = 8 餘 2 → 82。
  • 藍：246 ÷ 16 = 15 餘 6 → f6（因為十六進位的 15 就是 f）。
  • 串接結果：#3b82f6。

這正好符合 Tailwind 以及許多其他現代設計系統用於其主要藍色的 HEX 程式碼，是一個很好的驗證。反向操作——拿一個 HEX 程式碼回推三個十進位通道——也是同樣的道理，只是從 16 進位轉回 10 進位。對一兩個色彩來說，手動運算還算簡單，但當你要處理整個色票時，很快就會覺得煩躁，這正是 RGB 轉 HEX 轉換工具能發揮價值的地方。

在瀏覽器中轉換 RGB 與 HEX（雙向皆可）

  1. 在瀏覽器中開啟 RGB 轉 HEX 工具。
  2. 在紅、綠、藍欄位中輸入數值，每個範圍介於 0 到 255 之間。HEX 欄位、即時色塊與 HSL 讀數會在你輸入時同步更新。
  3. 使用 HEX 數值旁的複製按鈕，即可將像 #3b82f6 這樣可直接用於 CSS 的程式碼貼到你的樣式表中。
  4. 若要反向操作，將任何 HEX 值——#3b82f6、ABC、#abc 或 f00——貼到 HEX 欄位。三個 RGB 通道會顯示在色塊旁，方便你直接放進影像編輯器。
  5. 當你需要把色彩調亮、調暗或變得更柔和，卻又不想猜通道值時，可以讀取 HSL 讀數——色相範圍為 0–360°，飽和度與亮度範圍為 0–100%。

如果你貼上像 #abc 這樣的三位數簡寫，工具會自動將其展開為 #aabbcc。輸入不區分大小寫，因此 ABC、#abc 與 abc 都會解析為同一個色彩。輸出永遠會標準化為小寫六位數形式，每個通道都會以零補齊，所以 0 會顯示為 00 而不是單獨的 0，這正是手寫轉換時容易出錯的小細節。如果某個通道超出範圍或帶有小數點，工具會將其限制（clamp）為 0–255 之間最近的整數，而不是直接報錯；格式錯誤的 HEX——長度不對或含有非法字元——也會明確標記出來，而不是悄悄產生錯誤的色彩。所有轉換都在 JavaScript 中於本機執行，因此色票與尚未公開的色彩絕不會離開你的裝置。

同時閱讀 HSL 與 RGB、HEX

HEX 與 RGB 能精確告訴你一個像素是由哪些紅、綠、藍強度所組成。這雖然精確，但並不直覺。如果你想得到某個品牌色的稍亮版本，你無法輕易看出應該把綠色通道從 130 調到 145 還是 160。HSL 則用人類通常思考色彩的方式來描述同一個色彩：色相角度範圍為 0 到 360 度，繞行整個色輪，再加上以百分比表示的飽和度與亮度，範圍為 0 到 100。

舉例來說，UI 藍色 rgb(59, 130, 246) 的色相約為 217°、飽和度約為 91%、亮度約為 60%。若要產生 hover 狀態，你可以保持相同的色相與飽和度，並把亮度提高到約 70%；若要產生按下（pressed）狀態，則可以把亮度降低到約 50%。在 HSL 中這些調整只是單一滑桿的動作，而同樣的變更若改用 RGB，則必須猜測三個新的通道值，並重新運算成 HEX。這個轉換工具會一次同時顯示三種格式，讓你能朝任何方向調整。

這也是 HSL 之所以很適合用於設計令牌（design tokens）的原因。一個令牌可以寫成 --brand-blue: hsl(217 91% 60%)，並透過程式調整飽和度與亮度來衍生出較亮與較暗的色階，而每個衍生出來的色階都可以用同一個工具直接轉回 HEX，以適用於偏好六位數程式碼的任何情境。

快速對照：常見色彩的兩種格式

這些對照數值可用來驗證轉換工具是否正確，或記住幾個常用的錨點以方便手算。它們就是 24 位元色彩空間中到處使用的同一組標準色彩，因此任何表現正常的工具，其 RGB 與 HEX 配對都必須完全對應。

色彩RGBHEX
黑色rgb(0, 0, 0)#000000
白色rgb(255, 255, 255)#ffffff
純紅rgb(255, 0, 0)#ff0000
純綠rgb(0, 255, 0)#00ff00
純藍rgb(0, 0, 255)#0000ff
熱門 UI 藍rgb(59, 130, 246)#3b82f6

若想要更完整的跨色域轉換對照表，RGB 轉 HEX 對照表參考涵蓋了更多具名錨點，並說明更廣數值範圍的轉換模式。

如果你正在權衡各種選項，在 Android 上將 CMYK 轉為 RGB：快速螢幕預覽對此有詳細介紹。