一個 JPG 檔案的 CMYK 轉 RGB 轉換器,會把印刷用影像中四個墨水百分比映射為近似的螢幕色彩,使用 W3C 的簡易裝置 CMYK 備用方案來產生 8 位元的紅、綠、藍通道,以及一個六位數的十六進位值。瀏覽器在沒有專門支援的情況下,並不會解碼 JPG 中嵌入的墨水數值,這就是為何基於瀏覽器的工具只能處理您輸入的四個數字,而不是影像檔案本身。CMYK 轉 RGB工具正是如此運作:您可以調整青色、洋紅、黃色和黑色,從零到一百百分比,頁面會立即顯示 8 位元的紅、綠、藍通道、一個六位數的十六進位代碼,以及一個視覺色塊。其運算遵循 W3C CSS Color Module Level 4 規範中,在沒有 ICC 設定檔時,針對 device-cmyk() 表示法所發布的公式,並會產生可預期的端點。零墨水產生白色,全黑產生黑色,而全洋紅加上全黃且沒有青色或黑色則產生純紅。對於要在螢幕上比對印刷配方與肉眼所見色彩的設計師來說,這種近似值通常足以用來挑選品牌色彩、製作介面模型,或對已儲存的匯出檔案進行合理性檢查。

「CMYK 轉 RGB 轉換器 JPG」在實務上的意義
搜尋 JPG 的 CMYK 轉 RGB 轉換器,通常會指向兩個目標之一。第一個是轉換檔案本身,把 JPG 內部編碼的色彩空間從 CMYK 改寫為 RGB,讓圖片能在瀏覽器、相片應用程式和社群平台上正確顯示。第二個則是想了解印刷設計師給出的特定墨水配方在螢幕上的呈現效果,無需上傳任何影像。兩個任務共用相同的底層運算:每個像素的 CMYK 通道都必須轉換為 RGB 通道,而在沒有裝置設定檔的情況下,結果永遠只是一種近似值。
標準瀏覽器並不會原生解碼 JPG 內部的 CMYK 數值。網頁平台預設將 JPG 視為 RGB 色彩空間,這就是為何以 CMYK 編碼的 JPG 在 Chrome、Safari 或 Firefox 中開啟時,顏色常常會變得反相或褪色。若真的要改寫檔案,您需要伺服器端工具、像 Photoshop 這類的桌面應用程式,或像 ImageMagick 這類安裝了正確 ICC 設定檔的命令列公用程式。CMYK 轉 RGB 瀏覽器工具處理的是第二個目標。在任何能顯示 CMYK 通道的影像編輯器中開啟 JPG(即使是免費的 GIMP 也能做到),讀取您感興趣之色塊的百分比,然後把這四個數字輸入工具。您會得到一組近似的 RGB 三元組和一個可以貼到 CSS、Figma 畫框或任何螢幕模型中的十六進位代碼。
若更深層的目標是從影像檔本身萃取數值,〈從影像進行 CMYK 轉 RGB:萃取與預覽〉指南會逐步說明如何在 Photoshop 和 GIMP 中取樣,並展示拿到百分比後該如何處理。
如何將 JPG 中的 CMYK 數值轉換為 RGB
- 在能讀取 CMYK 通道的編輯器中開啟 JPG。若影像在一般檢視器中看起來不對,這是一個很強的線索,代表它是以 CMYK 編碼;請在會尊重內嵌設定檔的應用程式中開啟。
- 挑選您想要轉換的區域或色塊。若是品牌色彩,請用滴管工具對一個平坦區塊取色。若是色階檢查,請對多個像素取樣,才能看出範圍。
- 記下色彩選擇器中顯示的四個 CMYK 百分比(通常標示為 C、M、Y、K,每個介於 0 到 100)。
- 開啟 CMYK 轉 RGB 頁面,把這四個數字輸入到青色、洋紅、黃色和黑色欄位中。您輸入的同時,RGB 通道、十六進位值和視覺色塊會即時更新。
- 把得到的 RGB 三元組或六位數十六進位值複製到您的螢幕模型、CSS 檔案或設計工具中。
- 若是批次作業,請對每個您感興趣的色塊重複此流程。所有計算都在瀏覽器本地進行,不會有任何資料離開您的裝置。
解讀輸出結果:RGB 通道、十六進位值與色塊
設定好四個滑桿或數字欄位後,會出現三個輸出。第一個是一組介於零到 255 之間的整數三元組,紅、綠、藍各一個值。這是多數影像和 CSS 程式碼所預期的格式,也是軟體應用程式的色彩選擇器在您點進色塊時所使用的格式。第二個輸出是一個六位數的十六進位值,前綴加上 CSS 預期的井字號。十六進位值只是同樣的三個整數以十六進位書寫,每個通道兩位數。第三個輸出則是視覺色塊本身,一個小型填色矩形,在您的瀏覽器中呈現該色彩,方便您用肉眼與附近元素比對結果。
因為公式是一種直接映射,而非感知上的色彩轉換,某些端點的表現完全符合預期。下表總結了此工具在不產生任何 ICC 偏移的情況下,預期能重現的主要結果。
| CMYK 輸入 (C, M, Y, K) | RGB 輸出 (R, G, B) | 十六進位值 | 您所看到的 |
|---|---|---|---|
| 0, 0, 0, 0 | 255, 255, 255 | #FFFFFF | 白色(無墨水) |
| 0, 0, 0, 100 | 0, 0, 0 | #000000 | 黑色(全關鍵) |
| 0, 100, 100, 0 | 255, 0, 0 | #FF0000 | 純紅(洋紅加黃色) |
| 100, 0, 0, 0 | 0, 255, 255 | #00FFFF | 青色(無洋紅、無黃色、無關鍵) |
這些端點直接來自公式,因此保證與工具顯示的結果一致。然而混合數值則永遠會與您的印刷機能產出的結果不同,因為印刷機、油墨組、紙張、網點擴大和渲染意圖都是瀏覽器無法模擬的因素。
如果您想親手走完一次計算,最簡單的混合配方就是全洋紅加全黃,沒有青色也沒有關鍵:
- 通道公式:result = 255 × (1 − min(1, ink × (1 − K) + K))
- 紅:255 × (1 − min(1, 0 × 1 + 0)) = 255 × 1 = 255
- 綠:255 × (1 − min(1, 1 × 1 + 0)) = 255 × 0 = 0
- 藍:255 × (1 − min(1, 1 × 1 + 0)) = 255 × 0 = 0
- 最終 RGB:rgb(255, 0, 0),十六進位 #FF0000
同樣的運算套用不同的輸入,就會產生工具所顯示的色塊。比簡單色樣更複雜的情況,應在工具本身內重新檢查,而非徒手計算。
為何 JPG 在螢幕上看起來與印刷品不同
即使運算正確,專為印刷製作的 JPG 在螢幕上的呈現幾乎不可能與紙張上完全一致。原因在於 CMYK 是裝置相關的色彩空間,這表示同樣的四個百分比會因使用的印刷機、油墨組、紙張材質和渲染意圖不同,而印出明顯不同的色彩。一張未塗佈的報紙紙張和一頁亮面雜誌,同樣接受「0, 90, 86, 12」卻會印出不同的紅色。內嵌 ICC 設定檔的存在正是為了傳達這些差異,但大多數由網路工具和設計師儲存的 JPG 檔案,不是根本沒有設定檔,就是夾帶了被瀏覽器悄悄忽略的設定檔。
W3C CSS Color Module Level 4 規範明確指出:在沒有設定檔可用時,提供 device-cmyk() 表示法只是為了方便,但它無法取代具備設定檔意識的轉換。瀏覽器工具所實作的簡易備用方案,與該規範所發布的備用方案相同,而且刻意被標示為近似值,而非印刷目標。對於色調與色盤工作而言,這種近似值通常足夠;但對於印刷打樣或合約規定的色彩匹配,則不適用。
何時瀏覽器的近似值不敷使用
當您需要快速的螢幕預覽、對設計師配方的合理性檢查,或模型中的佔位色彩時,瀏覽器工具是正確的解答。當色彩最終會出現在紙張上、打樣中,或需要符合合約公差的產品上時,它就是錯誤的解答。特別是有兩種情境必須使用具備設定檔意識的軟體:
- 印刷生產作業。若檔案是要交給商業印刷機製作,請詢問他們應嵌入哪一種輸出設定檔(多數使用 GRACoL、SWOP,或其特定印刷機的專屬設定檔)。請在能處理來源與目的設定檔的應用程式中進行轉換,而不是在瀏覽器中。
- 品牌色彩交接。若品牌色彩以 CMYK 規範,且必須在包裝、標籤或標誌印刷批次上與標誌吻合,唯一安全的做法是使用校色過的顯示器、在目的設定檔下進行軟打樣,並在實際紙張上進行實體打樣。
CMYK 轉 RGB 工具不會載入任何 ICC 設定檔,也不模擬任何特定油墨組。它的合約很明確:這是一種未校色的螢幕近似值,可用於介面工作,但絕不能當作印刷打樣。Adobe 關於具備設定檔意識之色彩轉換的文件說明了為何油墨、紙張和渲染意圖的細微變化都會讓結果產生偏移,而 W3C CSS Color 4 參考資料也確認,瀏覽器所實作的備用方案,正是在沒有提供設定檔時設計師會在樣式表中看到的同一個方案。
反向操作時也適用相同的警告。若您有想要印刷的 RGB 色彩,可以在螢幕上做合理性檢查,但最終的 CMYK 配方仍必須由具備設定檔意識的應用程式產生。RGB 轉 CMYK 的轉換會套用相同簡易公式的反向運算,但您最終使用的印刷機會落在公式預測之外的某個位置。
JPG 色彩查詢快速參考
| 任務 | 瀏覽器工具能做什麼 | 您實際需要的工具 |
|---|---|---|
| 挑選 CMYK 色塊並查看近似的螢幕色彩 | 輸入四個百分比,複製 RGB 或十六進位 | 無;此工具正是為此而設計 |
| 轉換 JPG 檔案的色彩空間 | 超出範圍;工具讀取的是百分比,而非像素 | Photoshop、ImageMagick,或搭載設定檔的伺服器端轉換器 |
| 從印刷藝術作品建立螢幕模型 | 在 CSS 或 Figma 中使用顯示的十六進位 | 模型本身不需要;上線前以實際 JPG 進行驗證 |
| 印刷打樣或合約色彩目標 | 超出範圍;僅提供簡易備用方案 | ICC 設定檔、軟打樣、實體打樣、校色顯示器 |
CMYK 轉 RGB 工具位於工作流程中一個狹窄的中間地帶:速度快、在瀏覽器本地執行,並符合設計師或開發者在樣式表中會看到的公式。對於超出螢幕預覽以外的所有需求,請將它疊加在妥善的色彩管理管線之上,而不是當作替代品。
相關閱讀:RGB 轉十六進位調色盤靈感:從通道建構配色。
相關閱讀:RGB 轉 HSV 入門:白話文入門指南。