一個基於瀏覽器的十六進位轉 RGB 轉換工具，能將任何 CSS 十六進位色彩碼——以 #RGB、#RGBA、#RRGGBB 或 #RRGGBBAA 的形式——轉換成 CSS rgb() 或 rgba() 字串，以及整數的紅、綠、藍數值和選擇性的 alpha 通道數值，全部都在當前的分頁中於本地計算。在 macOS 上，由於內建的「數位測色計」只會回報游標所在像素的 sRGB 數值，設計師和開發人員經常需要反方向的操作：手上已經有一個十六進位字串，要將其解碼成 CSS、canvas 呼叫、設計標記或影像編輯器所期望的通道位元組。瀏覽器是執行這類轉換最可靠的地方，因為 macOS 上的 Safari、Chrome 和 Firefox 對 CSS 色彩的呈現方式，與其他所有現代瀏覽器完全相同，而嚴格的解析器可以在格式錯誤時直接拒絕，而不是胡亂猜測。轉換過程本身遵循一條 CSS 規則：前導井字號之後的每一個兩字元區塊，都是一個介於 00（十進位 0）到 FF（十進位 255）之間的 base-16 位元組，最後可附加選擇性的 alpha。

在 Mac 上，有幾個內建工具可以從螢幕讀取色彩。「數位測色計」（應用程式 → 工具程式）會顯示游標所在像素的紅、綠、藍百分比和十六進位數值。Safari 的網頁檢查器和 Chrome 的開發人員工具可以從任何色票開啟色彩選擇器，並讓您即時修改數值。然而，這些工具都不會接受您手上已有的十六進位字串，再回傳乾淨的 RGB 或 rgba 輸出。這個落差正好由 HEX to RGB 轉換工具 來填補：貼上一個代碼，讀取通道數值，複製您需要的部分。

hex to rgb on mac
在 Mac 上將十六進位轉 RGB：在瀏覽器中解析任何 CSS 十六進位色彩

macOS 中十六進位轉 RGB 的落差

macOS 將色彩顯示和色彩轉換視為各自獨立的工作流程，而內建的工具僅止於讀取螢幕像素。「數位測色計」應用程式會將游標停留之像素的紅、綠、藍以百分比回報，並附上十六進位數值，但它不接受既有的十六進位字串，也無法針對半透明代碼回傳 rgba() 輸出。「ColorSync 工具程式」著重在色彩描述檔，而非 CSS 語法。Mac 上的 Safari 和 Chrome 都透過各自的開發人員工具提供色彩選擇器，當您想以互動方式嘗試色票時很實用，但那些選擇器並不是解析器——它們會接受任意輸入，然後悄悄把無效的值強制轉換成最接近的結果。

對大多數以 Mac 為基礎的網頁工作來說，最輕鬆的路徑就是開一個瀏覽器分頁，專門執行一項工作：接收標準 CSS 形式的十六進位字串，回傳標準化的數值、CSS rgb() 或 rgba() 表示法，以及下游工具實際會用到的個別通道位元組。這就是「HEX to RGB 轉換工具」所提供的功能，而且不需要安裝任何東西到 /Applications、不必設定系統設定，也不用註冊帳號。由於解析是在當前頁面執行，無論在哪一台 Mac、任何地點、任何網路下，都可以得到相同的轉換結果。

有效的 CSS 十六進位格式

CSS Color Module Level 4 規範定義了四種十六進位表示法，而這個轉換工具正好只認得這四種——別無其他。具名的 CSS 色彩、hsl() 和 lab() 函式、color() 色彩空間，以及 CSS 變數都不在其適用範圍內，會被視為無效而拒絕。

輸入形式位數展開為是否包含 alpha？
#RGB3#RRGGBB否，視為完全不透明
#RGBA4#RRGGBBAA是
#RRGGBB6已為標準化格式否
#RRGGBBAA8已為標準化格式是

前導井字號為必要。可接受的字元集僅限 0–9 與 A–F，大小寫均可。數值前後的空白會被去除，但數值內部不得包含空白。這個嚴格的界線與 MDN 的 hex-color 參考資料 一致，因此無效的 CSS 代碼會產生明確的錯誤訊息，而不是被悄悄強制轉換。

三位數和四位數的形式採用 CSS 簡寫規則：每個半位元組都會複製，形成完整的六位數或八位數值。因此 #1f8 會展開為 #11ff88，#0f08 會展開為 #00ff0088。位元組順序永遠是紅、綠、藍，最後才是選擇性的 alpha——CSS 將 alpha 放在最後，而不是最前面。

在 Mac 上轉換十六進位色彩碼

整個工作流程可以在任何現代的 Mac 瀏覽器——Safari、Chrome、Firefox 或 Arc——中執行，而且操作方式完全相同。

  1. 在您的 Mac 瀏覽器中開啟 HEX to RGB 轉換工具。
  2. 將 CSS 十六進位色彩貼到輸入欄位，記得包含前導井字號：#1f8、#0f08、#11ff88 或 #00ff0088。
  3. 讀取標準化的十六進位輸出，該輸出永遠是小寫，且永遠是完整的六位數或八位數形式。
  4. 讀取準備好要貼到樣式表和設計標記的 CSS rgb() 或 rgba() 字串。
  5. 讀取個別的通道位元組——紅 0–255、綠 0–255、藍 0–255，以及存在時的 alpha 0–255——供 API、canvas 呼叫和影像編輯器輸入使用。
  6. 順便看一下預覽色票，確認通道順序一眼看上去是正確的，因為手動抄寫時最容易發生通道順序錯誤。

轉換會立即執行，並在每次按鍵時重新計算，所以當您一邊看著 rgba() 輸出更新、一邊編輯單一數字時，可以清楚看出每個半位元組如何影響最終的顏色。

讀取輸出：rgb()、rgba() 與通道數值

這個轉換工具會為任何有效的輸入呈現四項資訊。

  • 標準化後的 HEX。一個小寫的六位數或八位數值，這是 CSS 視為標準的形式。對於較短的輸入，這裡會顯示展開後的形式——任何需要完整代碼的地方都可以貼上這個值，而且不會破壞舊版的解析器。
  • CSS rgb() 或 rgba()。一個可立即貼上的色彩函式，macOS 上任何現代瀏覽器都能解析。只有當輸入包含 alpha 位元組時，轉換工具才會輸出 rgba()；否則會回傳 rgb()。因此 #11ff88 會變成 rgb(17, 255, 136)，#00ff0088 會變成 rgba(0, 255, 0, 0.533)。
  • 通道位元組。紅、綠、藍的整數值（永遠是 0–255），以及 alpha（若存在）作為一個獨立的 0–255 數字。當 API、canvas 操作或測試固定資料需要的是個別整數而非 CSS 字串時，就可以使用這些值。
  • 即時預覽。瀏覽器依據產生的 CSS 色彩所呈現的色票，可用於一眼看出明顯的通道順序錯誤。

三位數和六位數的輸入會被視為完全不透明，因為這種表示法本身沒有 alpha 的位置。四位數和八位數的輸入則會在整個轉換過程以及來回轉換中保留其 alpha 位元組。

Mac 顯示器上的 Alpha 與半透明度

半透明 CSS 十六進位數值將 alpha 放在最後，因此格式為 #RRGGBBAA——而非 #AARRGGBB。舊版的 Windows Forms 和 Android Color 整數將不透明度放在最前面，而這個轉換工具不會解讀這種順序；#AARRGGBB 的代碼會被視為無效而拒絕，不會悄悄重新排序。

若想實際查看 alpha 的運算，可以拿 #0f08 逐步走一遍：

  1. 每個半位元組都會複製：0 → 00、f → ff、0 → 00、8 → 88，得到標準化的數值 #00ff0088。
  2. 將標準化後的十六進位拆成位元組對：00、ff、00、88。
  3. 將每個 base-16 位元組轉換成十進位：紅 = 0、綠 = 255、藍 = 0、alpha = 136（因為 8 × 16 + 8 = 136）。
  4. Alpha 不透明度是該位元組除以 255：136 ÷ 255 ≈ 0.533。
  5. CSS 輸出變成 rgba(0, 255, 0, 0.533)。

可讀的 rgba() 數值會四捨五入到最多三位小數，並去除尾部的零，所以樣式表收到的是 0.533。原本精確的 136 alpha 位元組和標準化後的 #00ff0088 仍然會並列顯示。若需要進行半透明的來回轉換——例如在 CSS 檔案和設計師的 JSON 匯出之間共用代碼——請保留八位數的 HEX，這樣在十進位與位元組的轉換中才不會損失精度。當 alpha 位元組無法以簡短的十進位精確表示時，也適用相同的注意事項。

Mac 螢幕和瀏覽器的色彩描述檔可能會影響半透明代碼在預覽色票中的顯示效果。數值輸出不會受到影響，因為每個位元組都直接來自解析後的輸入，但預覽在螢幕上的外觀會取決於顯示器亮度、現用的色彩描述檔（系統設定 → 顯示器）、環境光線，以及您的網站是否採用廣色域工作流程。請使用預覽來抓出明顯的通道順序錯誤；不要依賴它進行需要色彩管理的參考工作。

轉換工具會拒絕的十六進位輸入

嚴格的解析會拒絕格式錯誤的代碼，而不是悄悄猜測其意圖。從電子郵件、聊天訊息、PDF 匯出檔或設計工具檢查器複製時，這些被拒絕的情況很容易發生——因為那些地方可能使用不同的簡寫方式。

  • 缺少前導井字號——沒有 # 的「1f8」不是 CSS 十六進位。
  • 井字號重複——「##1f8」會被拒絕。
  • 位數錯誤——任何不是 3、4、6 或 8 個十六進位數字的情況。
  • 數值內部夾帶空白——「#11 ff 88」無法解析。
  • 出現 0–9 和 A–F 以外的字元——「#1g8」和「#1z8」都不是十六進位。
  • 非 CSS 的順序——「#AARRGGBB」將 alpha 放在最前，不會被解讀為 CSS 十六進位。
  • CSS 具名色彩——「rebeccapurple」、「cornflowerblue」以及其他具名色彩清單中的項目，都不屬於十六進位表示法。
  • 其他 CSS 色彩函式——hsl()、lab()、lch() 和 color() 都不屬於十六進位語法。

當輸入變為空白或無效時，先前成功的轉換結果會被清除，並以明確的錯誤訊息取代，因此不會讓陳舊的結果看起來像是屬於目前的輸入。重新貼上修正後的代碼——去除內部空白、修正位數、從非 CSS 格式轉換——通道數值就會立即在相同的 Mac 分頁中重新顯示。

如果您正在權衡各種選擇，在 iPhone 上將 RGB 轉 CMYK：在 Safari 中轉換 對此有詳細說明。

如果您正在權衡各種選擇，RGB 轉 HEX：訣竅與常見錯誤 對此有詳細說明。