可靠的向量 CMYK 色表始於可靠的色彩數值來源，而 W3C CSS Color 4 規格中所定義的 148 個不透明 CSS 命名色彩正好提供了這項保證:一個固定的、依字母順序排列的清單，其中每個關鍵字都對應到單一、經過驗證的 sRGB HEX 與十進位 rgb() 三元組。您不必費心搜尋可能由他人詮釋重新繪製的「CMYK 色表向量免費下載」檔案，而是可以從 HTML 色彩名稱色表 取出每個標準化對應，透過透明的公式將其轉換為 CMYK，然後把結果排版為乾淨的向量色塊。這套流程讓您能產出一份真正經得起檢視的印刷參考資料，當設計師詢問某個百分比從何而來時，您能明確答覆，同時也消除了網路上那些經重新取樣、有損壓縮，或人工建置的色表檔案所帶來的猜測。
問題在於「免費向量 CMYK 色表」的搜尋結果通常不外乎三種:一份色塊被重新繪製且 CMYK 數值經過四捨五入的 PDF、多年前上傳的過時 PNG，或是只有大約一打色彩、且未標示來源的迷你 SVG 檔。這些檔案都未說明數值依循的標準，大多也無法與您在螢幕上看到的實際色彩精準對應。反觀 CSS 命名色彩，它隸屬於一份公開發佈的規格，每個關鍵字都在 sRGB 色彩空間中解析，背後的數值在所有支援 CSS Color 4 的瀏覽器中都完全相同。以這個來源為基礎建構向量色表，您將得到的是一份單一可信的文件，而不是拼接拼湊出來的圖檔。
大多數免費 CMYK 向量色表的問題
當設計師搜尋 CMYK 色表向量並點下第一個下載連結時，通常會拿到一份藏有諸多瑕疵的色塊網格。色彩可能只是目測後四捨五入到漂亮的百分比，導致色表所宣稱的數值無法真正回推成旁邊那塊 RGB 色塊。檔案也可能是被壓平的 PDF，或是包在 SVG 容器中的低解析度 PNG，如此一來，使用向量的初衷便完全喪失。此外，色塊集合往往不完整——六十種、一百種，或是精選的「設計師最愛」清單，排除了像 rebeccapurple、cornflowerblue，或您可能仍在舊式樣式表中見到的英式/美式 gray 拼法等實用項目。這些下載檔案都未引用任何具權威性的來源，正因如此，在客戶詢問色塊數值的由來時，它們便難以取信於人。
CSS 命名色彩集之所以能解決這個問題，在於它是一份封閉清單。共有 148 個不透明名稱，全部定義於同一份規格文件中，全部繫結到特定的小寫六位數 HEX 值，並且在每一個相容的瀏覽器中都以相同方式呈現。從這份清單著手，意味著您的色表會有 148 列，因為標準本身就列出 148 列，您所做的任何更動都是刻意的選擇，而非上一次重新繪製檔案時的疏失。
一份可靠的向量 CMYK 參考的構成要素
CMYK 參考的價值取決於背後的資料，因此一份禁得起檢視的向量色表必須記錄重現螢幕色塊或送印時所需的每一項資訊。每列值得納入的五項要素為:CSS 關鍵字、小寫 HEX 值、十進位 rgb() 三元組、CMYK 近似值，以及以該色彩填色的向量色塊。關鍵字與 HEX 直接取自 CSS Color 4 規格;十進位 RGB 是同一對應關係的另一種標記方式;CMYK 百分比為螢幕到印刷的轉換結果;而色塊則是一個可無限縮放而不失真的實心填色。
| 欄位 | 範例數值 | 為何應納入色表 |
|---|---|---|
| CSS 關鍵字 | cornflowerblue | 可在樣式表與設計 token 中直接使用的穩定識別項 |
| HEX(小寫) | #6495ed | 螢幕色彩運算的精準 sRGB 錨點，可複製貼上至其他工具 |
| 十進位 RGB | rgb(100, 149, 237) | 適合指令稿、JSON token 與影像工具的友善標記 |
| CMYK 近似值 | C 58% / M 37% / Y 0% / K 7% | 供平版印刷與數位流程使用的印刷參考(未經校色) |
| 向量色塊 | 實心矩形 | 縮放時不會出現光柵化瑕疵;在螢幕上與關鍵字相符 |
請留意，aqua 與 cyan 這兩個關鍵字對應到同一數值，fuchsia 與 magenta 亦同。這並非筆誤——色表將這兩種拼法各保留為獨立的一列，因為每一個都是有效的 CSS 識別項。閱讀某份樣式表的印刷廠未必認得 magenta 才是他們在 CMYK 色表中預期看到的關鍵字，將別名一併保留可省去一輪往返確認。gray/grey 配對的情況相同，亦適用於 CSS Color 4 標準所列的全部 148 列。
在一分鐘內取出 148 個 CSS 色彩名稱
- 在任何現代瀏覽器中開啟 HTML 色彩名稱色表;表格會依 ASCII 字母順序載入全部 148 個不透明關鍵字。
- 決定複製方式。若只取單一色彩，可在篩選欄輸入關鍵字片段，例如 corn;色表會即時收窄結果，並維持符合標準的字母排序。
- 若要精準查找，可輸入六位數小寫 HEX (#6495ed) 或完整的 rgb(100, 149, 237) 字串。色表將兩者視為精確比對，因此不會因某個 100 而意外拉出紅色通道恰好為 100 的色彩。
- 閱讀該列:關鍵字、小寫 HEX、十進位 RGB 與呈現的色塊皆顯示於同一行，可讓您直接對照數值與色彩。
- 點選欲複製那一列的 HEX 值。色表會請求寫入剪貼簿，複製的內容為純粹的六位數值，既不變更大寫，也不附加任何 CSS 宣告。若剪貼簿權限遭拒，仍可手動選取顯示的 HEX 文字進行複製。
- 需要完整參考時，清除篩選即可還原全部 148 列;查詢並不會讓表格遺失任何列。
由於所有作業都在瀏覽器中執行，色表絕不會將您的篩選輸入、複製的數值或關鍵字清單傳送至遠端伺服器。這對於處理尚未公開的品牌色票、內部 token 清單，或任何尚未獲准外部審閱之色彩資料的設計師而言至關重要。
將每個 HEX 轉換為 CMYK 百分比
HEX 進入剪貼簿後，下一步便是螢幕到印刷的運算。CMYK 百分比並未儲存於 CSS 命名色彩端;它是由 sRGB 三元組依單一確定性公式計算而得，這也是為何每位設計師只要 RGB 數值相同(且轉換公式相同)，便能得到相同的 CMYK 輸出。對於任何不透明命名色彩，轉換流程會先將整數通道正規化至 0–1 範圍，接著由 1 減去最大通道得到黑墨，再從剩餘差值推導出青、洋紅與黃。
以 cornflowerblue 為例的逐步運算:
步驟 1——正規化通道:R = 100 / 255 = 0.392,G = 149 / 255 = 0.584,B = 237 / 255 = 0.929。 步驟 2——計算黑墨:K = 1 − 0.929 = 0.071，亦即 7%。 步驟 3——計算青色:C = (1 − R − K) / (1 − K) = (1 − 0.392 − 0.071) / 0.929 = 0.537 / 0.929 = 0.578，亦即 58%。 步驟 4——計算洋紅:M = (1 − G − K) / (1 − K) = (1 − 0.584 − 0.071) / 0.929 = 0.345 / 0.929 = 0.371，亦即 37%。 步驟 5——計算黃色:Y = (1 − B − K) / (1 − K) = (1 − 0.929 − 0.071) / 0.929 = 0 / 0.929 = 0，亦即 0%。
cornflowerblue 的結果約為 C 58% / M 37% / Y 0% / K 7%。您可將同樣五個步驟套用於 148 個名稱中的任何一個，或將 HEX 直接丟入像 RGB 轉 CMYK 轉換器 之類的自動化工具來略過算術過程。透過此方式得到的轉換屬於未經校色的近似值，適合作為設計師或印刷操作員微調的起點，而不宜直接作為具拘束力的印刷設定——公式可重現，但最終的油墨數值仍取決於印刷機特性檔與承印物。
運用資料建構一份乾淨的向量 CMYK 色表
手上有了來源數值後，向量排版的步驟便多半屬於機械作業。最短路徑是採用表格驅動的工作流程:先將每一列轉為扁平清單，再把該清單倒入您慣用的向量編輯器。
- 試算表階段。將關鍵字、HEX、RGB 與計算所得的 CMYK 貼入各欄。大多數向量工具可直接讀取 CSV 或 Tab 分隔的文字檔。
- Inkscape / Illustrator 階段。使用 SVG Pattern Generator 或編輯器內的矩形格點工具，將每列排成一個色塊磚。一個 148 列的格點可舒適地排入一張 A3 紙，大致為 14 欄乘 11 列，並留有標籤空間。
- Figma 階段。將一個色塊元件複製 148 次，並將每個實例綁定到一個由色表填入的樣式變數。透過綁定可保持數值的單一來源:若品牌調整某個 HEX，所有色塊將同步更新。
- CSS / SVG 帶狀檔案。一份含有 148 個 <rect> 元素並搭配對應 <text> 標籤的 SVG 文件，實質上是同一份色表，只是換了格式，亦可作為樣式表資源發佈。
正是向量輸出讓這個方法得以發揮價值。PNG 色表色塊固定於單一解析度;同一份色表若以向量形式呈現，便能無損放大縮小，因此可作為印刷海報、桌面參考資料，以及置於 Notion 或 Confluence 頁面中的縮圖使用。當每一列以文字內容(而非嵌入影像)形式提供關鍵字與十六進位數值時，色表也能被螢幕閱讀器清楚地讀出。
匯出前驗證別名與邊界情況
在發布圖表之前，請逐項檢查檔案中三類容易遺漏的細節。第一類是別名資料列：aqua 與 cyan 都對應到 #00ffff，fuchsia 與 magenta 也都對應到 #ff00ff。請將每個視為獨立的一列，而不要將它們合併，因為下游的樣式表可能會參照其中一種拼法，合併後的資料列會抹除這條線索。第二類是英式／美式 gray 配對（gray / grey、dimgray / dimgrey 等等）；CSS Color 4 標準列出這兩種拼法，而 W3C 命名色彩參考 也記錄了每一組，因此任何省略其中一種拼法的對照表都不算完整。第三類是邊界項目：aliceblue 是按 ASCII 排序的第一個關鍵字，yellowgreen 位於接近尾端，而 rebeccapurple 是為了向 Rebecca Meyer 致敬而新增到標準中的特殊項目——它並非泛指紫色，而是特定的 #663399 對應。
此工具本身已能防範大部分這些陷阱。資料集由以下不變式鎖定：148 列、148 個不重複的關鍵字鍵、每個值皆為六位小寫十六進位數字，並各自獨立為別名資料列。圖表絕不會合併別名、絕不會將 HEX 改寫為大小寫混用，也絕不會自行發明模糊同義詞把 blue 變成 navy。當你複製某個值時，列上看到什麼，剪貼簿中就是什麼——這正是這 148 個數字進入交付成品前你所期望的契約。
若想了解命名色彩在更廣泛的螢幕到印刷工作流程中的脈絡——以及關於色塊、油墨限制和紙基期望等印刷專屬指引——印刷用 CMYK 色表：從 CSS 名稱開始 這篇教學從印刷端操作員的角度涵蓋了相同的 148 種顏色。而如果你需要一次將所有命名色彩對應到可印刷的色表中，CSS 代碼轉 CMYK 色表 指南正是為此而寫，並在每個轉換旁標註對應的原始值。