若要將 CMYK 印刷油墨轉換為 CSS 程式碼，請先把四個 CMYK 百分比轉成 8 位元 RGB 色頻或六位數十六進位值，再把該值以 rgb()、rgba() 或 #RRGGBB 代碼的形式貼入樣式表。CSS Color Module Level 4 仍將 CMYK 視為裝置相依的色彩空間，且不會在樣式表中解析 CMYK——目前的 CSS 並沒有 cmyk() 函式——因此任何從印刷打樣、品牌手冊或 PDF 色票複製過來的顏色，都必須先轉成以 RGB 為基礎的表示法，才能套用於 HTML、SVG 或設計模型上。CMYK 轉 RGB 工具使用 W3C 的樸素裝置 CMYK 後備機制來執行此轉換：它接受 0–100 刻度上的青色、洋紅、黃色與黑色，將每個油墨對黑色反相，把結果縮放至 0–255 的顯示範圍，並同時序列化為整數色頻與可直接用於 CSS 的十六進位字串。由於整個運算都在瀏覽器中執行，轉出來的 RGB 與十六進位值都是在本機產生，不會上傳到任何伺服器。
為何 CSS 需要 RGB 或十六進位,而非 CMYK
CSS Color Module Level 4 將 CMYK 記載為裝置相依的色彩空間,目前僅將其定義為舊版 SVG 輸入的後備方案,而不是可直接使用的樣式表函式。實際上,代表瀏覽器在樣式表中真正會解析的色彩語法,都是 RGB 家族:#RRGGBB 與 #RGB 十六進位代碼、rgb() 與 rgba() 函式,以及 HSL 系列。並不存在任何 cmyk() 宣告可讓 Chrome、Safari 或 Firefox 在樣式表規則中解析。任何想套用於背景、邊框、文字、填色或描邊的顏色,都必須以這些 RGB 衍生形式傳入。
當印刷配方、品牌指南或 PDF 色票交付給網頁專案時,這種落差便隨之產生。在印刷打樣上看起來正確的四個 CMYK 數字,無法原封不動地放進樣式表。只拿到 CMYK 百分比的設計師,必須決定要使用支援色彩描述檔的應用程式進行校正轉換、接受概略的螢幕預覽,或是跳過轉換並承擔色票與來源不符的風險。瀏覽器版的 CMYK 轉 RGB 工具正是針對第二種路徑而生:它會快速、本機地算出 RGB 與十六進位值,讓你貼進 CSS 作為起點。
若你以印刷數值維護既有的色盤,並想以此驅動 CSS 模型,W3C 的裝置 CMYK 樸素轉換提供了一套確定性的公式來銜接這道流程。它並非印刷打樣,但是可預測、可重複的方式,能把四色油墨配方讀成任何瀏覽器皆能呈現的 sRGB 風格數字。
樸素 CMYK 轉 RGB 公式的運作原理
W3C CSS Color 規範中發布的樸素轉換,把 CMYK 視為對白頁的簡單減法:每個彩色油墨自紙面減去,黑色 (K) 則加深這個減量。數學上,每個顯示色頻的計算方式為 1 減去 (1 與 (該色油墨乘以黑色作用後剩餘的白色) 加上 K 之和) 的最小值,然後再將結果縮放至 0–255 的範圍。W3C 定義此裝置 CMYK 後備機制,是為了在使用者代理沒有內嵌色彩描述檔時,仍能夠呈現 CMYK 色彩。
每個色頻的公式為:
顯示值 = 255 × ( 1 − min( 1, ink × (1 − k) + k ) )
其中 ink 是正規化後的數值:紅色對應青色、綠色對應洋紅、藍色對應黃色。青色自紅色減去、洋紅自綠色減去、黃色自藍色減去。黑色再加在貢獻中的油墨之上,因此提高 K 會同時壓暗所有色頻。
以單一計算範例來看,取 C = 0%、M = 100%、Y = 100%、K = 0%:
紅色色頻: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——也就是純紅色,符合常見的端點:滿版洋紅加上滿版黃色在白色基材上結合,會抵消綠色與藍色。同樣的邏輯在所有油墨為零時會產生白色,而在 K 為 100% 時產生黑色;CMYK 轉 RGB 中的實作採用「半偶數」進位法,使整數色頻與 W3C 的 firebrick 範例相符。若想深入了解已發布的規範,W3C CSS Color 4 中的裝置 CMYK 章節會記載該公式的確切內容與設計理由。
從 CMYK 百分比取得 CSS 可用的 RGB 與十六進位
- 在瀏覽器中開啟 CMYK 轉 RGB 工具。不需要上傳檔案或註冊——四個滑桿與百分比輸入框會立即顯示在頁面上。
- 輸入青色、洋紅、黃色與黑色,數值介於 0 到 100 之間的百分比。若你的來源使用不同刻度(例如舊版應用程式的 0–255 油墨值),請先將其正規化為 0–1,再乘以 100。
- 滑桿移動時即時讀取輸出結果:頁面會顯示 0–255 範圍內的三個整數色頻(紅、綠、藍)、一個六位數十六進位代碼,以及一個可預覽未校正螢幕色彩的色塊。
- 若想取得可直接套用於 CSS color、background-color、fill 或 stroke 屬性的值,請複製十六進位代碼 (#RRGGBB)。若你的設計系統偏好函式語法,則複製 rgb() 或 rgba() 形式。
- 把該值貼進你的樣式表、SVG 屬性或設計模型中,並確認色塊符合預期。若來源至關重要,請與已載入正確內嵌 CMYK 描述檔的支援色彩描述檔應用程式相互比對。
將十六進位與 rgb() 值放入實際的樣式表
一旦 CMYK 轉 RGB 工具產生十六進位代碼,你就能在 CSS 讀取顏色的任何位置使用它。以下是輸出結果在實際程式碼中的幾個落點範例:
styles.css
:root { --brand-red: #FF0000; } .button-primary { background-color: var(--brand-red); color: #FFFFFF; } svg .icon-fill { fill: rgb(255, 0, 0); } svg .icon-stroke { stroke: rgba(255, 0, 0, 0.85); }
十六進位代碼 #FF0000 在功能上等同於 rgb(255, 0, 0);唯一的差別只在語法。十六進位較短,是實際上 production CSS 的預設;rgb() 則在同時需要透過 rgba() 設定透明度,或在 JavaScript 動畫中插值色頻時,較易組合。兩種形式皆屬於 CSS Color Module Level 4,在每個現代瀏覽器中的解析方式完全相同,因此兩者之間的選擇純屬風格偏好。
若你的團隊維護的是從 CSS 自訂屬性讀取值的共用樣式表,最乾淨的工作流程是在 :root 一次性定義轉換後的值,再於下游各處引用。如此一來,CMYK 來源只會透過單一受控的入口進入程式碼庫,未來若要重新轉換品牌或使用支援色彩描述檔的方式重新運算,只需更新單一變數即可。如需深入了解 RGB 色頻如何對應至十六進位代碼,RGB 轉十六進位指南 會從反方向走過相同的「色頻到十六進位」步驟。
瀏覽器近似轉換 vs. 支援色彩描述檔的轉換
有兩個因素會讓 RGB 輸出與你在支援色彩描述檔的應用程式,或在校正的印刷機上看到的結果不同。第一個是缺少 ICC 描述檔:瀏覽器的運算採用固定的樸素公式,無法判斷你的 CMYK 數值代表的是美國塗佈張頁印刷機、日本的打樣稿,或是大幅面噴墨機。第二個是渲染意圖:感知、相對色度、絕對色度與飽和度,各自以不同方式將超出色域的 CMYK 對應至 RGB,而樸素轉換未選擇其中任何一種——它只是把油墨對黑色反相而已。
| 面向 | 瀏覽器版 CMYK 轉 RGB 工具 | 支援色彩描述檔的轉換 |
|---|---|---|
| ICC 描述檔 | 未套用 | 載入來源 CMYK 描述檔與目的地 RGB 描述檔 |
| 渲染意圖 | 固定的樸素後備機制 | 可選擇(感知、相對、絕對、飽和度) |
| 超出色域的處理 | 靜默裁剪至 sRGB | 依所選意圖進行對應 |
| 最佳用途 | 快速的 UI 模型與色盤預覽 | 印刷打樣、合約色、品牌交付 |
| 顯示相依性 | 作業系統色彩描述檔與螢幕校正 | 具有已知描述檔的校正顯示器 |
| 印刷準確度 | 否 | 是(當描述檔與印刷機相符時) |
Photoshop、Illustrator 與 Acrobat 對同一組 CMYK 輸入可能顯示不同的 RGB 值,因為每個應用程式都會透過色彩管理模組,套用來源 CMYK 描述檔與目的地 RGB 描述檔(通常是 sRGB 或 Adobe RGB),並搭配所選的渲染意圖。瀏覽器端的工具無法複製這條流程,因為它從未載入描述檔。支援色彩描述檔的轉換與樸素轉換之間的數值差異,通常在色域內、低彩度的顏色上相當輕微;一旦 CMYK 配方推向 sRGB 無法表現的高彩度鮮豔油墨時,差異就會擴大。
若只是用於粗略的模型、品牌板預覽或無障礙檢查,這樣的差異尚可接受。但若是合約色、印刷打樣,或任何必須與印刷機打樣相符的成品,請把樸素結果視為起點,並使用支援色彩描述檔的軟體,搭配對應印刷機的正確來源描述檔與約定的螢幕目的地描述檔,重新執行轉換。Adobe 在其色彩轉換與油墨管理指南中記載了這套色彩管理流程,這份文件在必須以樸素結果處理品牌關鍵資產時,是相當有用的參考資料。
Limitations and When to Switch to a Profile-Aware Workflow
The CMYK To RGB tool is deliberately limited to the W3C naive fallback, and the limits matter when you decide what to trust:
- No ICC profile is loaded, so the output cannot match a specific press, ink set, paper, or rendering intent.
- The conversion assumes the four CMYK percentages describe a calibrated device-CMYK space, which is rarely true for casual print values.
- Channels are serialized with half-even tie rounding to match the W3C firebrick reference; this rounds half-cases consistently but can still differ from the rounding used by a commercial color engine.
- Out-of-gamut CMYK inks (for example, a vivid orange that exceeds sRGB) will clip silently to the nearest representable RGB, with no warning.
- Browser color display also depends on the operating system's color profile and the monitor's calibration, so even a "correct" RGB value can render differently on another screen.
Switch to a profile-aware workflow when any of the following apply: you are matching a brand color that has a contractual tolerance, you are producing a press proof, you are handing off to a printer who has provided an output profile, or you are running a soft-proof on a calibrated display. In those cases, keep the original CMYK values, ask the printer or the brand owner for the correct source and destination profiles, and run the conversion in Photoshop, Illustrator, Acrobat, or a dedicated color-managed tool. The naive approximation is a fast preview, not a substitute for that pipeline. For a broader view on deciding which color space to use for a given project, the CMYK vs RGB for print projects guide covers the choice from a production standpoint and points to the cases where each space actually fits.