網頁設計用的CMYK轉RGB，是透過W3C的原始裝置CMYK公式1 − min(1, ink × (1 − K) + K)，再縮放到255，把青、洋紅、黃、黑四個油墨百分比，轉換成一組8位元的RGB三元組，以及一個六位數的十六進位色碼。一個根據這個公式打造的瀏覽器工具，會把油墨百分比帶入公式，讓每個色版都跑過這個運算式，乘上255，並套用四捨六入五取偶（half-even）的捨入規則，以符合公開發布的firebrick範例。這個結果被標示為螢幕近似值，而不是印刷目標值，這正是當品牌方提供CMYK數值、而交付成果是登陸頁、主視覺橫幅或UI元件時，網頁設計師真正需要的東西。這個工具不會載入任何ICC描述檔，也不會呼叫任何伺服器，而且只要任何一個滑桿一移動，頁面就會立刻更新，因此反覆嘗試幾乎是零成本的。這個轉換的重點，不是要預測印刷機最終會印出什麼，而是要讓設計師快速、可重複地了解一組未經校準的CMYK配方，在一般的sRGB螢幕上看起來會是什麼樣子。
為什麼網頁設計師需要一個CMYK轉RGB的預覽工具
大多數的網頁專案，起點都是一份印刷素材，而不是一張空白畫布。一份宣傳手冊、一份產品包裝、一份雜誌跨頁、一本使用Pantone專色的品牌指南——每一份都會交給設計師一本色票冊、一份匯出的PDF，或一份活在CMYK色域裡的InDesign文件。網頁端的工作仍然需要一個RGB答案，而要用慢的方式取得這個答案，就得開啟Photoshop、選擇正確的工作色域、為來源建立描述檔，並為每個案子匯出一份色票庫。當設計師只是想知道一個品牌青色放進主視覺漸層之後，讀起來會偏向藍綠色、天空藍還是深海軍藍時，一個瀏覽器預覽工具就能跳過上述所有步驟。
網頁設計也仰賴速度。一份登陸頁的設計稿，通常一個下午就要做出六、七個配色決定，而其中大部分都來自同一份品牌參考資料。一個能在單一頁面上把CMYK百分比轉換成RGB與十六進位色碼的工具，能讓設計師快速畫出配色方案、貼進Figma畫框，然後繼續往下做。因為這個運算是在瀏覽器中完成的，也沒有任何數值離開裝置，設計師可以放心地把私人品牌指南裡的數值輸入進去，而不必把敏感的色彩資料傳送到任何地方。
這個轉換工具所服務的對象，也和印刷打樣的對象不同。網頁訪客是在一台sRGB螢幕上、在環境光下、坐在沙發前看到結果。印刷操作人員則是在塗佈紙材上、在D50標準看樣燈箱下看到結果，並依照一個實體Pantone色票核對簽核。原始的CMYK轉RGB近似值，鎖定的是前者；有描述檔感知能力的軟體，鎖定的是後者。搞清楚一份交付成果屬於哪一種對象，才能決定該開啟哪一種工具。
原始CMYK轉RGB公式的運作方式
這個瀏覽器工具遵循的是W3C CSS Color規範所公布的裝置CMYK備援方案，用於沒有ICC描述檔可用的情況。完整的公式可以寫在一行裡：
display = 255 × (1 − min(1, ink × (1 − K) + K))，並採用四捨六入五取偶捨入。
對於三個螢幕色版中的每一個，相關的油墨值和黑色值，都會先正規化到0到1的範圍。紅色使用青色、綠色使用洋紅、藍色使用黃色——每種顏色的減色法油墨，都會從白色中減去該顏色的光。min(1, …)這一項，可以防止內部總和超過完整油墨覆蓋率，讓縮放後的結果不會意外變成負值或超過255。四捨六入五取偶的捨入規則，符合公開發布的firebrick參考值，因此瀏覽器輸出的結果，會與CSS引擎預期的結果一致。
一個實作範例可以說明這個機制。以C=100%、M=0%、Y=0%、K=50%為例，正規化之後就是C=1.0、M=0.0、Y=0.0、K=0.5。
- 紅色通道：1 − min(1, 1.0 × 0.5 + 0.5) = 1 − 1.0 = 0.0 → 0。
- 綠色通道：1 − min(1, 0.0 × 0.5 + 0.5) = 1 − 0.5 = 0.5 → 127.5 → 128（四捨六入五取偶）。
- 藍色通道：與綠色相同 → 128。
合併後的結果就是rgb(0, 128, 128)，也就是#008080，這是一種網頁設計師可以直接放進CSS變數中的藍綠色。W3C在CSS Color 4的裝置CMYK章節中，公布了同一組運算，其中firebrick這個參考值，正是用來檢驗實作是否正確的公開測試案例。
三個步驟，把CMYK轉換成適合網頁設計用的RGB
只要三個步驟，設計師就能從品牌指南中的一組CMYK配方，得到一個可以用在樣式表中的可用十六進位色碼。
- 設定四個油墨百分比。輸入0到100之間的青、洋紅、黃、黑數值。每個滑桿都會立即更新頁面，因此做出小幅調整的成本很低，也不需要在拿去和調色盤其他部分比較之前，就先確定一個數值。
- 讀出近似的螢幕結果。這個工具會顯示8位元的紅、綠、藍色版數值、六位數的十六進位色碼，以及一個視覺色塊。把這個十六進位色碼或三元組複製到CSS、Figma或設計語彙檔案中。這個螢幕色塊，同時也能拿來對照印刷色票冊做直覺檢查。
- 交給有描述檔感知能力的軟體來處理印刷。如果這份交付成果最終要送到印刷廠，螢幕端的工作就到這裡為止，接著要開啟一個能載入正確來源與目標ICC描述檔的、具備描述檔感知能力的應用程式。這個瀏覽器近似值不是一份印刷打樣，絕不能被當成合約上的色彩目標來使用。
一眼看懂的可預測端點
有一小部分CMYK配方，因為在這些情況下公式會簡化成單純的減法，因此總是會落在大家熟悉的網頁安全色上。下表列出設計師最常會碰到的端點，直接取自這個工具實際運算出來的結果。
| CMYK配方 | 螢幕結果 | 十六進位色碼 | 典型的網頁用途 |
|---|---|---|---|
| C 0%、M 0%、Y 0%、K 0% | rgb(255, 255, 255) | #FFFFFF | 頁面背景、空白畫布 |
| C 0%、M 0%、Y 0%、K 100% | rgb(0, 0, 0) | #000000 | 內文文字、主要UI |
| C 0%、M 100%、Y 100%、K 0% | rgb(255, 0, 0) | #FF0000 | 錯誤狀態、品牌紅 |
| C 100%、M 0%、Y 100%、K 0% | rgb(0, 255, 0) | #00FF00 | 成功狀態、品牌綠 |
| C 100%、M 100%、Y 0%、K 0% | rgb(0, 0, 255) | #0000FF | 連結色、品牌藍 |
| C 100%、M 100%、Y 100%、K 0% | rgb(0, 0, 0) | #000000 | 最大油墨覆蓋率的備援結果 |
任何落在這些乾淨配方之外的組合，都會落在它們之間漸層的某個位置上，這也是為什麼大多數品牌調色盤，會落在sRGB色彩立方體的中間範圍，而不是它的角落上的實際原因。認得這些端點的設計師，一眼就能看出轉換是不是出錯了——如果一個品牌洋紅色轉換出來不是#FF00FF，那幾乎可以肯定是百分比輸入值弄錯了。
瀏覽器近似值會在哪裡失準
真實的CMYK是與裝置相關的。印刷機、油墨組合、紙材、網點擴大、算繪意圖，以及內嵌的ICC描述檔，每一項都會改變最終印在紙上的結果。W3C的原始公式忽略了上述每一個變數，這也是為什麼用這個工具做出來的色塊，可能會和印刷打樣有好幾級肉眼可見的偏差。公式預測為#FF00FF的洋紅色，如果實際的油墨是一組塗佈紙用的Pantone印刷色組，印出來可能會是一種略帶灰調的洋李色。
網頁設計師可以接受這種偏差，因為他們的目標是客廳裡的一台sRGB螢幕。但印刷採購人員、印前操作人員或品牌經理則不能接受。任何需要對照印刷成品簽核的交付成果，工作流程中都必須包含來源與目標ICC描述檔、一台已校準的顯示器，以及一份來自實際印刷機的實體打樣。這個瀏覽器工具在那個工作流程中依然有用：貼上配方、讀出設計稿要用的螢幕十六進位色碼、關閉分頁，並讓原始的CMYK數值完整保留給印刷流程使用。
有兩個實際限制值得直接說明。第一，這個計算完全沒有色域對應（gamut mapping）的概念——任何落在sRGB立方體之外的顏色，會直接裁切到最接近的立方體內數值，這可能會在不知不覺中把一個品牌強調色壓平。第二，這個工具不會模擬紙張的白度、油墨的不透明度，或觀看條件，因此即使螢幕輸出完全相同，同一組CMYK配方，放在再生無塗佈紙和光面塗佈紙上，看起來也可能不一樣。
把它放進網頁設計工作流程中
三個習慣，能讓這個工具在一整週的工作中真正發揮價值。第一，把印刷用的CMYK配方當成真相來源，而不是螢幕上的十六進位色碼——這個工具負責轉換，但配方的所有權屬於品牌方。第二，把每一次轉換都記錄在一份小型的設計語彙檔案中，同時列出CMYK來源與十六進位輸出，這樣未來的設計師就能清楚看到這個顏色是從哪裡來的，如果品牌方更新了配方，也能回溯還原。第三，當品牌方交來一張Pantone或塗佈紙色票時，請向印刷廠索取實際的CMYK分解數值，而不是憑色票自行估算——在這個階段用猜的，正是為什麼主視覺橫幅和產品包裝最後會出現明顯不同色調的同一個顏色。
乾淨地交接給工程團隊同樣重要。一旦設計師從這個工具中拿到十六進位色碼，就把它貼進一個CSS自訂屬性，或匯出到設計語彙檔案中，並在整個網站中重複使用。Lizely上的CMYK轉RGB工具，正是為了這個循環而打造：設定四個油墨值、讀出螢幕結果、複製十六進位色碼，然後不必離開瀏覽器，就能繼續處理下一個色票。
至於反過來的情況——設計師手上已經有一個螢幕十六進位色碼，需要向印刷廠做簡報——Lizely上的RGB轉CMYK轉換器會朝反方向執行同一套原始運算。這個兩步驟的路徑，品牌CMYK進來、螢幕十六進位色碼出去，圍繞著它建立起來的整套流程，涵蓋了日常網頁設計工作中的大部分需求，而且完全不必離開這套工具組。
相關閱讀：線上RGB轉CMYK轉換器安全嗎？。
相關閱讀：免費CMYK轉RGB轉換，不必註冊。