CMYK 轉 RGB 配色構想使用一個四行公式,把可印刷的油墨百分比轉換成近似的螢幕色彩 — 對每個彩色通道 I 套用 255 × (1 − min(1, I × (1 − K) + K)) — 而這個結果在設計上就是未經校色的。
這個 CMYK 轉 RGB 工具在瀏覽器中直接呈現該公式,讓你可以調整任意百分比的青色、洋紅、黃色與黑色,並立即看到對應的紅、綠、藍通道、一組六位數的十六進位色碼,以及一個視覺色塊 — 全部都在本機端運算。由於沒有載入任何 ICC 色彩描述檔,每個預覽都是快速的螢幕近似值:適合用於情緒板、介面 mockup 與粗略的配色比較,但絕對無法取代經過色彩管理的實際印刷。
當你已經掌握專案的 CMYK 端時 — 例如來自品牌指南的 logo 配方,或紙商提供的印刷色樣 — 這類預覽最為實用,因為你需要把它轉譯到數位 mockup,同時保留各油墨之間的關係。W3C 發布了這套簡易的裝置 CMYK 轉 sRGB 規則,讓瀏覽器、設計工具與 PDF 閱讀器能對單一可重現的近似值達成共識,而這也正是本工具嚴格遵循的規則。

CMYK 轉 RGB 配色構想的起點
尋求 CMYK 轉 RGB 配色構想的設計師,通常落在以下三種類型之一。印刷優先的設計師想看看印刷樣本手冊中的配方,在客戶的筆電上會呈現什麼效果。網頁設計師會從品牌指南中挑選一個 CMYK 目標,並需要一個可信的螢幕值來放進 Figma 畫面。行銷人員與小型業者則在建構一個必須同時在摺頁與登陸頁上存活下來的色彩系統,所以他們從油墨已經定案的 CMYK 開始,再回推回 RGB。
無論哪種情況,目標都相同:把 CMYK 視為印刷成品的單一事實來源,並用快速的 RGB 轉換處理所有數位內容。這類預覽背後的簡易裝置 CMYK 轉 sRGB 公式簡短到可以手寫出來。對於 {C、M、Y} 中的每個彩色油墨 I,顯示通道為 255 × (1 − min(1, I × (1 − K) + K)),其中所有值皆正規化至 0–1。這個結果在不同瀏覽器間都能重現,這也是為何這麼多配色構想教學都以此為基礎。
使用 CMYK 轉 RGB 工具建立配色構想
一旦心中有了一個配方,最快的螢幕預路徑就是幾次滑桿操作加上一張螢幕截圖。
- 在桌面或行動瀏覽器中開啟 CMYK 轉 RGB 工具。
- 將青色、洋紅、黃色與黑色滑桿從 0 調到 100 百分比,以符合你想預覽的配方。
- 讀取頁面上即時更新的 8 位元紅、綠、藍通道,以及六位數的十六進位色值。
- 擷取螢幕畫面,或將十六進位色碼複製到你的 mockup、CSS 檔或設計系統中。
- 用第二個配方重複以上步驟,以開始建構一組配色,再用第三個配方作為強調色或中性色。
- 在將檔案送印之前,把任何印刷用的稿件中的單一配方替換為具備色彩管理意識的轉換結果。
五個 CMYK 配方構想與其幕近似值
一個穩健的起點是挑選一個主配方、一個輔助配方,以及一個中性色。CMYK 轉 RGB 工具讓這個過程非常快速:寫下四個百分比、輸入工具、擷取色碼。若要手動換算其中一個配方,例如 C = 0、M = 100、Y = 100、K = 0 — 這是純洋紅加黃的油墨混合。使用 W3C 公式 255 × (1 − min(1, ink × (1 − K) + K))(每個通道套用,數值皆正規化至 0–1):紅 = 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(255, 0, 0),或十六進位的 #FF0000。你配色構想中的其他四個配方遵循相同的單一步驟計算,因此一旦公式記住了,就能在不打開其他頁面的情況下,直接在心中推算螢幕值。
下表比較了設計師擷取 CMYK 配色構想的各種來源,讓你能為眼前的專案挑選合適的起點。
| 來源 | 你能獲得什麼 | 最適合 | 限制 |
|---|---|---|---|
| 品牌或風格指南 | 經測試、預先混色的 CMYK 與 Pantone 值 | 標誌、重複性活動 | 通常受版權保護,變更速度慢 |
| 印刷樣本手冊 | 實際紙張上印出的油墨配方 | 印刷優先的素材 | 受限於單一紙張與單一印刷機 |
| 影像擷取 | 從影像中取樣的自然和諧 | 情緒板、編輯版面 | 需要具備色彩管理意識的取樣 |
| 手動 CMYK 配方 | 完全自訂的組合 | 主視覺、包裝 | 必須在印刷打樣上驗證 |
| 特別色轉四色 | 將 Pantone 特別色轉為 CMYK 構成 | CMYK 印刷機上的品牌一致性 | 永遠是感知上的妥協 |
「限制」這一欄值得仔細讀:每個來源都以同一項警語作結,而 CMYK 轉 RGB 工具在螢幕上呈現的正是這項警語 — 印刷機實際印在紙上的色彩,取決於油墨組、紙張、網點擴大、演算意圖,以及作業中嵌入的 ICC 色彩描述檔,而瀏覽器預覽無法重現這些因素中的任何一項。
為何每個螢幕預覽都只是近似值
即使百分比正確無誤,螢幕上的十六進位色碼也永遠只是對油墨在紙上表現的猜測。真實的 CMYK 輸出是與裝置相關的:印刷機、油墨批次、紙張塗層、網線數與網點擴大,都會明顯改變最終色彩。ICC 色彩描述檔 — 用以描述特定裝置如何重現色彩的小型資料檔 — 是專業軟體用來以受控方式橋接 CMYK 與 RGB 的關鍵,而這正好是瀏覽器工具刻意跳過的工作流程。該頁面本身已清楚地告訴你,結果並非印刷打樣、契約約定的色彩目標,也無法取代校色過的顯示器。
還有一項物理上的極限需要牢記。反射式的印刷紙張永遠無法達到自發光螢幕的亮度。即使是經過精準、具備色彩管理意識的轉換,印在紙上的效果,看起來仍會比同一個 RGB 值在背光螢幕上顯得略為黯淡,因此在螢幕上設計為「鮮豔」的配色構想,在實際送印之前,通常需要稍微提高飽和度。
將配色構想與色彩系統搭配
兩到三色的 CMYK 配色單獨使用,通常不足以應付專案。多數專案還需要互補的強調色、中性色階,以及對比安全的文字顏色。當第一個配方已輸入 CMYK 轉 RGB 工具後,自然的下一步就是從基準色產生輔助色 — 這正是 配色產生器 的設計目的。把主要配方的十六進位色碼作為基準色貼入,選擇互補、類似或三等分配色關係,即可立即獲得一個以 CMYK 錨點為基礎、可立即用於螢幕的色彩系統。
如果你需要的是靈感而非計算,精心整理過的 CMYK 轉 RGB 範例指南展示了數個常見配方及其近似的 RGB 與十六進位輸出,這是在你於 mockup 中選定某個配方之前,快速比較不同油墨混合效果的好方法。
CMYK 轉 RGB 翻譯中常見的陷阱
當設計師把 CMYK 配色構想轉為螢幕預時,有幾個陷阱會一再出現。
把十六進位色碼當作印刷目標。簡易公式忽略了網點擴大、油墨總量上限與紙張差異,因此同一個配方在打樣與實際印刷之間可能出現明顯落差。請保留原始 CMYK 值供生產使用,並僅將螢幕值用於數位 mockup。
把滑桿讀數當作 Pantone。CMYK 是四色印刷色。若品牌標準為 Pantone 特別色,以瀏覽器工具將其轉為 CMYK 再轉為 RGB,會損失兩層準確度。請改用 Pantone 色票橋接與實體打樣來驗證特別色。
假設飽和度會被保留。四色 CMYK 無法達到 sRGB 螢幕的飽和度,因此依賴霓虹粉或電光青的配色構想,在實際印到紙上時必然會失去活力。在螢幕預中預先加入小幅的飽和度緩衝,以因應這項落差。
在印刷與網頁上重複使用同一組 RGB 十六進位色碼。RGB 與 CMYK 描述的是不同的色彩空間,因此同一組數字在螢幕與紙面上代表不同的意義。請務必保留兩組平行的值 — 一組給印刷機的 CMYK 配方,一組給螢幕的 RGB 或十六進位色碼 — 並在風格指南中加以連結,讓團隊無需猜測。
CMYK 轉 RGB 工具正是為上述配對中的螢幕那端而生。它快速、僅需瀏覽器,而且刻意保持簡單,這也正是它在專案的配色構想階段 — 也就是檔案送印之前很久 — 如此實用的原因。
如果你正在權衡各種選項,Windows 上的配色產生器:在瀏覽器中使用對此有詳細說明。