CSS 十六進位色彩將紅、綠、藍以及可選的透明度儲存為 8 位元 sRGB 色階值,因此將十六進位轉換為 RGB 是直接從 0 到 255 的整數解析,而將同一個色彩轉換為 CMYK 則需要一個獨立的印刷色轉換程序,十六進位解析器並不會執行這項作業。網頁上使用的十六進位語法是一種簡潔的方式來表示三或四個位元組;每一對十六進位數字對應一個位元組,而像 #RGB 這類簡寫形式只是將每個半位元組重複一次,以展開為完整的六位數或八位數形式。由於色階值是以位元組儲存,從 CSS 十六進位得到的 RGB 結果始終是精確的,不會有捨入誤差。另一方面,CMYK 描述的是印刷用的四種印刷油墨,並無法一對一地對應回單一的十六進位值。要在兩者之間橋接,意味著先將十六進位解析為 sRGB 色階,然後再將這些色階送入 CMYK 估算器。這就是為什麼單一的網頁工具無法誠實地單獨宣稱自己是十六進位轉 CMYK 的轉換器;第一步是精確的,而第二步是一個獨立、依賴色彩設定檔的估算。

convert hex to rgb and cmyk
將 HEX 轉換為 RGB 與 CMYK:一個兩步驟的工作流程

CSS 十六進位標記法的樣貌

一個有效的 CSS 十六進位色彩必須以井字號( # )開頭,而且只使用 0 到 9 與 A 到 F 之間的字元。這個標記法在 CSS Color Module Level 4 規範中定義了四種長度,每一種長度各自承載不同數量的資訊。三位數提供完全不透明的色彩,包含三個簡寫色階;四位數增加一個 alpha 位元組;六位數是最常見的形式,用於網頁上大部分的色彩;而八位數則在最後兩個字元中加入 alpha。簡寫形式的運作方式是重複每個半位元組:#123 展開為 #112233,#0f08 展開為 #00ff0088。不分大小寫都適用同一條規則,因此大寫的 A 等同於小寫的 a。

CSS 標記法 總位數 色階配置 包含 Alpha
#RGB 3 RR GG BB 否
#RGBA 4 RR GG BB AA 是
#RRGGBB 6 RR GG BB 否
#RRGGBBAA 8 RR GG BB AA 是

這個工具接受這四種形式,其他一律拒絕。缺少井字號、重複的井字號、夾帶空白字元,以及十六進位字母表以外的字元,都會觸發錯誤,而不是給出猜測的結果。這個嚴格的界線已在 W3C 十六進位標記法 中記載,代表無效的 CSS 代碼會保持可見,而不會被靜默地修正。

如何在瀏覽器中將 HEX 轉換為 RGB

當你想要從 CSS 色彩代碼取得精確的 sRGB 色階位元組時,請使用瀏覽器端的 HEX 轉 RGB 轉換器。整個工作流程都在本機執行,不會將你的色彩字串傳送到任何地方。

  1. 將以 # 開頭,並採用三位數、四位數、六位數或八位數形式的 CSS 十六進位色彩貼入輸入欄位。
  2. 讀取工具所顯示的正規化小寫十六進位值,以及它所產生的 CSS rgb() 或 rgba() 字串。
  3. 記下個別的紅、綠、藍,以及可選的 alpha 色階位元組;每一對十六進位數字對應一個 0 到 255 之間的整數。
  4. 檢查即時色彩預覽,確認色階順序符合你預期的樣子。
  5. 如果色彩是半透明的,在需要精確往返還原時,請保留正規化的八位數十六進位值,因為簡寫的小數 alpha 可能會捨去微小的分數。

此工具遵循 MDN hex-color 參考文件 中所規範的可接受語法。由於預覽是透過你瀏覽器的 CSS 引擎來解析色彩,同樣的數值 sRGB 仍可能因為你的顯示器設定檔與環境光而呈現出略有差異的結果。

讀取色階位元組與 Alpha

展開後的十六進位色彩中,每一個兩位數的組成部分都是 0 到 255 之間的整數位元組。第一對是紅,第二對是綠,第三對是藍,而可選的第四對則是 alpha。一個實際的計算範例可以清楚說明運算過程:#3B82F6 展開為三對,分別是 3B、82 與 F6。將每一對從十六進位轉換後,紅色為 3 × 16 + 11 = 59,綠色為 8 × 16 + 2 = 130,藍色為 15 × 16 + 6 = 246,因此 CSS 輸出為 rgb(59, 130, 246)。同樣概念的四位數簡寫版本會是 #3B8,它展開為 #33BB88 — 請注意這裡是每個半位元組重複一次,而不是左側補零,這是一個常見的混淆點。

對於 alpha,位元組會除以 255 以取得 0 到 1 之間的不透明度。端點 00 與 FF 會精確保持為 0 與 1,而中間的值則會以最多三位小數顯示,並同時顯示精確的位元組與百分比。這種顯示上的捨入並不會改變原本的正規化十六進位值,而當 API、canvas 作業、影像編輯器、測試固件或設計代碼需要原始位元組時,該數值才是應該保留的數值。對於期待整數輸入的程式碼路徑而言,直接讀取這四個色階通常才是正確的做法,而不是讀取 CSS 字串。

從 RGB 到 CMYK:準備印刷作業

十六進位色彩代表的是 sRGB 色階值,而不是印刷油墨,因此十六進位解析器無法單獨誠實地輸出 CMYK。它所能做的,是將精確的 sRGB 色階位元組交給另一個 CMYK 估算器,例如 RGB 轉 CMYK 轉換器。這種兩步驟的工作流程 — 先從十六進位到 RGB,再從 RGB 到 CMYK — 是在網頁色彩與印刷數值之間建立橋接的誠實做法,因為第一步是精確的,而第二步是一項估算。

來自未經校正之估算器的 CMYK 百分比,最好視為與印刷廠溝通時的起點,而不是已經定案的色彩配方。同一個數值 sRGB 色彩,在不同的轉換意圖下,可能對應到不同的 CMYK 分解結果,而實體印刷生產則需要一個受管理的色彩設定檔,以及完整的打樣工作流程。如果你需要的是 Pantone、品牌專色,或是與印刷打樣完全一致的結果,請將色塊送入印刷機的設定檔進行對色,而不是依賴網頁估算器。因此,CMYK 這一步的意義在於取得一個「夠接近、足以與印刷廠討論」的數值,而非產出一個最終簽核確認的值。

為什麼 HEX 預覽不能作為印刷打樣

HEX 工具內部的即時預覽,是透過你的瀏覽器來呈現 CSS 色彩,這對於抓取明顯的色階順序錯誤或打錯字的情況非常有用。然而,它並不是一個色彩管理的參考依據。螢幕亮度、環境光、瀏覽器的色彩設定檔,以及廣色域顯示器,都可能讓同一個數值 sRGB 在不同的螢幕上看起來不同。對於網頁設計的階段來說,這通常是可以接受的,因為設計成品同樣會在類似的變異下被瀏覽,但這並不適合作為印刷簽核的依據。

在進行簽核時,請養成幾個習慣。複製完整的 CSS 代碼,包括井字號;確認所需的位數是否齊全;並將色階位元組與將要接收它們的系統進行比對。如果透明度很重要,請再次確認來源使用的是 CSS 的「alpha 在最後」的順序 — 有些影像編輯的慣例會將不透明度放在最前面,而轉換器不會根據輸入看起來的樣子來重新排列順序。最後,在分享精確的半透明色彩時,請保留正規化的八位數十六進位值,因為捨入後的小數 alpha 可能會損失一小段對疊加與堆疊情境而言相當重要的精度。無效或空白的輸入會以明確的錯誤訊息取代先前的轉換結果,因此不會出現把已經失效的舊成功結果當作目前數值呈現的情況。

若想深入了解,請參閱 CMYK 色表與代碼:查詢 CSS HEX。

若想深入了解,請參閱 將 RGB 轉換為 CMYK 以利印刷:避免常見陷阱。