將 RGB 轉換為 CMYK 以進行網頁設計，就是將顯示器上用來呈現色彩的紅/綠/藍通道值（0–255）轉譯成商業印刷機在紙張上印出相同色彩所需的青/洋紅/黃/黑油墨百分比（0–100）。網頁設計師活在 RGB 的世界裡：每一個 CSS 十六進位色碼、每一個 Figma 色票、每一個品牌色彩代碼，都是以三個光源通道來編碼。印刷廠則運作在 CMYK：在基材上使用四種油墨。從一個模式轉換到另一個，就是將螢幕上的設計變成可印刷檔案的關鍵，而且這個轉換很少是一對一的複製，因為這兩個模式描述的色域範圍有重疊但並不完全相同。一個瀏覽器型的 RGB 轉 CMYK 轉換器可以即時進行雙向運算，提供即時色票讓你確認結果，並能將數值直接複製到你的版面或印刷前檔案中。
為什麼網頁設計師會撞上 RGB 轉 CMYK 的高牆
網頁專案是以 RGB 建構的。這是瀏覽器、手機、螢幕以及大多數網頁設計工具所使用的模式。CSS 使用十六進位與 rgb() 標記法，設計系統將品牌色彩定義為 RGB 三元組，而設計預覽一律預設是在背光的加色裝置上顯示。相對地，印刷要求的是 CMYK：在白紙上以減色方式吸光的四塊色版。這兩者之間的轉換通常發生在專案後期，也就是設計師將傳單、名片、包裝模型或活動海報交給印刷廠的時候。在瀏覽器預覽中看起來完美的色彩，現在必須用油墨重現，而這正是色彩開始走樣的地方。
造成這個落差有三個結構性的原因。第一，RGB 是加色模式：每個通道都是一個光源，紅、綠、藍全強度相加便得到白色。CMYK 是減色模式：每個通道都是一種會吸收光線的油墨，在白紙上疊加青、洋紅、黃會逐漸趨向黑色。兩個系統本質上是以相反方向描述色彩。第二，RGB 的色域比 CMYK 更寬廣、更明亮，所以螢幕能呈現的霓虹綠、電光藍、飽和橘色，都落在平版印刷機無法重現的範圍之外。第三，同一個十六進位色碼在不同螢幕上看起來可能略有差異，而印刷輸出則取決於紙張材質、油墨組合、網點擴大以及印刷機的色彩描述檔，這些在螢幕上都不存在。
結果是，幾乎每一次的網頁轉印刷交接都至少會發生一次「這顏色印在紙上跑掉了」的對話。在檔案離開你的桌面之前，先做一次快速的 RGB 轉 CMYK 轉換，能幫助你預先掌握這場對話，並提供一個可以直接貼到 InDesign 或 PDF 匯出設定的數字，省去瞎猜。
如何將網頁色彩轉為 CMYK 以便印刷
這是網頁設計師需要從既有的網頁或品牌色彩中取出可印刷 CMYK 數值的實用工作流程。
- 在瀏覽器中開啟 RGB 轉 CMYK 轉換器。
- 輸入你從 CSS、設計工具或品牌規範中取得的 RGB 值。每個通道接受 0 到 255 的數字。
- 讀取工具回傳的四個 CMYK 百分比，並透過即時色彩色票確認預覽與你心中的色彩相符。
- 如果你拿到的是 CMYK 目標值（來自印刷規格表或打樣），請改將這四個百分比貼到 CMYK 輸入欄，以還原最接近的 RGB 等效值供螢幕預覽使用。
- 點擊 CMYK 區塊旁的「複製」，將數值貼到你的版面、InDesign 色票或 PDF 匯出設定中。
有幾個細節能讓這個工作流程更穩固。工具會自動將超出範圍的值限制在合法區間，所以單一通道的打字錯誤永遠不會產生錯誤結果。同時也會顯示 HEX 值，當你想確認網頁色彩與印刷色彩對應到同一視覺基準時，這非常方便。由於所有運算都在瀏覽器本機執行，不會上傳任何色彩，這在檔案包含尚未公開的品牌色票時格外重要。
RGB 轉 CMYK 轉換背後的數學
這個工具所執行的轉換是標準的簡易公式，這也是大多數快速估算工具使用的相同算法。
從 RGB 到 CMYK 時，每個通道會先從 0–255 縮放為 0–1：R' = R/255、G' = G/255、B' = B/255。接著設定 K（黑色版），其值為 1 減去三個縮放後通道中的最大值，因為這個最大通道決定了該色彩已內含的暗度。剩下的暗度再分配到 C、M、Y 三個色版上：
- K = 1 − max(R', G', B')
- 若 K = 1（純黑輸入），則 C = M = Y = 0
- 否則：
- C = (1 − R' − K) / (1 − K)
- M = (1 − G' − K) / (1 − K)
- Y = (1 − B' − K) / (1 − K)
接著將每個結果以 0 到 100 的百分比表示。
以一個完整的例子來看，網頁設計師可能在 CSS 中找到的品牌橘色：RGB (255, 87, 51)。縮放後為 R' = 255/255 = 1.000、G' = 87/255 ≈ 0.341、B' = 51/255 = 0.200。最大值為 1.000，所以 K = 1 − 1.000 = 0。接著 C = (1 − 1.000 − 0)/(1 − 0) = 0.000，M = (1 − 0.341 − 0)/(1 − 0) = 0.659，Y = (1 − 0.200 − 0)/(1 − 0) = 0.800。以百分比表示，CMYK 值為 C 0%、M 66%、Y 80%、K 0%。
純黑是特例：當 R、G、B 都為 0 時，K 變成 1，C、M、Y 色版會被強制為 0，讓印刷機只疊印黑色油墨。反向運算使用 R = 255·(1 − C/100)·(1 − K/100)，G 與 B 的公式結構相同，這也是為什麼將 CMYK 百分比輸入工具後，會得到一個供螢幕預覽的 RGB 三元組。
鮮豔的網頁色彩、色域，以及為何印刷看起來較黯淡
鮮豔的螢幕色彩之所以很少能如你預期地印出來，原因是色域，而不是算術。螢幕能混合紅、綠、藍光，產生任何 CMYK 油墨組合都無法比擬的色彩。CMYK 色域是 RGB 這個較大色彩空間中的一個較小體積；任何落在這個體積之外的部分，都必須以最接近的色域內色彩來近似，通常意味著飽和度較低且色相略有偏移。
| 網頁色彩類別 | 典型的螢幕外觀 | CMYK 印刷表現 |
|---|---|---|
| 鮮橘 / 紅橘 | 鮮豔、發光 | 超出 CMYK 色域；會被近似處理，通常更黯淡 |
| 霓虹 / 萊姆綠 | 高飽和、近乎發光 | 印得更黯淡；通常偏暖或更接近橄欖色 |
| 電光藍 / 寶藍 | 飽和、深邃 | 依描述檔不同，可能偏紫或偏青綠 |
| 亮洋紅 / 粉紅 | 純粹、發光的粉紅 | 飽和度下降；可能偏紅 |
| 中調藍綠 / 青色 | 乾淨的藍綠色 | 重現效果良好；在非塗佈紙上會有輕微色相偏移 |
| 純黑 (#000000) | 螢幕上的真實黑色 | CMYK 黑 = 100% K；豐富黑會額外使用 C/M/Y 色版 |
就網頁設計來說，最讓設計師感到意外的正是這個部分：CSS 十六進位色碼對顯示裝置而言是精確指令，但對印刷製程而言只是一個提示。當你將檔案交給印刷廠時，印刷廠的印前軟體最終會決定哪個色域內的色彩最符合你的要求，而這個決定是由繫結於實際紙張、油墨與印刷機的 ICC 描述檔所主導。簡易的 RGB 轉 CMYK 數學能給你一個合理的起點，讓你能推敲兩者之間的關係，但它並無法重現那個由描述檔驅動的決定。這也是為什麼同一個轉換器將 CMYK 反推回 RGB 時，只能產生印刷值的近似螢幕預覽，而非精確匹配。
何時使用此估算，何時該使用印刷機的 ICC 描述檔
誠實界定範圍：此轉換器執行的是純粹的數學運算，而非 ICC 色彩管理。這在幾個常見的網頁設計任務上是夠用的，但在其他情境下則不足。
適合使用此轉換器的情境：
- 需要快速估算，從網頁調色盤中取得的品牌色彩找到 CMYK 起點時。
- 在送出檔案前，先大致檢查標誌色彩是否會在紙上明顯走樣。
- 學習兩個色彩模式如何對應，以及 K 通道實際在做什麼。
- 反向操作：將印刷規格中的 CMYK 值拿來，預覽它在螢幕上大約的呈現效果。
下列情境請信任印刷廠的描述檔與實體打樣：
- 最終交付物是正式印刷量產，而非一次性辦公室列印。
- 品牌色彩必須在網頁與包裝或文具印刷之間完全一致。
- 基材特殊（牛皮紙、箔紙、布料、透明膠片），因為印刷描述檔與油墨組合會改變。
印刷廠可能使用的常見 ICC 描述檔包括不同地區塗佈紙使用的 US Web Coated (SWOP) 與 FOGRA39，以及 Japan Color 系列變體。這裡採用的簡易數學不會與這些描述檔完全吻合，差距有時是幾個百分點，對高飽和色彩而言有時還會更大，因為每個描述檔都對應特定的油墨組合、紙張與網點擴大行為。如果印刷廠要求你以他們的描述檔提供檔案，請在他們指定的描述檔下建構 PDF，而不是依賴通用的轉換結果。若想更深入了解如何降低網頁與印刷之間的色彩落差，請參閱 在不失色彩準確度的前提下將 RGB 轉換為 CMYK。
對大多數日常的網頁轉印刷工作來說，RGB 轉 CMYK 轉換器是一個快速、私密的方式，能在兩個色彩世界之間搭起橋樑，讓每次交接都從一個你理解、而非瞎猜的數字開始。
若想進一步了解，請參閱 在 Mac 上將 RGB 轉為 HEX：在瀏覽器中轉換色彩。