從影像讀取 CMYK 並以 RGB 預覽,意思就是取得一組由四個數字組成的裝置油墨配方 — 介於 0 到 100 之間的青色、洋紅、黃色與黑色百分比 — 並將它轉換成一個可以貼到 CSS、Figma 畫框或快速mockup 中的 8-bit 螢幕色彩。CMYK to RGB 工具就是在瀏覽器中執行這個動作:你設定四個滑桿,頁面就會即時顯示紅、綠、藍三個色通道(0–255)、六位數的十六進位值,以及一個視覺色塊。背後的運算是 W3C 的天真裝置 CMYK 轉換,因此輸出結果應理解為螢幕上的近似值,而不是印刷打樣的目標。真正的 CMYK 是裝置相依的 — 印刷機、油墨組、紙張材質、網點擴大、渲染意圖,以及內嵌的 ICC 描述檔,都會影響實際印在紙上的結果 — 所以任何沒有載入描述檔的工具(包括這個工具)都只能誠實地告訴你,這個配方在一般 sRGB 螢幕上看起來會是什麼樣子。
對大多數「從影像」類型的查詢來說,該影像本身就是 CMYK 配方的來源:一本 Pantone 風格的色票冊頁面、排版軟體匯出的檔案、品牌規範的螢幕截圖,或是從 CMYK 編碼的 JPEG 中讀出的像素資料。這個瀏覽器工具本身不會讀取影像檔案;你需要用其他方式讀取這四個百分比,再輸入進來。本文的其餘部分會帶你走過這個兩步驟的流程、運算式、可預期的端點,以及什麼時候你應該改用支援描述檔的軟體。
「從影像進行 CMYK to RGB」真正的意思
搜尋這個主題的人,通常帶著三種具體任務中的一種。他們可能有一張 CMYK 編碼的影像(印刷打樣的 JPEG 或 TIFF),想知道該檔案中某個色塊對應到哪些螢幕 RGB 數值。他們可能正從品牌手冊中讀取一個印刷色彩配方,想把它放進螢幕設計中。或者他們可能正在把 PDF 中的舊式 CMYK 數值,翻譯成 CSS 友善的十六進位代碼。
這三種情況的瓶頸都一樣:CMYK 是一個四通道、裝置相依的油墨模型,而 RGB 是一個三通道、裝置相依的光模型。兩者之間沒有單一正確的對應方式。對應結果取決於你假設哪個 CMYK 描述檔(東京的塗佈印刷機不會和柏林的非塗佈印刷機一樣)、螢幕使用的是哪個 RGB 描述檔,以及這兩個色彩空間如何橋接。CMYK to RGB 工具有意把這種模糊性簡化,只回傳 W3C 的天真近似值 — 適合快速查看,絕對不能取代合約打樣。
如果你的來源是一個 CMYK 影像檔,實際上的第一步是從中讀出四個油墨數值。Photoshop 的滴管工具可以回報現用文件的 CMYK,GIMP 在設定正確的色彩管理後也能做到,大多數排版軟體(InDesign、Affinity Publisher、Illustrator)都能顯示任何選取物件的 CMYK 分解。一旦你手中有了四個百分比,工具就能接手處理。
先從影像讀取 CMYK,再進行預覽
依照下列步驟,從影像取得的 CMYK 配方走到可以在 mockup 中使用的螢幕 RGB 數值。
- 在支援色彩管理的應用程式中開啟來源影像。使用 Photoshop、GIMP、Illustrator、InDesign,或任何能回報像素或物件 CMYK 百分比的工具。如果只要原始數字,可以關閉「套用描述檔」的警告。
- 取樣你要的色彩並複製四個百分比。記下青色、洋紅、黃色與黑色,每個都是 0 到 100 之間的數字,再輸入到四個滑桿中。
- 開啟 CMYK To RGB 工具,設定四個滑桿。把你記錄下來的數值分別設定到青色、洋紅、黃色與黑色。拖動時,頁面會立即更新 RGB 通道、十六進位代碼與色塊。
- 讀取輸出結果。複製六位數的十六進位代碼或三個 RGB 通道(每個 0–255),貼到你的螢幕設計、CSS 或元件庫中。
- 用已知的端點做合理性檢查。如果你取樣的是 (0, 100, 100, 0),應該看到純紅 (#FF0000)。如果結果不同,就重新取樣再試一次。
這個迴圈很快,因為一切都在本地端執行。這些百分比不會離開你的瀏覽器分頁,當配方屬於內部或客戶機密資訊時,這點很重要。沒有上傳步驟、沒有伺服器往返,也不需要建立帳號。
轉換背後的公式
工具實作的 W3C 裝置 CMYK 後備機制,將 CMYK 視為對白色基材的減法配方。對每種彩色油墨(青、洋紅、黃),你把油墨量乘以黑墨尚未吸收的光量(1 − K),再加上黑的貢獻,限制在 1 以內,再反相得到剩餘的反射光。接著把顯示通道縮放為 0–255,並以半進位(half-even)的進位方式序列化。
寫成單一通道的式子:
channel = round(255 × (1 − min(1, ink × (1 − K) + K)))
同一個式子會跑三次 — 一次是青色 → 紅,一次是洋紅 → 綠,一次是黃 → 藍。黑色通道則在三者之間共用。我們手動算一個例子:CMYK(20%, 40%, 0%, 0%)。青色是 0.2,洋紅是 0.4,黃色是 0,黑色是 0。
- 紅 = 255 × (1 − min(1, 0.2 × 1 + 0)) = 255 × 0.8 = 204
- 綠 = 255 × (1 − min(1, 0.4 × 1 + 0)) = 255 × 0.6 = 153
- 藍 = 255 × (1 − min(1, 0 × 1 + 0)) = 255 × 1 = 255
工具會回傳 (204, 153, 255),也就是 #CC99FF。把同樣的數字輸入滑桿,你應該會看到一模一樣的色塊。W3C CSS Color 4 規範在裝置 CMYK 章節中描述了這個天真對應方式;工具的測試案例也包含同一組測試,讓實作保持一致。
一眼看懂的固定端點
有幾組 CMYK 輸入,在天真公式下永遠會產生相同的 RGB 輸出,因此很適合當作快速的合理性檢查。下表列出這些固定端點,直接從已記錄的公式推導而來。
| CMYK 輸入 (C, M, Y, K) | 天真 RGB 輸出 | 十六進位 | 代表的意義 |
|---|---|---|---|
| 0, 0, 0, 0 | (255, 255, 255) | #FFFFFF | 無油墨 — 白色基材 |
| 100, 100, 100, 100 | (0, 0, 0) | #000000 | 全 K — 黑色 |
| 100, 100, 100, 0 | (0, 0, 0) | #000000 | 全 CMY,無 K — 黑色 |
| 100, 0, 0, 0 | (0, 255, 255) | #00FFFF | 僅青色 — 螢幕青色 |
| 0, 100, 0, 0 | (255, 0, 255) | #FF00FF | 僅洋紅 — 螢幕洋紅 |
| 0, 0, 100, 0 | (255, 255, 0) | #FFFF00 | 僅黃色 — 螢幕黃色 |
| 100, 100, 0, 0 | (0, 0, 255) | #0000FF | 青 + 洋紅 — 螢幕藍色 |
| 100, 0, 100, 0 | (0, 255, 0) | #00FF00 | 青 + 黃 — 螢幕綠色 |
| 0, 100, 100, 0 | (255, 0, 0) | #FF0000 | 洋紅 + 黃 — 螢幕紅色 |
注意減法配對的行為,完全和教科書說的一樣:青 + 洋紅 → 藍、洋紅 + 黃 → 紅、青 + 黃 → 綠。每種單色油墨都恰好減去一個顯示通道,所以青色吸收紅、洋紅吸收綠、黃色吸收藍。這種成對的可預測性,是 W3C 後備機制的預期表現,而不是支援描述檔的結果。
為什麼結果永遠只是近似值
兩個看起來一樣的螢幕配方,印出來可能完全不同;而兩個看起來不同的螢幕配方,印出來也可能一模一樣。這個差距,正是為什麼印刷精準的轉換是一門專業,而不是一行公式就能解決的事。一個真正的 CMYK to RGB 轉換需要四樣東西:來源 CMYK 描述檔、目的 RGB 描述檔、渲染意圖,以及管線的位元深度。這個瀏覽器工具刻意沒有內建這些,它是一個快速查看的工具,而不是印刷前作業工具。
基於同樣的理由,這個工具不能當作印刷打樣、合約色彩目標,或是校正過的工作流程的替代品。如果設計師給你 CMYK(0, 100, 100, 0),並期望它在特定紙張、特定光源下與色票相符,你需要支援描述檔的軟體、印刷機的輸出描述檔,以及一份實體打樣。天真近似值無法告訴你油墨會如何與基材互動、網點擴大會如何讓網點變粗,或是印刷機的色域會如何裁切超出範圍的油墨。
什麼時候該改用支援描述檔的工具
當你需要快速、誠實的螢幕預覽時 — 介面 mockup、粗略的色票比對、確認品牌手冊中的 CMYK 配方是否接近某個數位調色盤 — 請使用 CMYK to RGB 瀏覽器工具。當印刷精準度很重要時,請使用支援描述檔的軟體:合約打樣、包裝、大幅面招牌,以及任何會上印刷機並在觀察燈箱下被客戶檢視的東西。想進一步了解每個模型如何融入實際專案,請參考印刷專案該用 CMYK 還是 RGB。
乾淨的工作流程是兩者並用。保留原始的 CMYK 配方給印刷機,向印刷機索取他們的輸出描述檔,合約打樣用支援描述檔的軟體進行轉換,而瀏覽器的近似值只作為螢幕顯示結果的快速合理性檢查。如果你還需要檢查螢幕色彩的可存取性,同一個十六進位值可以直接套用到色彩對比檢查工具,對照 WCAG AA 與 AAA 門檻。
少數情況會讓你轉向別的工具。如果你只有 RGB 來源而需要 CMYK 百分比,反向工具可以處理。如果你有十六進位代碼而需要 8-bit 通道,十六進位轉 RGB 轉換器可以直接解析 CSS 表示法。不過,對大多數「從影像」的查詢來說,流程就是:從來源讀取四個 CMYK 百分比,放進滑桿,然後讀出對應的 RGB 與十六進位值。
如果你正在比較選項,互補色工具替代方案:RGB 反相對此有詳細介紹。