RGB 轉 CMYK CSS 程式碼：將螢幕色彩轉換為印刷色彩

瀏覽器不接受 CSS 中的 CMYK 值 —— `device-cmyk()` 是 Level 4 的提案，目前沒有任何正式引擎支援 —— 因此「RGB 轉 CMYK CSS 程式碼」的工作流程通常意味著將螢幕色彩轉換為印刷百分比，以便貼到註解、可印刷的 PDF 或印刷機規格表中，而不是寫進樣式表裡。最快的做法是在瀏覽器工具中輸入一組 RGB 三元數（每個色頻 0–255），然後讀取對應的 C、M、Y、K 百分比；或者反向操作，輸入 CMYK 值並取回 RGB 與 HEX。轉換採用標準的樸素公式：將每個 RGB 色頻縮放為 0–1，K 設為 1 減去三個色頻中的最大值，其餘的 C、M、Y 則在扣除該黑色成分後計算，再以百分比形式輸出。反向（CMYK → RGB）則使用對稱公式 `R = 255 × (1 − C/100) × (1 − K/100)` 套用於每個色頻。純黑（R = G = B = 0）被視為特殊情況，避免公式除以零；超出範圍的輸入會被截斷，確保你隨時都能得到可用的結果。這一切都不需要 Photoshop、色彩管理流程，或是在頁面載入後的網路連線 —— 全部都在你的瀏覽器中執行，這正是 RGB 轉 CMYK 轉換器所做的事情。

rgb to cmyk css code — RGB 轉 CMYK CSS 程式碼：將螢幕色彩轉換為印刷用色

為何 CSS 不使用 CMYK（以及替代做法）

瀏覽器廠商實際實作的 CSS 規範是透過以螢幕為基礎的格式來定義色彩：`rgb()`、`rgba()`、`hsl()`、`hsla()`、`hwb()`、`lab()`、`lch()`、`oklab()`、`oklch()`、`color()`，以及十六進位標記法 `#RRGGBB` / `#RRGGBBAA`。CMYK 不在其中。CSS Color Module Level 4 草案定義了一個 `device-cmyk()` 函式，語法類似 `device-cmyk(0% 100% 100% 0%)`，但截至目前所有出貨的瀏覽器，該宣告都會被解析後捨棄，屬性會保留先前的值或繼承的值，頁面則以文件的預設色彩空間呈現。

這使得「RGB 轉 CMYK CSS 程式碼」成為一個略顯特殊的搜尋詞，因為嚴格來說並不存在這樣的東西 —— 你無法在 CSS 檔案中寫入 CMYK 色彩並讓瀏覽器接受它。你能做的，也是搜尋這個詞的大多數人真正想要的，是將螢幕色彩轉換為印刷百分比一次，然後把該百分比儲存在 CSS 註解、印刷廠規格表，或 InDesign、Illustrator、Affinity Publisher 中 CMYK 值真正有意義的色票面板中。RGB 轉 CMYK 轉換器正好產生這樣的輸出：從一組 RGB 三元數得到四個乾淨的百分比，同時顯示 HEX 與 RGB 供你與現有的設計權杖交叉對照。

如何在瀏覽器中將 RGB 轉換為 CMYK

在瀏覽器分頁中開啟 RGB 轉 CMYK 轉換器。
將顏色的紅、綠、藍值（各 0–255）輸入 RGB 欄位 —— 對應的 CMYK 百分比會即時更新。
或者將 CMYK 百分比（各 0–100）貼到 CMYK 欄位，即時讀取工具回傳的對應 RGB 與 HEX 值。
將即時色票預覽與你心中實際想像的顏色核對 —— 數學是確定性的，但你的眼睛才是最終把關者。
點擊所需格式（CMYK、RGB 或 HEX）旁的複製按鈕，然後將值貼入 CSS 註解、印刷檔案或你的設計規格中。

樸素公式與一個計算範例

此工具執行的轉換採用標準的樸素公式 —— 沒有 ICC 描述檔、沒有色域映射，只有能讓你快速逼近正確值的純算術。以下是完整的雙向流程，當你想親手驗算結果時可作為依據。

RGB → CMYK。 首先，將每個 RGB 色頻除以 255 縮放至 0–1。接著計算 K 為 K = 1 − max(R', G', B')。純黑（R = G = B = 0）為特殊情況：K = 100%，C = M = Y = 0%。對於其他顏色，其餘三個色頻為 C = (1 − R' − K) / (1 − K)、M = (1 − G' − K) / (1 − K)、以及 Y = (1 − B' − K) / (1 − K)。再乘以 100 得到百分比輸出。

CMYK → RGB。 反向是對稱的：R = 255 × (1 − C/100) × (1 − K/100)，G 與 Y 套用相同形式。代入百分比，四捨五入至最接近的整數色頻，即可取回螢幕 RGB。

使用純紅 RGB(255, 0, 0) 的計算範例：

步驟 1 —— 縮放至 0–1：R' = 255/255 = 1，G' = 0/255 = 0，B' = 0/255 = 0。
步驟 2 —— 找出 K：max(R', G', B') = 1，因此 K = 1 − 1 = 0。
步驟 3 —— 計算 C：(1 − 1 − 0) / (1 − 0) = 0 → 0%。
步驟 4 —— 計算 M：(1 − 0 − 0) / (1 − 0) = 1 → 100%。
步驟 5 —— 計算 Y：(1 − 0 − 0) / (1 − 0) = 1 → 100%。
結果：cmyk(0%, 100%, 100%, 0%) —— 純紅的教科書答案，證實工具執行的數學是正確的。

K 色頻並非數學上的點綴。它存在是因為以全強度混合青、洋紅和黃會浪費油墨、造成紙張過度上色，而且看起來很少是真正的黑色。專用的黑色板更便宜、乾燥更快、文字印刷更銳利，也是每台印刷機用於文字的方式 —— 這就是為什麼 K 會獨立成一個色頻，而不是由其他三者相加而成。

RGB 與 CMYK：為何螢幕與印刷會產生差異

RGB 是一種加法色彩模型。螢幕、手機和相機透過發出紅、綠、藍光來建構色彩，因此三個色頻全強度會產生白色。CMYK 則是減法：青、洋紅、黃、黑色油墨置於白紙上吸收光線，因此層疊油墨會將結果推向黑色而非遠離黑色。這種反向特性正是為何螢幕上選定的品牌色，打樣後往往顯得較暗淡、較深或色相偏移的原因。這兩種模型不只是使用不同的數字 —— 它們涵蓋不同的色彩空間。背光顯示器上的 RGB 能產生鮮豔的霓虹色、電光藍與亮橙，這些是任何青、洋紅、黃、黑色油墨組合都無法複製的。當轉換器為一個超出色域的螢幕顏色回傳 CMYK 值時，該值是油墨組能達到的最接近近似，而非數學上的瑕疵。

特性	RGB	CMYK
色彩模型	加法（光）	減法（油墨）
色頻	R、G、B	C、M、Y、K
色頻範圍	0–255 整數	0–100%
使用場景	螢幕、相機、CSS、螢幕設計	平版、數位與大圖輸出印刷
所有色頻全開	白色（光線達到最大）	接近黑色（所有油墨吸收光線）
色域	更寬廣明亮，包含霓虹色	較窄，顏色相較螢幕較為黯淡
目前的 CSS 支援	原生支援（rgb()、hex、hsl、lab 等）	僅為提案（device-cmyk()），尚未實作

RGB 轉 CMYK 的常見用途

來自網站調色盤的品牌色。 你客戶的標誌十六進位色碼在網站上，但名片、信紙或包裝需要 CMYK。轉換一次並把百分比交給印刷廠，而非憑空猜測。
標誌的合理性檢查。 在交付傳單或海報檔案之前，將企業色跑過一次，看看印刷版本是否會明顯偏移。如果會，你還有時間在上機印刷前與印刷廠討論結果。
設計包裝或標籤。 包裝幾乎都使用 CMYK（或專色，但 CMYK 是基本盤）。事先知道印刷值可省下一輪打樣，並避免生產線上的意外。
在螢幕上預覽印刷規格。 此轉換器支援雙向轉換，因此你可以從印刷報價單或供應商規格表中貼上 CMYK 值，在承諾打樣或模型前先看到大致對應的螢幕 RGB。
學習兩種模型之間的關係。 學生與自學設計師會使用此工具培養直覺，理解為何十六進位色碼與印刷色票無法對應，看著同一個顏色在模型間即時轉換。

誠實的限制與邊界情況

此工具對它「不是什麼」相當坦率。它是一個純粹的數學轉換 —— 沒有 ICC 描述檔、沒有來源端或目的端的色彩管理、也不知道任何油墨組或紙張。請將它視為快速的估算工具與合理的起點，而非最終的生產數字。

真正的印刷廠會透過特定的 CMYK 描述檔進行轉換 —— 北美銅版紙使用 US Web Coated SWOP、歐洲銅版紙使用 FOGRA39、日本印刷標準使用 Japan Color、商業作品使用 GRACoL 等等。每個描述檔都會考量印刷機使用的油墨、所印刷的紙張、該紙張產生的網點擴大，以及印刷機能實際達到的色域。這些數字會與此處的樸素結果不同 —— 每個色頻有時差異幾個點，高度飽和的色彩差異可能更大。對於最終生產，請使用此轉換器取得合理的 CMYK 起始值，然後信任印刷廠的描述檔與實體打樣。

兩個實用的防護機制確保無論你輸入什麼，輸出都可用：

純黑（R = G = B = 0）。 當 K = 1 時公式會除以零，因此工具將此視為特殊情況：K = 100%、C = M = Y = 0%。單獨由青、洋紅、黃構成的黑色既混濁又浪費，因此這個捷徑反映了印刷機實際建構飽滿黑色的方式。
超出範圍的輸入。 在 0–255 的欄位輸入 300，或在 CMYK 百分比欄位輸入 150，工具會將值截斷到允許範圍，而不是拋出錯誤或產生損壞的顏色。你隨時都能得到乾淨、可貼上的結果。

一切都在你的瀏覽器本機執行 —— 不會上傳任何色彩、不需要帳號，且即使網路中斷，頁面在首次載入後仍可繼續運作。這讓它在印刷廠的後勤辦公室、Wi-Fi 不穩定的生產線，或是設計師出差時的筆電上都能使用。

如果你希望公式與即時工具並列展示，教學指南 RGB CMYK 轉換器：精確的公式與限制以額外的計算範例與邊界情況，完整說明相同的數學。

如果你正在權衡選項，免費 RGB 轉 HEX，無需註冊：瀏覽器工作流程對此有詳細介紹。