CMYK 轉 RGB 影像轉換是一種螢幕預覽功能，它接受四個油墨百分比，在您的瀏覽器中回傳一組近似的 sRGB 色頻數值、十六進位值，以及即時色塊。它是為已經手邊有 CMYK 配方（通常是從印刷廠的 PDF、舊版的品牌指南，或 Adobe 色塊複製而來）的設計師與開發者所設計，目的是快速了解該配方在一般 sRGB 螢幕上可能的呈現效果。這項轉換刻意採用簡單的替代方案：輸入四個數字，輸出三個色頻與一個十六進位值，不進行 ICC 設定檔查找，也不協商渲染意圖（render intent）。這種簡單性正是它的特色。您移動四個滑桿、讀取十六進位值，然後在不離開瀏覽器的情況下，將結果貼到影像模型圖、Figma 畫框或 CSS 變數中。這也說明了為什麼輸出會標示為近似值：真正的 CMYK 是裝置相依的，印刷機、油墨配方、網點擴大（dot gain），以及渲染意圖都可能改變實際的印刷顏色。當您想要快速的螢幕檢查時，請使用 CMYK 轉 RGB 工具；當涉及合約色、合樣，或印刷簽樣時，請改用支援設定檔的軟體。本文將逐步說明計算方式、操作流程，以及相關界線，幫助您知道該選擇哪種工具。

cmyk to rgb image
CMYK 轉 RGB 影像：螢幕預覽方法

為什麼設計師需要 CMYK 轉 RGB 影像預覽

「CMYK to RGB image」這個詞通常意味著三種情況中的一種。最常見的意思是：「我有 CMYK 油墨百分比，想看看它在螢幕影像上的呈現效果」。有時候意思是：「我有一個 CMYK 檔案，需要匯出為 RGB」。有時候則是：「我想挑選一個視覺上最接近我 CMYK 配方的 RGB」。這三種用途彼此重疊，而瀏覽器的近似轉換對於第一種和第三種都能很好地服務。CMYK 檔案轉 RGB 匯出是另一個不同的問題，因為檔案轉換涉及色頻、嵌入的設定檔，以及渲染意圖，這些都不是四滑桿工具能處理的。

螢幕預覽在設計交接時非常實用。當品牌手冊提供了一個標誌顏色的 CMYK 配方，而您的任務是製作行銷影像、簡報或網頁主視覺的模型圖時，您需要一個能直接放進 CSS、Figma 填色或影像編輯圖層的數字。等待透過完整設計套件進行設定檔管理的往返流程會拖慢工作節奏，因此設計師通常會先抓一個快速的近似值，讓合成圖的其他部分可以繼續推進。CMYK 轉 RGB 工具就是為這個工作迴圈而設計的：四個滑桿、即時輸出、無需上傳。

它在調色盤比較時也很實用。當您手邊有三到四個 CMYK 配方，需要決定哪一個在筆電螢幕上看起來效果最好，最快的方法就是把每個都轉換，把十六進位值並排貼上來，肉眼比較結果。這個近似值足以根據暖度、飽和度和對比來為配方排序，但不足以解決合約色爭議，不過對於視覺分類（visual triage）來說，螢幕預覽就是對的工具。

W3C 簡易替代方案如何計算 CMYK 轉 RGB 影像預覽

這個瀏覽器工具中的計算方式遵循 CSS Color 4 規範中的 W3C device-CMYK 簡易替代方案（naive fallback）。它將每種顏色油墨（青、洋紅、黃）以及黑色視為介於 0 與 1 之間的分數，然後獨立計算每個顯示色頻。公式如下：

r = 1 - min(1, cyan × (1 - black) + black)

g = 1 - min(1, magenta × (1 - black) + black)

b = 1 - min(1, yellow × (1 - black) + black)

每個結果會縮放至 0-255 的顯示範圍，並使用半偶數捨入（half-even rounding）序列化為整數色頻，這與 W3C 參考範例中 firebrick 的做法一致。這些步驟都不需要 ICC 設定檔、渲染器或印刷設定檔——這正是該工具能快速且在本地端運作的原因。該公式的完整參考記載於 CSS Color 4 工作草案中的 W3C device-CMYK 簡易轉換 章節。

演算範例：滿洋紅加上滿黃，沒有青色也沒有黑色，螢幕上應該產生純紅。設定 C = 0、M = 100、Y = 100、K = 0，標準化後為 0、1、1、0。代入公式：r = 1 - min(1, 0 × 1 + 0) = 1 - 0 = 1；g = 1 - min(1, 1 × 1 + 0) = 0；b = 1 - min(1, 1 × 1 + 0) = 0。縮放至 255 得到 red = 255、green = 0、blue = 0，序列化為 #FF0000。這個工具會渲染出相同的數值，因為其測試案例涵蓋了基本端點；這項檢查是其驗證測試套件的一部分。

這個公式有已知的限制。它假設油墨是抽象的 device-CM-Y-K，不考慮紙張、油墨組合、網點擴大，也沒有渲染意圖。在熟悉的端點情況下——無油墨為白、滿黑為黑、滿洋紅加滿黃為紅——結果完全正確。對於混合色頻，結果只是眾多可能被稱為該配方「簡易」版本的 sRGB 顏色之一。您應該將這個十六進位值視為螢幕預覽的起點，而不是唯一的答案。

將 CMYK 轉換為 RGB 以製作影像模型圖：逐步教學

  1. 在瀏覽器中開啟 CMYK 轉 RGB 工具。
  2. 從您的來源——印刷打樣、品牌指南、Pantone 色橋或設計檔案——複製青色、洋紅、黃色和黑色（key）的百分比。
  3. 移動四個滑桿以符合這些百分比，範圍在 0 到 100 之間。每次變更時頁面都會重新計算。
  4. 在 0 到 255 的顯示範圍中讀取三個 8 位元色頻值——紅、綠、藍。
  5. 複製六位數的十六進位值，以便用於 CSS、影像軟體或設計工具中。
  6. 將螢幕上的色塊與影像構圖的其他部分進行比較，確認它符合整體調色盤。
  7. 如果您接下來需要不同的配方，只要滑動滑桿，色塊就會即時更新。無需上傳、無需切換設定檔、無需等待渲染佇列。

這就是快速螢幕預覽的工作流程。每當品牌指南新增一個 CMYK 配方，而您的影像需要一個可以貼到 Figma 畫框或 Photoshop 圖層的近似值時，這個工作流程也可以重複使用。輸出標示為近似值是有意為之；請將它視為眾多螢幕中的一個，而不是最終的印刷目標。

近似轉換 vs. 支援設定檔的轉換

瀏覽器預覽和支援設定檔的轉換解決的是重疊但不同的問題。下表顯示了各自擅長處理的部分以及各自的限制。

任務或限制條件 瀏覽器近似值（本工具） 支援設定檔的轉換（Photoshop、Illustrator、Acrobat）
來源 CMYK 數值來自未附設定檔的配方 為此情境而設計 可行，但會假設使用預設設定檔
存在嵌入的 ICC 設定檔 忽略 自動使用
渲染意圖（感知、相對、絕對） 無 可選擇
油墨組合、紙張、網點擴大補償 無 由目的地設定檔處理
螢幕模型圖的速度與便利性 快速：四個滑桿 需要開啟支援設定檔的應用程式、載入來源設定檔、選擇意圖
適用於印刷打樣或合約色目標 不適用 適用，但須搭配校正過的螢幕與實體打樣
適用於影像模型圖、UI 元素或快速的調色盤檢查 適用 適用，但殺雞用牛刀

經驗法則是：一旦您的工作涉及印刷、合約、帶有書面色彩目標的交付物，或印刷廠將與實體樣本比對的軟打樣，請改用支援設定檔的軟體，搭配校正過的螢幕，並向印刷廠索取正確的輸出設定檔。瀏覽器工具則用於這些時刻之間的所有場景：模型圖、UI 合成圖、簡報範本、初步調色盤探索，以及永遠不會離開螢幕的影像預覽。

何時應跳過瀏覽器，改用支援設定檔的軟體

當印刷顏色在合約上具有約束力時，瀏覽器近似值無法取代受管理的工作流程。以下幾種情況務必多花這個步驟：

  • 品牌顏色交付：如果品牌手冊指定了 CMYK 配方與容差，唯一站得住腳的做法是使用支援設定檔的轉換，搭配校正過的螢幕並進行實體打樣。列印專案該用 CMYK 還是 RGB 指南說明了何時該選擇哪種模式。
  • 印刷簽樣與合約打樣：當印刷廠需要軟打樣來與合約樣本比對時，ICC 設定檔、渲染意圖以及打樣工作流程都是不可妥協的必要條件。
  • 攝影或美術複製：膚色、博物館色彩以及畫廊複製通常依賴自訂設定檔，以捕捉特定的紙張與油墨組合。
  • 跨裝置品牌一致性：當標誌或包裝顏色需要同時在網路、零售和印刷中正確呈現時，單一的簡易 RGB 近似值無法維持一致性。
  • 任何需要被測量的東西：使用分光光度計進行的專色檢查完全忽略螢幕預覽，僅依賴印刷設定檔與油墨配方。

在這些情況之外，瀏覽器近似值更快、更輕量，而且誠實地標示其限制。您可以將 CMYK 配方移到螢幕空間，用於模型圖、比較與討論，而不必每次都付出設定檔往返的代價。

Pairing the screen preview with the rest of your image workflow

The output of the CMYK To RGB tool slots into the rest of your design toolkit cleanly. The hex value goes straight into CSS, the RGB channels map directly to image-editing software, and the swatch gives you a quick visual reference. Common companion tasks include:

  • Comparing the approximated CMYK image swatch with neighboring hex colors - the Color Mixer can blend the result against a brand color to see how they meet.
  • Verifying contrast between the approximated color and a background - the Color Contrast Checker applies WCAG rules and shows whether the pair passes AA or AAA.
  • Building a screen palette around the converted color - the Color Palette Generator produces complementary, analogous, and triadic schemes from the hex.
    • <li>Going the other way for a print-only file - the RGB to CMYK Converter round-trips a screen color back to ink percentages when print is the destination.

Treat the browser approximation as a screening step, not a sign-off. Once the design is approved and ready for production, the original CMYK recipe stays unchanged, the printer supplies the output profile, and profile-aware software handles the final conversion with a calibrated display and physical proof. Until then, four sliders, an eight-bit channel set, and a six-digit hex are enough to keep a screen mockup, a brand palette, and a quick image preview moving.

For a deeper look, see Check Color Contrast From an Image: A Workflow Guide.