CMYK 色碼以四個青、洋紅、黃、黑油墨的百分比來描述印刷顏色，每個通道的範圍為 0 到 100，0 表示完全不使用該油墨，100 表示該印版完全飽和。寫成 0, 100, 100, 0 的色碼因此代表純粹的印刷紅：無青色、滿洋紅、滿黃色、無黑色。CMYK 是平版、數位以及大多數商業印刷所使用的色彩模型，因為印刷機一次只能沉積一個印版的油墨，而這四個通道控制了每個印版轉印到紙張上的油墨量。然而 CMYK 色碼並不會告訴你網頁瀏覽器實際呈現的像素值，因為螢幕使用的是 sRGB 色彩空間中的加法 RGB 模型。為了跨越這個落差，許多設計師會先從 CSS 命名顏色（一個穩定的識別字，例如 red、rebeccapurple 或 lightseagreen）出發，先解析出其精確的小寫 #RRGGBB 與十進位 rgb() 值，再將作品送往印刷。
CMYK 色碼代表什麼
CMYK 色碼是一組以 C、M、Y、K 撰寫的四元組，每個字母代表一個百分比，範圍為 0 到 100。C 是青色油墨的百分比，M 是洋紅，Y 是黃色，K 是 key plate（主要印版），用於承載黑色。之所以稱為 key plate 而非 B，是因為在傳統活字版印刷與早期四色製程中，黑色印版負責承載結構細節並對齊其他三色，這個名稱因而沿用至今。像 100, 0, 0, 0 的色碼表示滿版青色油墨且無其他印版；0, 0, 0, 100 表示僅鋪上黑色印版；0, 0, 0, 0 表示完全沒有油墨，呈現的是基材本身的白色。CMYK 屬於減法色彩，因此每種油墨會吸收（減去）部分可見光譜，增加油墨量通常會使結果變暗而非變亮，這與螢幕上 RGB 光線的表現正好相反。
實務上 CMYK 色碼有多種等價的寫法。印刷端常會省略逗號寫成 0-100-100-0。撰寫 CSS 風格數值的設計師有時會把同一組色碼寫成 cmyk(0%, 100%, 100%, 0%)。Adobe Illustrator 之類的軟體則可讓你獨立調整每個印版並即時顯示百分比。這些表示法指涉的都是同一組四個數字與同一組油墨配方，因此 CMYK 色碼在使用它的各種工具之間是可攜的。
常見 CMYK 色碼一覽
一張簡短的理想化 CMYK 色碼表是個實用的起點，因為印刷設計中幾乎所有其他數值都是這八個參考色的混合或調整。以下是教科書上的標準值；現實印刷成品會略有偏差，因為油墨、紙張與印刷機校正都會影響最終色樣。
| 顏色 | C | M | Y | K | 對應 HEX |
|---|---|---|---|---|---|
| 青色 | 100 | 0 | 0 | 0 | #00FFFF |
| 洋紅 | 0 | 100 | 0 | 0 | #FF00FF |
| 黃色 | 0 | 0 | 100 | 0 | #FFFF00 |
| 紅色 | 0 | 100 | 100 | 0 | #FF0000 |
| 綠色 | 100 | 0 | 100 | 0 | #00FF00 |
| 藍色 | 100 | 100 | 0 | 0 | #0000FF |
| 黑色 | 0 | 0 | 0 | 100 | #000000 |
| 白色 | 0 | 0 | 0 | 0 | #FFFFFF |
請注意，螢幕上的紅色是「無青色」加上「滿洋紅與黃色油墨」的組合，而綠色則是「無洋紅」加上「滿青色與黃色」。這些理想化的對應關係與 CSS 所使用的 sRGB 原色一致，因為早期網頁色彩模型在設計時，就希望與印刷製程色並排顯示時仍能看起來正確。真實的品牌油墨、特別色與 Pantone 色票不在這個小表中，這時就需要更大型的 CMYK 參考表與專門的轉換工具。
為何 CSS 命名顏色是有用的橋樑
瀏覽器、影像編輯軟體與 CSS 前處理器都從同一個來源解析顏色：由 CSS Color 4 所標準化的 148 個不透明命名顏色關鍵字清單。每個關鍵字對應到 sRGB 色彩空間中一個小寫的 #RRGGBB 值，且這個對應關係在各家引擎中都相同。因此 CSS 關鍵字 red、rebeccapurple 與 lightseagreen 各自帶有一個明確的 HEX 值，你在 Chrome、Firefox、Safari、Edge 以及任何實作該標準的工具中都可以放心使用。
對印刷工作來說，這種可預測性相當重要。當設計師在樣式表中選用命名顏色時，每位協作者看到的螢幕色樣都相同，並能在毫無歧義的情況下將其轉換為 CMYK，清楚知道原本的設計意圖。HTML 顏色名稱對照表正是建立在這套標準之上：它列出全部 148 個不透明關鍵字，附上精確的 HEX 與 RGB 對應，將標準化的別名作為獨立的列，並把 transparent 與 currentColor 排除在數量之外，因為兩者都不是固定的不透明色樣。
但要注意的是，sRGB 命名顏色描述的是螢幕光線，而非紙上的油墨。兩台螢幕對同一個 HEX 值的呈現可能略有不同，而將該 HEX 值轉換為 CMYK 後的印刷結果，也不會與螢幕像素完全一致。請將命名顏色對照表視為螢幕顯示值的唯一真相來源，並在將作品送往印刷機之前，使用專門的 CMYK 轉換工具將該 HEX 翻譯為油墨百分比。
如何將 CMYK 色碼轉換為 CSS 命名顏色
將理想化 CMYK 色碼轉換為 RGB 的標準公式，是先將四個百分比轉為 0 到 1 之間的小數。以 r、g、b 表示最終 0 到 255 的通道值，公式如下：
R = 255 × (1 − C) × (1 − K) G = 255 × (1 − M) × (1 − K) B = 255 × (1 − Y) × (1 − K)
套用至教科書上的紅色色碼 C=0, M=100, Y=100, K=0（以小數表示為 0, 1, 1, 0）：
R = 255 × (1 − 0) × (1 − 0) = 255 × 1 × 1 = 255 G = 255 × (1 − 1) × (1 − 0) = 255 × 0 × 1 = 0 B = 255 × (1 − 1) × (1 − 0) = 255 × 0 × 1 = 0
結果為 rgb(255, 0, 0)，即 #FF0000。這個 HEX 值與 CSS 關鍵字 red 完全相符，因此命名顏色對照表中的條目與原始的 CMYK 色碼無需任何捨入即可對上。將同樣的公式套用於 C=100, M=0, Y=100, K=0，可得到 rgb(0, 255, 0) 與 CSS 關鍵字 green；套用於 C=100, M=100, Y=0, K=0，則得到 rgb(0, 0, 255) 與 CSS 關鍵字 blue。教科書上的三原色刻意對齊，讓 CMYK 理想值與 sRGB 理想值能在同一個 HEX 上會合。
如何在 HTML 顏色名稱對照表中查詢顏色
當目標是確認某個 CSS 命名顏色在螢幕上實際解析為何，或是要複製一個穩定的 HEX 值供樣式表或印刷交件使用，最快的路徑就是 HTML 顏色名稱對照表。該對照表完全在瀏覽器中執行，不會將任何搜尋或複製的值傳送至伺服器，因此在處理客戶工作時可放心使用。請依序執行以下步驟：
- 開啟對照表，找到表格頂部的篩選輸入欄位。
- 輸入 CSS 顏色名稱的一部分（例如 red、gold、slate 或 rebeccapurple）、精確的六位數 #RRGGBB 值，或完整的 rgb(...) 字串。關鍵字比對不區分大小寫且支援片段比對，因此輸入 ray 同時會回傳 gray 與 grey。
- 檢視每個符合的列。該列會顯示標準化的 CSS 關鍵字、呈現的色樣、小寫的六位數 HEX，以及十進位的 rgb(r, g, b) 值。若你的篩選以 # 開頭，對照表會切換為精確的 HEX 比對；完整的 rgb(...) 字串則進行完全比對，因此較短的數字片段不會意外比對到不相關的通道值。
- 點擊 HEX 欄位即可複製。對照表只有在瀏覽器確認剪貼簿寫入成功後才會回報成功，因此看到明確的成功指示即代表該值已進入你的剪貼簿。若剪貼簿權限被拒，仍可手動選取關鍵字、HEX 與 RGB 文字進行複製。
- 清除篩選即可恢復全部 148 列。清除操作不會更改任何對應關係，也不會合併別名列。
該對照表處理別名時也不會出現意外。Aqua 與 cyan 都會以獨立列的形式出現，對應 #00ffff；fuchsia 與 magenta 則都對應 #ff00ff。數個顏色名稱同時存在美式與英式的 gray 拼法，對照表會兩者並列保留，而非僅選其一。在閱讀或維護既有樣式表時，請將兩種拼法視為同樣有效的 CSS 識別字。
別名、邊界情況與 148 列的數字
148 這個數字是 CSS Color 4 所標準化的不透明命名顏色關鍵字數量。它不是行銷用的總計，也未以重複項目灌水：每一列都是一個有效的 CSS 識別字。標準化別名之所以以獨立列呈現，是因為它們在 CSS 文法中是不同的識別字，即使解析後對應到同一個 sRGB 三元組。最清楚的例子可見下表。
| 關鍵字 A | 關鍵字 B | 共用 HEX |
|---|---|---|
| aqua | cyan | #00ffff |
| fuchsia | magenta | #ff00ff |
若將這些列合併，將會隱藏真實的 CSS 文法細節，因此 HTML 顏色名稱對照表會保留兩種拼法並列顯示。另有兩個廣為人知的關鍵字刻意未納入 148 列之中。Transparent 是代表完全透明的黑色特殊關鍵字，它沒有單一的不透明 HEX 值，因此若將其列入命名色樣會扭曲整張表。CurrentColor 也被排除，因為其解析後的值取決於該元素本身的 computed color 屬性，故沒有獨立的 HEX。將這兩者排除在不透明表之外，能避免造成誤導的數字對應。
依據 W3C CSS Color 4 規格，命名顏色的完整清單是任何標準化對應的權威來源；至於日常查詢，HTML 顏色名稱對照表則以 ASCII 字母順序保留相同的識別字。MDN 的命名顏色參考資料則交叉引用了相同的關鍵字並附上瀏覽器注意事項。兩者都不是感知色票、無障礙評等，也無法保證實際顏料在特定螢幕上的重現結果。
何時應改用專屬的 CMYK 工具
當你需要確認某個 CSS 名稱對應的實際色彩、複製穩定的 HEX 或 RGB 值，或檢查兩個關鍵字是否互為別名時，HTML 色彩名稱一覽表就是合適的工具。它並非 CMYK 產生器，也不會輸出油墨百分比。CMYK 的轉換結果取決於實際使用的印表機、油墨組、紙張材質與 ICC 色彩描述檔，同一個 HEX 值在不同的條件下，可能會產生視覺上明顯不同的 CMYK 混色結果。
對於必須送交商業印刷的稿件，請使用專屬的 RGB 轉 CMYK 轉換器 來將 HEX 值轉成印刷百分比，或使用 CMYK 轉 RGB 工具在螢幕上預覽未經校正的印刷數值。這份具名色彩一覽表是圍繞 148 個不透明關鍵字及其 sRGB 對應值所建置的，因此若把它當成通用的色彩工具來使用，在處理漸層、調色盤產生或影像取色時，將會得到不完整的答案。
無障礙的決策同樣不應僅憑一個色彩名稱來判斷。對比度取決於前景與背景的組合、文字大小、字元的粗細，以及適用的規範（例如 WCAG 2.x AA 或 AAA）。像 lightgray 與 dimgray 這兩個色彩名稱聽起來很相似，但它們在特定背景下的實際對比度可能截然不同。針對這類決策，請使用 色彩對比度檢查工具，而不是僅憑關鍵字猜測。
若你正在權衡各種方案，Windows 上的漸層產生器：在 Edge 中編寫 CSS 一文對此有詳細說明。
若你正在權衡各種方案，CSS 核取方塊產生器的輸出是原生控制項嗎？ 一文對此有詳細說明。