網路上標準化的色彩參考資料就是 148 個不透明 CSS 命名顏色關鍵字的集合,每一個都對應一個固定的 sRGB 數值,這正是為什麼專為網頁設計的 CMYK 色表幾乎總是給你錯誤的數字。螢幕透過發出紅、綠、藍光來產生色彩,因此標準化的網頁參考就是 CSS Color 4 所定義的 148 個不透明命名顏色關鍵字,每一個都對應一個固定的六位數 HEX 數值以及 sRGB 色彩空間中的一組十進位 RGB 三元組。CMYK 適用於紙上的油墨,減法混色決定了印表機能重現的色彩,其百分比無法乾淨地對應到瀏覽器所渲染的加法色通道。設計師與開發者在為螢幕製作內容時搜尋 CMYK 色表,通常想要的是以下三種東西之一:一份能精確對應 HEX 數值的命名色彩速查表、一種確認現有樣式表識別碼的方式,或是一個可以貼到 CSS 中的穩定參考代碼。HTML Color Names Chart 正是為這三項工作而打造,它完全不涉及 CMYK 數學運算,因此所顯示的數字就是瀏覽器實際會渲染出來的結果。

cmyk color chart for web design
cmyk color chart for web design

為什麼 CMYK 是螢幕專案的錯誤參考

CMYK 是一個四通道的減法色彩模型(青色、洋紅、黃色、黑色),用於平版印刷、數位印刷以及其他基於油墨的複製。它描述的是印表機在實體基材上鋪設的各種油墨量,因此其百分比數值決定的是光線如何被吸收,而不是像素應該發亮多少。

另一方面,瀏覽器使用的是加法色彩:每個像素以不同強度混合紅、綠、藍光。CSS 透過 sRGB 色彩空間將此形式化,sRGB 是每一個未明確選擇其他色彩空間的 CSS 色彩值的預設空間。像 tomato 或 rebeccapurple 這樣的命名顏色關鍵字,只不過是 W3C CSS Color 4 規範所定義之固定 sRGB 三元組的一個友善別名。

這個差異正是 CMYK 色表會誤導網頁設計師的全部原因。兩個問題立刻浮現:

  • CMYK 百分比無法無損地轉換為 HEX 數值。同樣的油墨混合在銅版紙和無塗佈紙上可能呈現不同效果,而來源色彩描述檔至關重要。任何「CMYK 轉 RGB」工具所產生的都只是一個近似的螢幕預覽,而不是規範性的對應關係。
  • CMYK 沒有標準化「命名色彩」的概念。並不像 CSS Color 4 定義命名色彩那樣,並不存在一份通用的 CMYK 色票字典,這意味著你在網路上找到的任何 CMYK 色表都是某人的自訂參考,而非一項規範。

當你搜尋網頁設計用的 CMYK 色表時,你真正想要的結果是一份使用瀏覽器語言的參考:sRGB、HEX、RGB 三元組以及 CSS 關鍵字。若想更深入了解 CMYK 預覽究竟是如何顯示在螢幕上的,CMYK to RGB 螢幕預覽指南詳細說明了轉換上的各種限制。

HTML Color Names Chart 實際上包含什麼

HTML Color Names Chart 是一份單頁的參考表,圍繞著 CSS Color 4 所標準化的 148 個不透明命名顏色關鍵字所建構。表中的每一列顯示四項內容:

  • CSS 關鍵字,例如 tomato 或 steelblue。
  • 小寫的六位數 HEX 數值,例如 #ff6347。
  • 十進位的 RGB 三元組,例如 rgb(255, 99, 71)。
  • 一個已渲染的色塊,讓你一眼就能預覽該色彩。

每一個對應關係都直接來自 W3C 規範。在名稱與你看到的數值之間,沒有四捨五入、沒有色彩空間轉換,也沒有任何「感知調整」。如果規範說 tomato 是 #ff6347,那麼色表就會顯示 tomato 是 #ff6347。

有幾項細節值得一開始就了解:

  • 標準化的別名會以分開的列呈現。Aqua 和 cyan 兩者都會列出,且兩者都指向 #00ffff。Fuchsia 和 magenta 兩者都會列出,且兩者都指向 #ff00ff。美式與英式灰色拼法(gray 與 grey、dimgray 與 dimgrey 等更多組合)作為有效的識別碼並存。
  • Transparent 和 currentColor 被刻意排除在 148 列的計數之外。Transparent 是一個帶有 alpha 通道的關鍵字,並非不透明的命名色票;而 currentColor 則解析為該元素已運算的 color 屬性目前的值。兩者都沒有適用於不透明參考的固定獨立 HEX 數值。
  • 全部 148 個數值都在 sRGB 色彩空間中解析。這些名稱是歷史性的識別碼,既不構成感知上均勻的調色盤,也不是科學分類法、無障礙評等,更不保證任何特定顯示器能重現實體顏料。有些相鄰的名稱看起來驚人地相似,也有些名稱並未一致地描述相對亮度。

這個色表完全在瀏覽器中執行。搜尋與複製的數值絕不會離開你的裝置,這個資料表也不會為了取得結果而呼叫伺服器。

面向 CMYK 色表 HTML Color Names Chart
色彩模型 減法,紙上的油墨 加法,螢幕上的 sRGB 光線
通道 四個 (C, M, Y, K) 百分比 三個 (R, G, B) 0-255 加上六位數 HEX 數值
標準化 取決於色彩描述檔,沒有通用的命名列表 由 CSS Color 4 鎖定的 148 個關鍵字
轉換為 HEX 近似,對色彩描述檔敏感 在規範範圍內無損
適用範圍 印刷生產、包裝、大幅輸出 HTML、CSS、SVG、canvas 以及任何網頁渲染

三個步驟查詢任何 CSS 色彩名稱

這個色表剛好只有三個控制項,一旦了解各自的功能,操作流程非常快速。

  1. 在表格頂端的篩選輸入框中輸入 CSS 色彩名稱的一部分、精確的 #RRGGBB 數值,或一組完整的 rgb(...) 字串。關鍵字搜尋不區分大小寫並符合名稱片段,因此輸入 rebe 會帶出 rebeccapurple,輸入 lime 會帶出 lime 與 limegreen 等幾個相近項,輸入 #663399 則會以精確的 HEX 對應帶出 rebeccapurple。以「#」開頭的搜尋會被視為精確的 HEX 查詢,而一組完整的 rgb(...) 字串同樣以精確比對處理,因此一串簡短的數字片段不會意外命中不相關的通道數值。
  2. 檢視符合的列。每一個保留下來的列都會顯示標準化的關鍵字、已渲染的色塊、小寫的 #RRGGBB 數值,以及十進位的 rgb(r, g, b) 數值。如果你輸入的是部分關鍵字且有多列符合,請捲動瀏覽並挑選你原本想要的那一列;這個色表不會合併別名,也不會虛構模糊的同義詞,並且在沒有符合項目時不會顯示替代項。
  3. 點選你想要的那一列中的 HEX 數值,瀏覽器就會將那串精確的 #RRGGBB 字串寫入你的剪貼簿。可見的關鍵字、HEX 與 RGB 文字在剪貼簿權限被拒時仍然可以選取,因此你也能手動選取並複製。複製的數值周圍不會加入隱藏的格式、多餘的 CSS 宣告,或任何大小寫的變更。

當你想要回到完整的資料表時,只要清除篩選輸入框。全部 148 列就會依 ASCII 字母順序重新顯示。當查無符合項目時會顯示無結果訊息,而不是以一個相近的顏色替代,因此空白結果確實就代表沒有符合。

別名與排除關鍵字說明

這個色表處理別名的方式與大多數的選色器不同,在你假設某個項目是重複之前,值得先了解其做法。

CSS 關鍵字 標準化 HEX 為何兩者都出現
aqua #00ffff 有效的 CSS 識別碼
cyan #00ffff 有效的 CSS 識別碼,替代拼法
fuchsia #ff00ff 有效的 CSS 識別碼
magenta #ff00ff 有效的 CSS 識別碼,替代拼法

這些配對並非偶然的重複。每種拼法本身就是一項有效的 CSS 識別碼,而且實際的程式碼中也會使用到兩種。將它們視為分開的列,讓你能針對在舊式樣式表中看到的精確拼法進行搜尋、確認共用的 HEX 數值,並挑選符合自己命名慣例的形式。

同樣的情況也適用於美式與英式灰色的拼法:dimgray 與 dimgrey、darkgray 與 darkgrey、gray 與 grey、lightgray 與 lightgrey、slategrey 與 slategray 全都是分開的有效識別碼,並都會出現在這個色表中。它們彼此之間不會合併,每一個的對應關係都由規範所固定。

148 的計數排除了兩個初學者有時會預期找到的關鍵字:

  • transparent。這是一個帶有 alpha 通道的關鍵字,並非不透明的命名色票。它代表透明的黑色,將其納入不透明參考會暗示它具有固定的 HEX 數值,但實際上並沒有。
  • currentColor。這個關鍵字永遠解析為該元素已運算的 color 屬性目前的值。它無法被指派一個獨立的 HEX 數值,因為它取決於上下文。

將這兩者保留在不透明資料表之外,可避免產生誤導性的數值對應,也讓 148 列的不變性保持誠實。

這個色表能解決哪些真實的網頁設計問題

這個色表在日常網頁工作中最常見的五種具體情境下最為實用。

  • 翻譯舊式樣式表。如果你繼承了一份充滿命名色彩的樣式表,例如 mediumseagreen、papayawhip 或 moccasin,這個色表能在你決定保留或替換為 HEX 代碼之前,確認每個名稱背後精確的 sRGB 數值。
  • 為原型挑選一個可讀性高的關鍵字。希望程式碼保持親和力的設計師可以挑選一個命名色彩,從色表中複製 HEX 數值,並在 CSS 中以關鍵字來保持清晰,同時為工具記錄對應的 HEX 數值。
  • 確認名稱背後的精確數值。有些名稱看起來似乎描述了與實際不同的亮度或色相。這個色表讓你在確定色彩選擇之前,驗證精確的對應關係。
  • 尋找別名。當你想知道 aqua 和 cyan 是否真的是同一個顏色、dimgrey 與 dimgray 是否可以互換、或 rebeccapurple 是否具有獨特的數值時,這個色表能在同一列中顯示答案。
  • 將穩定的色彩代碼複製到 CSS 中。由於每一列的 HEX 數值都由規範所鎖定,你可以使用這個色表將一個穩定且可複製的代碼放入樣式表,無須擔心會產生偏移。

如果你其實正在準備印刷用的作品,這個色表並不會提供 CMYK 百分比。針對這種情況,請使用專門的轉換工具,例如 RGB to CMYK Converter,並以印表機的色彩描述檔來驗證結果。

What the Chart Will Not Do for You

A reference table is only honest if it also lists what it does not cover. The HTML Color Names Chart is deliberately narrow, and several adjacent tasks deserve a separate tool.

  • Contrast. Accessibility depends on the foreground-background pair, the text size, the text weight, and the applicable WCAG guidance. A color name alone is not enough. For that decision, use a dedicated Color Contrast Checker that compares two specific colors against WCAG AA and AAA rules.
  • Palette generation. The chart will not give you complementary, analogous, triadic, or split-complementary relationships for a base color. Use a palette-focused tool for palette work.
  • Gradients. The chart lists opaque named colors only and does not produce CSS linear-gradient or radial-gradient declarations. A gradient-specific tool is the right place for that output.
  • Image sampling. The chart is a fixed reference of 148 historical identifiers. It cannot average the pixels of a photo, pick a brand color from a screenshot, or find the nearest name to an arbitrary HEX.
  • Web-safe snapping. It does not snap colors to the historical 216-color web-safe cube. If you need that behavior, a web-safe chart tool is the correct choice.
  • CMYK conversion for print. CMYK percentages are out of scope; for approximate screen previews of print colors, use a focused CMYK preview tool instead.

Each of those tasks shares the topic of color but answers a different question. Treating the reference chart as a one-stop generator will lead to the wrong output, and the chart is intentionally not built to be one.

For a deeper look, see RGB CMYK Converter: The Exact Formula and Limits.