CMYK 對 RGB 色表是一份對照表——或互動式工具——它將四個印刷油墨百分比(青色、洋紅色、黃色與黑色,每個介於 0 到 100)對應到一個近似的 8 位元螢幕色彩,以紅、綠、藍三個通道以及一個六位數十六進位值表示。此轉換採用 W3C 的樸素裝置 CMYK 回退機制,將每個顏色油墨與黑色結合,將結果反相,再縮放至 0 到 255 的顯示範圍。這意味著 CMYK (0, 100, 100, 0) 永遠會產生 rgb(255, 0, 0),無論使用哪個瀏覽器或印表機色彩描述檔,在螢幕上都會呈現相同的純紅色。當你需要快速視覺化參考,了解一個未校準的 CMYK 配方在 sRGB 風格螢幕上可能的顯示效果時——例如依據印表機色票書製作螢幕版面配置,或跨格式粗略比較調色盤——色表最為實用。這些數值刻意採用近似值;實際印刷輸出取決於印刷機、油墨組、紙張、網點擴大、渲染意圖以及內嵌的 ICC 描述檔,這些都是色表無法重現的。如需一款會隨滑桿移動即時更新的互動式色表,CMYK 對 RGB 工具會讀取這四個百分比,並立即顯示對應的 RGB 通道、十六進位值與色塊。

cmyk to rgb chart
cmyk to rgb chart

CMYK 對 RGB 色表所顯示的內容

傳統的 CMYK 對 RGB 色表以格狀方式呈現,一軸為油墨百分比,另一軸為對應的螢幕色彩,每個儲存格通常會顯示一個彩色色塊、RGB 三元組與十六進位代碼。基於瀏覽器的色表運作方式相同,但具有動態特性:不是從印刷表格中查詢固定值,而是調整四個滑桿後讀取結果。四個輸入值永遠是青色 (C)、洋紅色 (M)、黃色 (Y) 與 key 或黑色 (K),每個都以 0 到 100 的百分比表示。輸出則是三個 8 位元通道(紅、綠、藍)以及一個格式化為 #RRGGBB 的六位數十六進位值。內含一個視覺色塊,讓你不必將數字代入其他程式即可查看色彩。

色表之所以存在,根本原因是 CMYK 與 RGB 描述的是不同的色彩世界。CMYK 是紙上的減色油墨:每種油墨吸收部分反射光。RGB 是螢幕上的加色光:每個通道發出可見光譜的一部分。色表是兩者之間的轉譯層,每當有人提供 CMYK 百分比給你——無論是來自印刷規格、Pantone 轉換、設計師或印刷廠——而你需要把近似色彩放進數位版面時,它就派上用場。色表無法取代色彩管理;它是色彩管理的輔助,讓你能快速從螢幕端讀取已有的四色油墨配方。

W3C 樸素轉換數學的運作方式

W3C CSS 色彩規範在沒有 ICC 描述檔可用時,發布了一個樸素的裝置 CMYK 對 sRGB 公式作為回退,本文所述的瀏覽器色表即採用相同的配方。針對每個顯示通道,你從相對應的顏色油墨比例(紅色對青色、綠色對洋紅色、藍色對黃色)開始,將其乘以 (1 減黑色百分比),再加上黑色百分比本身,將中間值限制在 0 到 1 的範圍內,反相後再縮放至 0 到 255 的範圍。

寫成單一算式,紅色通道為:

R = 255 × (1 − min(1, C × (1 − K) + K))

綠色與藍色使用相同公式,只需將 colorInk 項分別替換為 M 與 Y。每個通道接著序列化為 0 到 255 之間的整數,三個整數透過各轉換為兩位十六進位數字,組合成十六進位值。

演算範例。取 CMYK 配方 C = 0%、M = 50%、Y = 50%、K = 25%。將百分比標準化為小數:C = 0,M = 0.5,Y = 0.5,K = 0.25。

針對紅色通道,代入公式: R = 255 × (1 − min(1, 0 × (1 − 0.25) + 0.25)) R = 255 × (1 − min(1, 0 + 0.25)) R = 255 × (1 − 0.25) R = 255 × 0.75 R = 191.25 → 191

綠色與藍色,使用相同配方並分別代入 M 與 Y: G = 255 × (1 − min(1, 0.5 × 0.75 + 0.25)) G = 255 × (1 − min(1, 0.375 + 0.25)) G = 255 × (1 − 0.625) G = 255 × 0.375 G = 95.625 → 96

藍色通道與綠色相同,因為在此配方中 Y 等於 M: B = 96

最終結果:rgb(191, 96, 96),序列化為十六進位值 #BF6060。色表會將其呈現為一個柔和的磚紅色塊。值得注意的是,僅僅 25% 的黑色 (K) 就顯著地加深了原本會更亮的粉紅色——這正是黑色在 CMYK 中扮演的角色,也是閱讀色表時必須正確轉換的原因。將相同的四個百分比代入任何裝置,樸素公式都會回傳相同答案,這也正是此色表可重現的關鍵。

如何在瀏覽器中閱讀 CMYK 對 RGB 色表

如需一款會隨油墨百分比變動而即時更新的互動式 CMYK 對 RGB 色表,最簡單的工作流程完全在瀏覽器中執行:

  1. 開啟 CMYK 對 RGB 工具,找到標示為青色、洋紅色、黃色與黑色的四個滑桿或輸入欄位。
  2. 以 0 到 100 的百分比輸入每個數值。快速作業時使用整數,若配方需要更精細,也可使用小數。
  3. 讀取色塊旁顯示的三個顯示通道 (R, G, B);十六進位值會同步更新。
  4. 將十六進位值或 RGB 三元組複製到你的設計工具、模擬圖或樣式表中,作為近似的螢幕色彩。
  5. 將結果僅視為預覽——保留原始的 CMYK 數值給印刷廠,並以實體樣張或基於 ICC 的工作流程確認最終色彩。

由於運算在本機執行,你可以自由實驗,無需將色票清單、色票本或配方檔案上傳至任何伺服器。這使得色表便於在將配方套入版面之前進行單點檢查,也便於並排比較多個變體,而不必從設計應用程式重新匯出。

色表何時足夠,何時需要 ICC 描述檔

色表是起點,不是契約。實際的 CMYK 與裝置相關:印刷機型號、油墨組、紙張材質、網點擴大、渲染意圖以及內嵌的 ICC 描述檔,都可能改變印刷成品的呈現。瀏覽器色表所使用的 W3C 樸素公式,本質上就是一種未套用描述檔的近似。它忽略上述所有變數,為單一 CMYK 配方產生單一螢幕數值。

當色彩只需近似時,你可以仰賴色表:依據 Pantone 色票書繪製的線框與螢幕模擬圖、跨媒體的粗略調色盤比較、引用品牌印刷色票的部落格插圖,或是快速的「這到底看不看得見?」檢查。當色彩必須在印刷機上對色時,則不能依賴色表——例如包裝、合約樣張、品牌關鍵稿件、進行色彩管理的攝影作品,或任何印刷買家或品管步驟會將輸出對照目標值進行量測的工作流程。

若需印刷精度的轉換,請使用支援描述檔的應用程式,例如 Photoshop、Illustrator、Acrobat 或專用的色彩管理工作流程。載入正確的來源 CMYK 描述檔(通常由印刷廠提供)與正確的目的 RGB 描述檔(通常是 sRGB 或校準過的螢幕描述檔),選擇適當的渲染意圖,並透過該引擎重新算圖。色表的輸出通常會與此結果不同,有時差距達數個可察覺的色階,這正是 W3C 規範在將樸素路徑描述為回退時所承認的取捨。

瀏覽器色表與支援描述檔的軟體

這兩種方式並非相互競爭的工具——它們解決不同的問題。色表使用已發布的公式,提供快速、透明的預覽;支援描述檔的應用程式使用校準後的色彩科學,提供忠實於印刷機的轉換。前者為設計階段的決策提供參考;後者在印刷階段保護這些決策。

需求 瀏覽器 CMYK 對 RGB 色表 支援描述檔的應用程式
CMYK 配方的快速螢幕預覽 理想使用情境 殺雞用牛刀
依據色票書製作模擬圖或線框 合適選擇 不必要
印刷樣張或合約色彩目標 不適合 必要
對應特定印刷機或紙張的輸出 僅為近似 需要 ICC 描述檔
與協作者分享近似色彩 便利的十六進位值 可能增加複雜度
隱私與不上傳需求 所有運算在本機執行 視工具而定

對於已在 CMYK 中作業、但需要螢幕預覽而無需重新匯出每個色塊的設計師而言,互動式色表自然地介於印刷與螢幕世界之間。若需從螢幕值單次轉回印刷數值,RGB 對 CMYK 轉換指南 將引導你完成反向工作流程。每當你需要快速檢查配方在螢幕上的顯示效果時,色表會立即給出答案;每當客戶或印刷廠量測最終成品時,則由 ICC 描述檔接手。

轉換數學本身定義於 W3C CSS Color 4 規範的 device-CMYK 章節中,該章節將此色表所實作的樸素公式描述為在沒有描述檔可用時的明文回退。

若要深入瞭解,請參閱 CMYK 對 RGB CSS 代碼:將印刷油墨轉換為十六進位