CMYK 色票是一種視覺參考表格,將每個色塊與其在四色印刷中使用的精確青色、洋紅色、黃色和關鍵色(黑色)墨水百分比配對。印刷業者、設計師和開發人員會使用這些色票,將在螢幕上看起來正確的顏色轉換為紙上可重現的油墨混色。因為 CMYK 是減法模型(從白紙減去被吸收的油墨),而 RGB 是加法模型(在背光顯示器上混合發出的光),兩者之間不存在精確的一對一對應,因此色票為讀者提供了一個共同的轉換起點。許多搜尋者也預期 CMYK 色票應包含對應的螢幕端數值、命名的 CSS 關鍵字和 HEX 色碼,這就是為什麼標準化的 HTML 顏色名稱色票會成為 CMYK 轉換前查詢步驟中實用的輔助參考。在樣式表中已選定 tomato 或 cornflowerblue 的設計師,可以讀取這些關鍵字的精確 sRGB 值,將對應的 HEX 值交給轉換工具或設計軟體,並帶著一個可重現的色彩權杖(而非憑猜測)進入印刷討論。

cmyk color chart explained
cmyk color chart explained

CMYK 色票實際上展示了什麼

傳統的 CMYK 色票是一個印刷出來的表格,其中每個色塊都標有介於 0 到 100 之間的四個數字,分別代表青色、洋紅色、黃色和關鍵色(黑色)。這些數值描述了印刷機為該顏色所施加的每種墨水百分比;0/0/0/0 代表無油墨(白紙),而 100/100/100/100 代表每個色頻的最大油墨量(此製程所能產生最深的近似黑色)。不同製造商會各自發布自己的色票,因為油墨化學、紙張材質和印刷機校準都會改變最終的紙上呈現效果。

對數位設計師而言,CMYK 色票通常會將印刷百分比與對應的螢幕顏色配對,讓您能在軟體中挑選某個顏色,並預先知道印刷機會輸出什麼結果。該螢幕端數值幾乎都是以 RGB 三元組或六位數 HEX 表示。因此,一份實用的 CMYK 色票,實際上是一種多格式參考 —— 印刷百分比、RGB 和 HEX —— 排列成可同時以三種方式讀取同一顏色的格式。

為何 HTML 命名顏色與這場討論有關

網頁設計擁有自己的知名色彩識別系統:CSS 命名顏色。W3C CSS 顏色規格列出了 148 個不透明命名顏色關鍵字,每一個都繫結到一個精確的 sRGB 值。設計師多年來一直在樣式表中撰寫 color: tomato,而這些關鍵字中的每一個都會解析為一個精確的六位數 HEX。這種精確度在相同顏色必須經歷從螢幕到印刷的旅程時至關重要,因為印刷廠若沒有數值錨點,就無法重現「模擬圖中的那個藍色」。

HTML 顏色名稱色票列出了全部 148 個不透明 CSS 命名顏色關鍵字,並附上其標準化的小寫 HEX 值與十進位 RGB 三元組。它完全在瀏覽器中執行,絕不會向伺服器發送查詢,並可讓您透過關鍵字片段、精確 HEX 或完整 rgb() 字串進行搜尋。由於每一列都是穩定、由規格定義的對應(已根據 W3C CSS Color 4 命名顏色清單驗證),因此它能作為網頁設計師原始檔與印刷廠 CMYK 色票之間可靠的橋樑。您找出所用過的關鍵字、讀取其 HEX、將該 HEX 交給轉換工具或設計軟體,而最終輸出的印刷百分比,在專案中每位參與者之間都能重現。

這個角色與 CMYK 色票的功能不同。CMYK 色票回答的是「什麼油墨混色能產生此顏色?」,而命名顏色色票回答的是「這個 CSS 關鍵字背後的精確 sRGB 值是什麼?」。將命名顏色色票視為餵入 CMYK 轉換的查詢步驟,就能讓這兩個工具各司其職。

工作最佳起點
為原型挑選一個易辨識的關鍵字CSS 命名關鍵字
將穩定的色彩權杖複製到 CSS六位數 HEX
將精確顏色傳遞給印刷轉換工具HEX 或十進位 RGB
建立可上機印刷的 CMYK 檔案CMYK 百分比
在兩個設計檔之間比對顏色HEX 或 RGB

如何查詢命名顏色

若您將此色票視為搜尋工具而非靜態表格,查詢過程便相當直覺。

  1. 在瀏覽器中開啟 HTML 顏色名稱色票。
  2. 在篩選欄中輸入 CSS 顏色名稱的一部分(例如「rebecca」)、精確的 #RRGGBB 值(例如 #ff8800),或完整的 rgb(...) 字串(例如 rgb(255, 136, 0))。
  3. 檢視符合的列 —— 它會顯示關鍵字、即時色塊、小寫 HEX 和十進位 RGB 三元組。
  4. 點擊 HEX 值即可複製到剪貼簿;此色票僅在瀏覽器確認剪貼簿寫入成功後才會回報成功。
  5. 清除篩選條件即可恢復全部 148 個不透明命名顏色。查無結果的搜尋會明確顯示空結果,而不是以相近顏色替代。

以 # 開頭的搜尋使用精確 HEX 比對,而完整的 rgb(...) 字串同樣使用精確比對,因此簡短的數字片段絕不會意外對應到不相關的色頻值。關鍵字搜尋不區分大小寫並支援名稱片段比對,因此輸入「pur」會依規格順序回傳 purple、mediumpurple、rebeccapurple,以及任何含有這些字母的其他關鍵字。

CSS 命名顏色清單中的別名與邊緣情況

148 色清單中有幾列是對應到相同 sRGB 值的別名。Aqua 和 cyan 都會解析為 #00ffff;fuchsia 和 magenta 則都解析為 #ff00ff。美式與英式灰色拼法(gray、grey;darkgray、darkgrey;lightgray、lightgrey)會以個別的有效識別碼分行列出。此色票將每種拼法保留為獨立的一列,因為每種拼法都是有效的 CSS 識別碼,可能已存在於某個需要讀取或維護的樣式表中 —— MDN 命名顏色參考資料同樣以這種方式處理它們。

148 個關鍵字中有兩個刻意未列入:transparent 和 currentColor。Transparent 是帶有透明度的特殊關鍵字,代表完全透明的黑色,而不是不透明命名色塊;currentColor 則會採用元素計算後的 color 屬性值,因此沒有固定的獨立 HEX。將這兩者納入數值對應會誤導讀者,這正是此色票將它們排除在不透明計數之外的原因。

從色票上的 RGB 到印刷中的 CMYK

一旦從 HTML 顏色名稱色票取得精確的 HEX 或 RGB 三元組,轉換為 CMYK 的工作就會在您的設計軟體中或透過專用轉換工具完成。瀏覽器無法直接重現 CMYK —— CMYK 只有在油墨落到紙上時才存在 —— 因此命名顏色色票會停留在 sRGB,並在設計師或開發人員需要印刷分解數據時交棒。驅動 CMYK 百分比的標准減法運算,無論由哪個工具執行都相同,因此您從色票複製的 HEX,會在下游所有環節產生相同的印刷數值。

同樣的工作流程也適用於 DTF(直接轉印至膠膜)服飾印刷,其中以命名 HTML 顏色建構的印刷友善 CMYK 色票,可以與 DTF 店家所核准的色塊進行比對。由於每個命名顏色都是穩定的 sRGB 值,兩位讀取相同 HEX 的人會得到相同的 RGB,而後續的任何 CMYK 轉換也都能重現。若您偏好使用 Adobe 產品,在 Photoshop 中將 RGB 轉換為 CMYK 的指南涵蓋了應用程式內部相同的交棒流程;對於正在權衡印刷決策本身的讀者,在印刷專案中選擇 CMYK 與 RGB 的解說文章則整理出實際的取捨。

命名顏色清單作為調色板的限制

這 148 個命名顏色並非感知上均勻的調色板、科學分類法,也不是無障礙評等。某些相鄰的名稱看起來出奇地相近(lightseagreen 與 mediumseagreen 相當接近),而某些名稱也未一致地描述相對亮度。這些名稱是當初網頁瀏覽器加入基本顏色支援時所選定的歷史識別碼,現代 CSS Color 4 清單雖有細化,卻未將其轉變為刻意設計的漸層。

基於這個原因,請將命名顏色色票用於它被建構來執行的任務:翻譯舊式樣式表、為原型挑選易讀的關鍵字、檢查名稱背後的精確值、尋找別名,或將穩定的色彩權杖複製到 CSS。若要進行漸層、調色板生成、影像取樣、品牌調色盤設計或歷史網頁安全色,請改用對應的專用工具。色彩調色板產生器從單一基準色拉出和諧的調色盤;色彩漸層產生器以多個色標建立 CSS 漸層;影像平均色彩尋找器則從照片中擷取真實的 HEX。這些任務都落在本色票所設計的查詢角色之外。

就無障礙決策而言,僅憑顏色名稱永遠不足以判斷。對比度取決於前景與背景配對、文字大小、粗細,以及適用的指引 —— 例如 WCAG 2.2 AA 對比度閾值。專門的色彩對比度檢查工具會根據現行無障礙規則進行評估,與任何顏色名稱查詢分開處理。將命名顏色色票視為精確參考而非設計工具,即可讓「這個顏色的精確值是什麼?」的答案,與「這個組合是否清晰易讀?」的答案保持明確區隔。

相關閱讀:跳過 Photoshop:在瀏覽器中將 RGB 轉換為 CMYK。

相關閱讀:RGB 轉 HEX 色票:參考值與轉換方法。