在 Windows 上,你可以直接在 Microsoft Edge、Chrome 或 Firefox 中將任何 CMYK 油墨配方預為近似的 sRGB 色彩和六位數十六進制值——不需要 Photoshop、不需要安裝驅動程式,也不需要帳號。該頁面使用 W3C device-CMYK naive 轉換,根據四個百分比計算出螢幕色彩,然後在你移動滑桿的瞬間顯示 8 位元的紅、綠、藍色通道、十六進制字串,以及視覺色塊。由於運算完全在你的瀏覽器分頁中本機執行,因此在你選擇複製結果之前,什麼都不會上傳,什麼都不會離開你的電腦。這種設定正是讓基於瀏器的 CMYK 轉 RGB 預,對於在 Windows 上工作但沒有完整 Creative Cloud 訂的人,或是需要在開啟較大型應用程式前快速做 sanity check 的人來說,既實用又便利。這個方法的缺點——本指南的其餘部分將詳細說明——在於 W3C naive 後備機制只是一種近似值:用於快速 mockup 時效果極佳,但用於印刷核可時則不夠準確。

cmyk to rgb on windows
在 Windows 上進行 CMYK 轉 RGB:快速的瀏覽器預覽

為什麼 Windows 使用者會選擇基於瀏覽器的 CMYK 轉 RGB 預覽

Windows 10 和 Windows 11 出廠時並未內建任何能夠理解 CMYK 油墨百分比的工具。Photos 應用程式、舊版 Paint 應用程式,甚至 Microsoft PowerPoint,全都使用 sRGB 運作,因此將「C: 70, M: 20, Y: 0, K: 0」這類數值輸入這些程式時,只會產生錯誤。這個落差正是基於瀏器的預覽能發揮價值之處:你可以在同一台筆電上繼續工作,不需要安裝 Adobe Photoshop 或 Illustrator,也不必學習新的色彩面板。

瀏覽器網頁的另一項優點是,無論你在哪一台 Windows 電腦上操作,運算結果都能保持一致。Edge、Chrome、Firefox 和 Opera 都執行相同的用戶端 JavaScript,因此你在家中辦公室的 Surface 筆電上看到的轉換結果,會與辦公室另一邊桌上型電腦上同事看到的結果一致。如果你的印刷廠寄來一份含有 CMYK 配方的品牌手冊 PDF、含有目標百分比的包裝打樣,或是含有四色油墨數值的廠商色票表,你可以將這些數字複製到瀏覽器工具中,立即判斷該印刷色彩在一般顯示器上看起來是否合理。

這種情境最常發生在以下對象身上:收到 CMYK 印刷目標的內部行銷人員、在開啟真正的設計檔案前需要快速檢查色調的自由接案設計師,以及正在學習印刷油墨與螢幕光線差異的學生。在每一種情況下,問題都相同:給定四個介於 0 到 100 之間的數字,在 sRGB 螢幕上看起來會是什麼樣子?基於覽器的計算機能在不要求你付費購買工具的情況下回答這個問題。

瀏覽器工具實際計算的內容

CMYK 轉 RGB 頁面接收四個介於 0 到 100 之間的青色、洋紅、黃色和黑色百分比,並透過 W3C CSS Color 規範中所記錄的 device-CMYK naive 轉換 進行運算。每個百分比會正規化為 0–1 的數值,接著紅、綠、藍色通道會計算為 255 × (1 − min(1, colorInk × (1 − K) + K)),其中 colorInk 在紅色時為 C、綠色時為 M、藍色時為 Y,K 則為黑色百分比。產生的結果會使用四捨五入成偶數的進位方式(round half to even)取整為整數,並序列化為 8 位元通道。

由於這個公式與瀏覽器用於渲染 CSS 中 device-cmyk() 宣告的公式相同,因此你在工具中看到的數字,會與你將相同百分比貼到 stylesheet 中時 Edge 和 Chrome 顯示的結果一致。該頁面並排顯示三種輸出:三個 8 位元通道、一個六位數十六進制色彩,以及一個在你微調任何滑桿時立即更新的填色色塊。

有一個重要的界線:該頁面不會載入 ICC profile,也不會嘗試模擬特定的印刷條件、油墨組、紙張材質或渲染意圖。它是 W3C naive 後備機制的忠實實作,這對於未校準的比較來說是正確的基準,但對於印刷結果必須符合合約打樣的情況來說,則是錯誤的選擇。

開啟頁面並在 Windows 上將 CMYK 轉換為 RGB

  1. 從 Windows 開始功能表開啟 Microsoft Edge、Google Chrome 或 Firefox,然後前往 CMYK 轉 RGB 頁面。該頁面不需要安裝,完全在分頁中執行。
  2. 將「青色」滑桿拖曳到印刷配方中的百分比,然後放開。對「洋紅」、「黃色」和「黑色」重複相同動作,每個數值都介於 0 到 100 之間。
  3. 觀察色塊、紅/綠/藍讀數,以及六位數十六進制值在每次按鍵時更新。由於只要存在有效數值就會立即執行運算,因此不需要送出按鈕。
  4. 選取十六進制值或 RGB 數字並分別複製。接著你可以將它們貼到 PowerPoint 的「其他色彩」對話方塊、Windows 設定中的色彩選擇器,或任何 CSS 編輯器中。
  5. 如果色塊看起來不正確,請再次確認每個百分比都介於 0 到 100 之間。

讓我們手動走一遍範例,使用 W3C 的 firebrick 範例 device-cmyk(0%, 81%, 81%, 0%)。正規化後,它變成 C = 0、M = 0.81、Y = 0.81、K = 0。代入紅色公式:255 × (1 − min(1, 0 × 1 + 0)) = 255 × 1 = 255。綠色和藍色因為 M 等於 Y 而相同:255 × (1 − min(1, 0.81 × 1 + 0)) = 255 × (1 − 0.81) = 255 × 0.19 = 48.45,四捨五入為 48。結果是 rgb(255, 48, 48) 或 #FF3030,這與 CSS 規範用來驗證公式的 firebrick 色塊相同。

證明該數學正確的三個 CMYK 端點

naive 公式有一個有用的副作用:無論你使用哪個 Windows 瀏器,幾個明顯的端點永遠會產生相同的結果。這三個端點記錄在工具本身的測試固定資料中,因此你可以在信任更複雜的配方之前,將它們作為快速的 sanity check 使用。

CMYK 輸入RGB 輸出十六進制你會看到的結果
C 0, M 0, Y 0, K 0rgb(255, 255, 255)#FFFFFF純白(無油墨)
C 0, M 0, Y 0, K 100rgb(0, 0, 0)#000000純黑(滿版黑色版)
C 0, M 100, Y 100, K 0rgb(255, 0, 0)#FF0000洋紅加黃色,無青色也無黑色

如果你的 Windows 瀏覽器對這些輸入回傳了不同的數值,代表問題出在頁面狀態,而不是公式本身。這三列資料也能在廠商提供色票表時幫助你判斷方向:以 M 100 和 Y 100 建構、無青色也無黑色的品牌紅色,在螢幕上會顯示為 sRGB 紅色——這幾乎不是你為鮮豔 logo 所想要的結果,也暗示品牌手冊是針對特定印刷條件所撰寫的。

在 Windows 上近似值失效的情況

naive 公式只是個起點,不是印刷打樣。真正的 CMYK 轉換取決於影像中嵌入的 ICC profile、設計軟體中選擇的渲染意圖、紙張的網點擴增、油墨組,甚至印刷機房中的濕度。這些變數都不會進入基於瀏器的計算機,因為它根本沒有載入任何 ICC profile。該頁面明確聲明:它是一種未校準的幕近似值,絕對不能當作具契約效力的色彩目標使用。

你最常會在深藍色、飽和綠色和鮮豔橙色上察覺到這種落差——這些色彩位於 CMYK 色域邊緣,naive 公式會將它們對應到比實際油墨更暗淡的 sRGB 值。擁有正確來源和目的地 profile 的 Photoshop 使用者會看到更鮮豔的結果,因為該軟體解決的是色域對應問題,而不只是反轉四種油墨。Adobe 在其色彩管理指南中記錄了這種行為,如果你的工作經常送到印刷廠,值得一讀。

在 Windows 上的正確工作流程是:將原始 CMYK 配方視為事實來源,瀏覽器工具只用於快速的螢幕 mockup,並交由具備 profile 感知能力的應用程式——Adobe 產品、Affinity Publisher,或任何具備完善色彩管理的工具——在你提交印刷檔案前進行最終轉換。如果你擁有校準過的顯示器和硬體校色器會更好;如果沒有,請向你的印刷廠索取紙張打樣,並信任其結果勝過任何螢幕上的預。

將 RGB 或十六進制結果移到 Windows 應用程式

一旦瀏覽器頁面顯示你想要的色彩,下一步就是將它傳送到 Windows 應用程式。最簡單的做法是從頁面選取十六進制值並複製,然後將它貼到 PowerPoint 的「其他色彩 → 自訂」分頁、Windows 色彩選擇器(設定 → 個人化 → 色彩 → 自訂色彩),或你正在 Visual Studio Code 中編輯的 CSS 檔案。相同的十六進制值在 Figma 以及任何分頁的瀏覽器開發者工具中也能使用。

如果你需要的是整數通道而非十六進制值,可以從頁面複製 RGB 讀數並貼到偏好的工具中。PowerPoint 和 Word 接受標準「紅、綠、藍」格式的 RGB,Photoshop 的色彩選擇器也能毫無問題地讀取相同數字。若要在 Windows 上進行命令列作業,你可以將十六進制值貼到 PowerShell 提示字元中,並在需要編寫批次色票指令碼時將其轉換回整數。

對於經常在印刷與螢幕之間切換的設計師來說,值得加入書籤的相關工具是 RGB 轉 CMYK 轉換器,它以相同的 naive 轉換執行反方向運算。在不同的分頁中同時開啟這兩個頁面,就能在不離開覽器的情況下進行快速的雙向檢查——這通常是在 Windows 筆電上最輕量化的可行工作流程。

如需更深入的探討,請參閱 網頁設計的漸層產生器:建立、預覽、複製。

如需更深入的探討,請參 Mac 上的 CMYK 色表:從螢幕到印刷。