「為 CMYK 讀取 RGB」代表讀取四個印刷油墨百分比——青色、洋紅、黃色與黑色,每個範圍從 0 到 100——然後使用 W3C device-CMYK 的樸素公式,計算出適合螢幕顯示的近似值,其中每個顯示通道等於 255 × (1 − min(1, colorInk × (1 − black) + black)),縮放至 0–255 範圍,並以半進位捨入的 8 位元整數序列化輸出。輸出內容是一組三個整數通道(紅、綠、藍)、一個六位數十六進位值,以及一個視覺色塊,讓你能大致判斷未經色彩描述檔處理的印刷配方在 sRGB 風格的螢幕上看起來如何。由於真實的 CMYK 與裝置相關——印刷機、油墨組、紙張、網點擴大、渲染意圖,以及嵌入的 ICC 描述檔都會改變最終印刷顏色——從瀏覽器工具得到的讀數最好理解為快速預覽,而非印刷打樣。設計師、行銷人員與開發者在需要快速螢幕讀取印刷規格、為數位模擬圖繪製品牌色彩,或對從印刷打樣中取得的色塊進行合理性檢查時,都會採用這種近似法。CMYK 轉 RGB工具直接在瀏覽器中套用該樸素公式,因此四個百分比從不離開你的電腦,並且當你移動滑桿時就能即時獲得讀數。

「RGB for CMYK」實際上的意義
CMYK 是一種用於四色印刷的減色模型。每個通道——青色、洋紅、黃色與黑色(其中「K」源自「key」)——代表該油墨在紙張上的覆蓋量。相對地,RGB 是螢幕使用的加色模型,每個通道控制紅、綠或藍子像素的亮度。兩者之間並沒有單一的數學橋樑,因為它們描述的是不同媒材上的不同物理過程。
因此,「讀數」或「RGB for CMYK」的計算是一種嘗試將印刷油墨配方對應到螢幕像素配方的轉換。W3C CSS Color 規範發布了一種樸素轉換,不參考任何色彩描述檔即可完成此對應——請參閱 W3C device-CMYK 章節。該轉換是此處所述瀏覽器工具的基礎。它將四個 CMYK 百分比視為與裝置無關的配方,並輸出一個近似的 RGB 三元組。
實際上,你會得到一個 sRGB 風格的值,可貼入 CSS、設計檔案或比較色塊中。它快速、一致且有明確的數學定義,這正是它即使忽略了真實印刷輸出的所有獨特之處,仍對快速迭代有用的原因。
為何每個 CMYK 轉 RGB 的結果都是近似值
樸素公式並不知道你的作業使用哪台印刷機、哪組油墨、哪種紙張或哪種渲染意圖。在特定 offset 色域內的塗佈紙上以相同四個百分比建構的色塊,可能會與在非塗佈報紙上的相同配方落在不同的視覺區域。兩台具有不同 ICC 描述檔的印刷機,可能從同一個來源 CMYK 產生兩個不同的 RGB 翻譯,兩者對其各自的流程來說都可視為正確。
該公式確實捕捉到的是 CMYK 的幾何結構:零油墨為白色、滿 K 為黑色、C+M+Y 的加色組合趨近中性,以及每種油墨從其對應互補通道減去之處的減色關係。這足以進行快速的視覺估計,也是 W3C 文件明確將其定義為後備方案的契約。但當色彩涉及合約打樣、品牌規格表或印刷簽樣時,這就不夠了。在這些情境下,由來源與目標描述檔——而非公式——決定讀數。
該瀏覽器工具自身的 FAQ 也陳述了同樣的內容:它是未經校正的螢幕近似值,而非精確的印刷轉換。請將它產生的任何讀數視為螢幕作業的起點,而非將被印刷出來的 RGB,並在將檔案交給印刷廠時始終保留原始的 CMYK 數值。
逐步使用 CMYK 轉 RGB 工具
CMYK 轉 RGB 工具完全在你的瀏覽器中運作——無需上傳、無需註冊、無需載入描述檔。請依照下列步驟,從四個 CMYK 百分比取得近似的螢幕讀數。
- 將青色滑桿移至你 CMYK 配方中的青色百分比。滑桿接受 0 到 100,100 代表滿油墨覆蓋。
- 對洋紅、黃色與黑色滑桿重複相同動作,將各滑桿設為配方中的對應百分比。
- 讀取滑桿移動時更新的紅、綠、藍通道。輸出以介於 0 到 255 的 8 位元整數表示。
- 讀取與通道一同產生的十六進位值。它使用標準的六位數 CSS 十六進位格式,低於 16 的通道會以零補齊。
- 查看預覽區中的視覺色塊。它由你剛才讀取的相同通道所渲染,因此色塊與數值永遠一致。
- 將所需的十六進位值或三個通道值複製到 CSS、設計檔案或品牌規格模擬圖中。
若需要不同的配方,將四個控制項中的任何一個滑動到新值,通道讀數、十六進位值與色塊會立即更新。整個計算在頁面的 JavaScript 中執行;不會有任何色彩值離開你的瀏覽器。
瀏覽器工具計算了什麼、略過了什麼
實作直接遵循 W3C 的樸素轉換。百分比被正規化至 0–1 範圍,每個顯示通道使用公式 1 − min(1, colorInk × (1 − black) + black),結果縮放至 0–255,並使用半進位捨入將通道序列化為整數,以符合 W3C firebrick 參考範例。獨立的測試案例驗證:無油墨會產生白色 (255, 255, 255)、滿 K 會產生黑色 (0, 0, 0)、滿洋紅加黃色且無青色與黑色會產生紅色 (255, 0, 0)。
若想看一次運算過程,請看配方 C=0, M=100, Y=100, K=0——滿洋紅與滿黃色、無青色、無黑色:
- R = 255 × (1 − min(1, 0 × (1 − 0) + 0)) = 255 × (1 − 0) = 255
- G = 255 × (1 − min(1, 1 × (1 − 0) + 0)) = 255 × (1 − 1) = 0
- B = 255 × (1 − min(1, 1 × (1 − 0) + 0)) = 255 × (1 − 1) = 0
- 結果:RGB(255, 0, 0),即十六進位 #FF0000。
該工具不做的事是載入或套用 ICC 描述檔。它不知道你印刷機的色域、紙張的白點,或你工作流程預期的渲染意圖。它不在輸出中嵌入描述檔。它不會產生 CMYK 檔案。若你將十六進位值貼入帶有工作 CMYK 空間與打樣設定的 Photoshop,該工具的 RGB 值將與 Photoshop 具描述檔意識的翻譯不相符,而此差異屬於預期,並非錯誤。
| 瀏覽器工具做的事 | 具描述檔意識的軟體做的事 |
|---|---|
| 在瀏覽器中套用 W3C 樸素公式 | 載入來源與目標 ICC 描述檔 |
| 從四個滑桿讀取 0–100 的 CMYK 百分比 | 讀取帶有嵌入描述檔中繼資料的標記 CMYK |
| 輸出 8 位元 RGB 通道、六位數十六進位與色塊 | 輸出經色域映射的 RGB、CMYK 或 Lab 值 |
| 在你的螢幕上以 sRGB 渲染 | 在經校正的螢幕上以顯示器描述檔渲染 |
| 將所有 CMYK 視為與裝置無關 | 將每個 CMYK 值視為與描述檔相關 |
| 適用於快速的介面模擬圖 | 印刷打樣、品牌對色與合約色彩所必需 |
何時該改用具描述檔意識的軟體
當你想要快速的螢幕讀數、模擬圖色彩,或對配方進行合理性檢查時,請使用瀏覽器工具——例如,從印刷樣本上取得 CMYK 數值,再將得到的十六進位值貼到網站標題中。若你需要合約級色彩匹配、印刷打樣或品牌彩通翻譯,請將相同的四個百分比交給 Photoshop、Illustrator、Acrobat 或能同時載入來源 CMYK 描述檔與輸出描述檔的具色彩管理 RIP。這些產品中具描述檔意識的軟體,會根據你的作業所在的實際色彩空間進行轉換。
即使已讀取 RGB,仍請在檔案中保留原始 CMYK 數值。樸素讀數是單向預覽;若之後再往返回 CMYK,你幾乎必然會遺失原始百分比。印刷廠也預期接收 CMYK 輸入——將 RGB 送到印刷機是另一個具有各自轉換規則的問題。如需深入了解 CMYK 何時真正屬於印刷流程,以及 RGB 驅動的螢幕流程之間的權衡,CMYK vs RGB 印刷專案指南會逐步說明這些取捨。
快速參考:標準 CMYK 端點
樸素公式在 CMYK 立方體的角落會產生可預期的輸出。下表列出瀏覽器工具在這些眾所周知的位置上會給出的讀數。這些並非印刷值,而是 W3C 公式所定義的未經校正近似值。
| CMYK 配方 (C, M, Y, K) | 近似 RGB | 十六進位 | 視覺讀數 |
|---|---|---|---|
| 0, 0, 0, 0 | 255, 255, 255 | #FFFFFF | 白色(無油墨) |
| 0, 0, 0, 100 | 0, 0, 0 | #000000 | 黑色(滿 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 | 黃色 |
| 0, 100, 100, 0 | 255, 0, 0 | #FF0000 | 紅色(M + Y) |
其中紅色這一列是最清楚的健全性檢查:滿洋紅加上滿黃色、無青色、無黑色,在螢幕上必須讀為紅色,因為每種減色油墨都會移除其互補通道。瀏覽器工具的測試案例包含此情況,你可以在每次載入頁面時將其作為快速的信心測試。
若你的螢幕讀數與表格不符,表示滑桿有誤——或者你看到的是具描述檔意識的翻譯,在這種情況下,產生小幅差異屬於預期,而這項差異正是一開始使用描述檔的目的所在。
若你正在權衡各種選項,將十六進位轉換為 RGB 與 CMYK:兩步驟工作流程對此有詳細說明。