CSS 命名色彩規範明確定義了 148 個不透明色彩關鍵字,而以該清單建立的 CMYK 色表範例,會將每個關鍵字與其精確的印刷油墨百分比、螢幕預覽,以及設計師在樣式表和印刷軟體中使用的標準化識別碼配對。由於 W3C 僅發佈這些對應一次且從不更改,任何以命名色彩所建立的範例,在瀏覽器、設計工具和預press 流程中都能保持穩定。HTML 色彩名稱色表以 ASCII 字母順序提供完整的 148 列資料集,因此不同機器上閱讀同一範例的兩位設計師,永遠會在相同列看到相同的關鍵字。色表直接儲存 sRGB 值;將這些十六進制代碼轉換為 CMYK 印刷百分比需要獨立的轉換步驟,這就是為什麼 CMYK 色表範例實際上是兩階段查詢:由色表列查到十六進制,再由十六進制查到 CMYK 百分比。落實這套兩階段結構後,你發佈的每個色彩皆可追溯到公開標準,而不是廠商偏好。
CMYK 色表範例包含哪些內容
一個實用的 CMYK 色表範例每列包含四個可讀欄位:人類可讀的關鍵字、螢幕空間的數值、渲染色塊,以及下游軟體可使用的印刷對應值。色表原生提供前三欄 — 關鍵字、小寫 #RRGGBB、十進位 rgb(r, g, b) 以及即時色塊 — 並在下一步驟中將 CMYK 轉換結果帶入。因為資料集鎖定為 148 列,你從色表引用的每個範例都對應到一個可驗證的識別碼。表格以 ASCII 字母順序依關鍵字排序,因此不同機器上閱讀同一範例的兩位設計師,永遠會在相同位置看到相同列。
十六進制欄位永遠是小寫六位數字,沒有簡寫、沒有 alpha 通道,也沒有前後的 CSS 宣告。rgb 欄位使用 0 到 255 的整數通道值。當你複製十六進制值並貼到 CMYK 轉換器時,轉換器讀取的同樣是這六位數字,因此色表與印刷輸出之間任何可見的差異都是轉換產物,而不是色表錯誤。色表並不直接儲存 CMYK;它儲存的是每個下游工具皆能毫無歧義讀取的精確起始值。
從色表讀取範例列
下方五個標準化命名色彩直接取自 CSS Color 4 規範。所顯示的每個數值皆為色表在該列所呈現的精確對應;下列數字皆非人工重新計算或近似推估。
| Keyword | HEX | RGB | Visual category |
|---|---|---|---|
| aliceblue | #f0f8ff | rgb(240, 248, 255) | Pale near-white blue |
| tomato | #ff6347 | rgb(255, 99, 71) | Saturated warm red-orange |
| mediumseagreen | #3cb371 | rgb(60, 179, 113) | Mid-tone green |
| rebeccapurple | #663399 | rgb(102, 51, 153) | Deep violet (added in CSS Color 4) |
| lightslategray | #778899 | rgb(119, 136, 153) | Cool neutral gray with blue cast |
每一列都是一個可獨立複製並轉換為 CMYK 的範例。設計師常從 rebeccapurple 這類單一關鍵字開始建構調色盤,因為它沒有感知上的意外 — 規範值就是每個瀏覽器所呈現的值。當你圍繞命名色彩建構 CMYK 色表範例時,即可繼承這種穩定性:每位讀取色表的協作者都會看到相同的起始十六進制,因此印刷轉換步驟僅有單一變數(轉換公式),而非兩個。色表在工作流程中的角色,是發佈精確的起始值;轉換器的角色,則是發佈精確的百分比。
如何從色表複製精確的 HEX
色表完全在瀏覽器中執行,因此複製精確的對應值只需幾次點擊。無論你需要哪一列,以下流程皆相同。
- 在色表頂端的篩選器中,輸入部分 CSS 色彩名稱、精確的 #RRGGBB 值,或完整的 rgb(...) 字串。
- 檢視符合條件的列,以取得標準化關鍵字、渲染色塊、小寫十六進制,以及十進位 RGB 對應。
- 點選要複製的十六進制值;色表會要求寫入剪貼簿,僅在瀏覽器解析該請求後才回報成功。
- 若剪貼簿權限遭拒,請以游標手動選取可見的十六進制文字,並以一般方式複製。
- 清除篩選器即可恢復全部 148 個不透明命名色彩,依 ASCII 字母順序排列。
篩選器接受三種輸入樣式。關鍵字搜尋不區分大小寫,且可匹配任何名稱片段,因此輸入 "slate" 會浮現 darkslateblue、darkslategray、lightslategray、slateblue、slategray,以及其他包含這些字母的關鍵字。以 # 開頭的搜尋會對六位小寫數字進行精確十六進制匹配。完整的 rgb(...) 搜尋同樣使用精確匹配,這表示簡短的數字片段不會意外匹配到不相關的通道值。若無相符結果,色表會顯示無符合訊息,而非以鄰近色彩替代,因此錯誤的十六進制絕不會悄悄四捨五入到兄弟列。
為何標準化別名會以獨立列呈現
取自命名色彩的 CMYK 色表範例,有時會在不同關鍵字下列出相同的十六進制兩次。這是刻意的:CSS 規範將歷史別名保留為獨立的合法識別碼。Aqua 與 cyan 皆對應 #00ffff;fuchsia 與 magenta 皆對應 #ff00ff。色表將這些保留為不同的列,因為每種拼法都是合法的 CSS 關鍵字,並可能已存在於舊版樣式表中。合併它們會悄悄改寫舊作者刻意選擇的程式碼,而色表的職責是呈現規範,而不是清理它。
美式與英式 gray 拼法也並存。Gray 與 grey 都會出現在色表中,lightslategray 與 lightslategrey 亦同。從印刷角度來看,兩種拼法指向相同的油墨混合;從樣式表角度來看,兩種拼法則是不同的 token。色表的職責是呈現這個區別,讓讀到交接檔案中 "darkgrey" 的設計師確實知道應將哪個十六進制轉換為 CMYK 輸出。請將每種拼法視為指向同一列的指標,而不是兩個獨立的色彩。
從命名色彩到 CMYK 印刷值
色表直接儲存 sRGB 值,並不儲存 CMYK 百分比。若要將色表列轉為 CMYK 色表範例,請複製十六進制,然後將其送入轉換工具,例如 RGB to CMYK 頁面,或其反向的 CMYK to RGB 頁面。對任何給定的十六進制而言,轉換公式是確定性的,但結果會依色彩設定檔與渲染意圖而有所不同,因此兩個轉換器可能在第三位小數上出現分歧。請將色表視為十六進制的真實來源,將轉換器視為百分比的真實來源。
148 列資料集也排除兩個常令新手困惑的特殊關鍵字。Transparent 未列入,因為它是帶有 alpha 的關鍵字,代表透明黑色,而不是不透明的命名色塊。CurrentColor 未列入,因為它的值取決於該元素上所計算的 color 屬性,因此沒有固定的獨立十六進制對應。將這些值排除於不透明表格之外,可避免 CMYK 色表範例中出現誤導性的數值對應,並使列數在各種瀏覽器與維護更新中穩定維持 148 列。
命名色彩參考在印刷上的限制
命名色彩是歷史識別碼,而不是感知均勻的調色盤、科學分類法或無障礙評等。部分相鄰的關鍵字在螢幕上看起來驚人地相似,且亮度排序未必與名稱所暗示的一致。色表是穩定的參考,而不是產生器。如需建構調色盤,請使用 Color Palette Generator;如需漸層,請使用 Color Gradient Generator;如需影像取樣,請使用 Image Average Color Finder。將色表混入這些工作流程會使其變成產生器,而這正是其鎖定的 148 列資料集被設計來抗拒的角色。
在無障礙決策上,僅憑色彩名稱並不足夠。對比取決於前景與背景的配對、文字大小與粗細,以及適用的指引(例如 WCAG 2.2 AA 或 AAA)。一旦有了候選的前景與背景配對,請立即從命名色彩色表切換到 Color Contrast Checker。如需衡量兩個印刷候選之間的感知差距,Color Difference Calculator 會提供比目測色表更可靠的 CIEDE2000 數值。色表回答的是「這個關鍵字的精確十六進制是什麼?」;對比與差異工具回答的是「這組配對是否可用?」。
有幾項不變量讓資料集能長期值得信賴。色表嵌入 148 個具精確 sRGB 對應的不透明 CSS Color 4 關鍵字,將別名保留為獨立合法的識別碼,將 transparent 與 currentColor 排除於不透明計數之外,並驗證列數、鍵的唯一性、格式,以及八項外部對應。外部檢查涵蓋端點、別名、混合通道、rebeccapurple,以及首尾的字母順序項目 — aliceblue 與 yellowgreen — 因此缺漏的列、拼錯的識別碼,或錯置的通道,皆會在維護階段而非印刷階段被發現。由於色表完全在瀏覽器中執行,不會將搜尋或複製的值送往伺服器,因此不論離線或線上使用,皆可同等信賴。
外部參考資料佐證了底層數字:W3C CSS Color 4 named colors 規範發佈了權威清單,而 MDN named-color reference 文件化了瀏覽器支援情況。因此,任何以此資料集組裝的 CMYK 色表範例,皆錨定於公開標準,而不是廠商的偏好。當你從色表複製十六進制並進行轉換時,實際上只是串接兩個確定性的查詢:由色表列查到十六進制,再由十六進制查到 CMYK 百分比。十六進制階段由規範鎖定;CMYK 階段則依設定檔而異 — 而明白哪個階段掌管哪個數字,正是色表將工作流程一分為二的全部原因。
延伸閱讀:CMYK to RGB for Beginners: A Plain-English Walkthrough。
延伸閱讀:Color Palette Generator Examples: 6 Schemes From One Base。