HEX 碼是 CSS、Figma、Photoshop 以及大多數 Mac 設計工具用來描述顏色的六字元 #RRGGBB 字串，而每個 HEX 碼都只是以 16 進位表示的三個 RGB 色頻值。每一對十六進位數字涵蓋 00–FF，與十進位的 0–255 範圍相同 — 因此完整的六位數格式可描述 256 × 256 × 256 = 16,777,216 種顏色，這與你的 Mac 顯示器、Safari 和設計應用程式所依賴的 24 位元色彩空間相同。在這兩種表示法之間轉換，是任何在 macOS 上處理顏色的人最常見的日常任務之一，因為 Apple 內建了一個會給你 RGB、但你的樣式表幾乎不會想要 RGB 的工具。例如，macOS 的「數位色計」會將游標下的像素以 sRGB 的「59, 130, 246」這類三元組顯示，但對應的 CSS 色是 #3b82f6，而且沒有任何 macOS 內建應用程式會將其中一種轉寫為另一種。基於瀏覽器的 RGB 轉 HEX 轉換工具正好能補足這個落差：輸入你剛剛取樣的 RGB 三元組，它就會回傳你的 CSS 所預期的精確六位數十六進位碼，並提供即時色塊，讓你在貼上之前能先確認色調。
為什麼 Mac 使用者會遇到 RGB 轉 HEX 的落差
macOS 提供了許多從螢幕讀取顏色的方式，但幾乎沒有一種能直接給你十六進位字串。「數位色計」（位於「應用程式 → 工具程式」）預設會以十進位 RGB 和浮動的「影像」格式顯示游標下的像素；即使將顯示切換為「sRGB」或試透過 Cmd+Shift+C 複製數值，你得到的仍然是像「59, 130, 246」這樣的三元組，而不是你的樣式表想要的 #3b82f6。Xcode 的顏色面板可以輸出十六進位，但前提是你必須安裝開發者工具，而像 Pixelmator 或 Acorn 這類影像編輯器在開啟顏色選擇器時，預設仍使用 RGB 滑。
Sip、ColorSnapper 2 和 iShot 等第三方應用程式雖然能透過付費授權或永久駐留在選單列的圖示來補足這個落差，但若「數位色計」視窗已開啟、只需要進行單次轉換，最快的方法就是完全離開 macOS，改用瀏覽器分頁。Safari、Chrome 和 Firefox 都能透過 JavaScript 在本地執行轉換，所以什麼資料都不會離開你的 Mac。這點對於尚未發布的產品配色、內部品牌色票，以及任何你不想上傳到隨機網路服務的顏色來說很重要。
在 Mac 上用四個步驟將 RGB 轉換為 HEX
- 在你選擇的瀏覽器中開啟 RGB 轉 HEX 轉換工具。Safari、Chrome 和 Firefox 都可以使用，因為此工具在本地執行，無需安裝任何相依項目。
- 點擊 Red、Green 和 Blue 欄位，分別輸入介於 0 到 255 之間的每個色頻值。以「數位色計」回報為「59, 130, 246」的熱門 UI 藍色為例，你就在三個欄位中分別輸入 59、130 和 246。
- 讀取顯示在即時預覽色塊旁的對應 HEX 碼。以上方的藍色為例，工具會回傳 #3b82f6。輸出會正規化為小寫六位數格式，且每對數字皆以零補齊，因此色頻值 0 會顯示為 00，而非單獨的 0 — 這個細節經常會導致手動轉換出錯。
- 點擊 HEX 值旁的「複製」，然後將其貼到你的 CSS 檔案、Figma 樣式面板、Keynote 顏色選擇器，或任何需要使用該顏色的地方。
如果你手上有一個來自樣式表或設計師規格的 HEX 碼，想要將其轉回 RGB — 例如為了將數值輸入 Mac 影像編輯器 — 只要改將十六進位碼貼到 HEX 欄位即可。簡寫形式也可以使用：#abc 會展開為 #aabbcc，#f00 會變成 #ff0000，且開頭的 # 是可有可無的。輸入不區分大小寫，因此 ABC、#abc 和 abc 都會解析為相同的顏色。
反向操作：在 Mac 上將 HEX 轉換為 RGB
同一個工具也能處理反向轉換，這在 macOS 上很重要，因為有幾個內建工具仍然需要十進位 RGB 三元組，而非十六進位字串。「預覽程式」的「調整顏色」面板、macOS 系統顏色選擇器中的「RGB 滑桿」模式，以及 AppleScript 的顏色參考，全部都使用 RGB，因此從 Figma 檔案中取出一個十六進位碼後，通常必須先解碼才能在桌面上使用。
若要反向轉換，請將你的十六進位碼 — 不論是否包含開頭的 # — 貼到 HEX 欄位中。對應的 Red、Green 和 Blue 色頻值會立即顯示，色塊也會更新，讓你能確認是否取得正確的色調。例如，貼上 #3b82f6，工具就會回傳 59, 130, 246 — 正好是「數位色計」從產生的色塊上取樣會得到的結果。
如果你的十六進位碼使用三位數簡寫形式，轉換器會在解碼前將每位數字加倍：#abc 會變成 #aabbcc，解碼後為 R=170、G=187、B=204。超出範圍或非整數的色頻值會被限制在有效的 0–255 整數範圍內，而不是直接報錯；任何格式錯誤的十六進位碼（長度錯誤、含有非法字元）都會被明確標示出來，避免你最終在檔案中得到一個悄悄出錯的顏色。
解讀 HSL 顯示值
除了 HEX 和 RGB 之外，轉換器還會顯示同一色的 HSL — 即色相、飽和度和亮度。HSL 以更易於理解的方式描述同一個像素，當你在 Mac 顯示器上憑感覺微調色調時特別好用。色相是色環上 0 到 360 度的角度，而飽和度和亮度則是介於 0–100% 之間的數值。
這使得顯示值在進行小幅調整時非常有用。如果某個品牌色在螢幕上看起來稍微過於厚重，你可以讀取其亮度、心算調高幾個百分比，然後將新的 HSL 轉換回你的樣式表可用的 HEX 碼 — 完全不用自己重新做十進位轉十六進位的運算。轉換過程完全在瀏覽器分頁本地進行，這讓反覆調整的循環保持快速，也避免了將色票來回傳輸到遠端 API 的麻煩。
HEX 值在 Mac 上的常見工作流程
macOS 上有幾個日常情境會用到這個轉換器：
- 使用「數位色計」取樣，然後將 RGB 輸入工具，以取得網站 mock-up 或 Slack 設計審查可用的 CSS 就緒十六進位碼。
- 將設計師從 Figma 檔案或設計規格中提供的十六進位碼貼到轉換器，以便讀取 Mac 影像編輯器、「預覽程式」的「調整顏色」面板，或 Keynote 色票資料庫所需的 RGB 色頻值。
- 記錄品牌色：從螢幕截圖中取樣，然後將產生的 HEX 貼到共用的 Notion 頁面或樣式指南中，讓團隊其他成員使用完全相同的色調。
- 將取樣的 HEX 與色對比檢查工具搭配使用，以確認正文文字與背景的組合在發布前符合 WCAG AA 或 AAA 對比規則。
快速參考：RGB 值及其對應的 HEX
下表將幾組知名的 RGB 三元組與其精確的 HEX 形式配對，採用與轉換器相同的色頻對應十六進位對映關係。
| RGB | HEX | 常見名稱 |
|---|---|---|
| 0, 0, 0 | #000000 | 黑色 |
| 255, 255, 255 | #ffffff | 白色 |
| 255, 0, 0 | #ff0000 | 純紅 |
| 0, 255, 0 | #00ff00 | 色 |
| 0, 0, 255 | #0000ff | 藍色 |
| 59, 130, 246 | #3b82f6 | UI 藍（Tailwind blue-500） |
對於任何其他數值，只要將其輸入 RGB 轉 HEX 工具，並從預覽中讀取六位數代碼即可。舉一個實際的計算範例，紅色色頻 59 轉換為十六進位的方式是將 59 除以 16，得到商數 3 與餘數 11；餘數 11 以十六進位數字 B 表示，因此十進位的 59 在十六進位中變成 3B — 這就是你在 #3b82f6 中看到的第一對數字。綠色和藍色色頻遵循相同的兩步除法運算，分別得到 82 和 F6，組合出完整的六位數代碼。
如需更深入的說明，請參 RGB 轉 HSV 範例：從常見色看實際轉換。
如需更深入的說明，請參 確保正確混合兩個 HEX 顏色。