HTML 色彩名稱圖表是一份可搜尋的參考資料，收錄 CSS 色彩規格所標準化的全部 148 個不透明 CSS 具名色彩關鍵字，每一行將一個識別字與精確的小寫 #RRGGBB 值，以及 sRGB 色彩空間中的十進位 rgb(...) 三元組配對。它回答的是一個非常明確的任務：當你手上有色彩名稱、六位數 HEX，或完整的 rgb(...) 字串時，可以確認其背後的標準化數值，並複製該 HEX 以便在 CSS 中重複使用。本圖表並非 CMYK 計算機，也不評比無障礙程度。列印用的 CMYK 百分比，以及前景與背景文字配對的 WCAG 對比值，是各自需要獨立決策的工作，需要由專屬工具處理，而這些工具的輸入，是你先從本參考資料取得的精確 sRGB 值。將本圖表視為列印或對比工作流程的起點，而非一站式的最終答案，才是它真正有用的地方。
HTML 色彩名稱圖表能提供什麼
本圖表內嵌了完整的 CSS Color 4 具名色彩關鍵字清單及其標準化的 sRGB 對應，這些定義來自 W3C CSS Color 4 規格，並反映在 MDN 具名色彩參考 中。每一行包含四項資訊：CSS 關鍵字本身、小寫的六位數 HEX 值、十進位的 rgb(r, g, b) 三元組，以及一個可供一眼查看色彩的色塊。總共有 148 列，圖表將標準化的別名視為各自獨立的有效識別字保留，而非合併它們。Aqua 與 cyan 皆對應 #00ffff；fuchsia 與 magenta 皆對應 #ff00ff。美國與英式拼法的 gray —— gray、slategray、lightgray、dimgray，以及 grey、slategrey、lightgrey、dimgrey —— 以不同的列並存。每一種拼法都是有效的 CSS 識別字，這在讀取或維護使用某一種拼法的舊樣式表，而你自己的樣式表使用另一種拼法時，格外重要。
由於圖表完全在瀏覽器中執行，搜尋與剪貼簿操作從不離開你的機器，你可以在不需要網路往返的情況下複製數值。清單受到不變條件的約束 —— 148 列、148 個唯一的關鍵字鍵、每個值皆為六位小寫十六進位數字，以及獨立的別名列 —— 因此圖表始終是忠實的參考資料，而非產生器。當你想驗證 rebeccapurple 這個名稱究竟是什麼，或確認你在教學文章中看到的 HEX 時，這就是為該查詢所打造的工具。
為何 CMYK 與無障礙對比是各自獨立的工作
具名色彩圖表圍繞著 sRGB 螢幕數值建構，但兩個常見的延伸問題 —— 此色彩在列印用的 CMYK 中看起來如何，以及是否符合無障礙對比指引 —— 在表格中並沒有答案。CMYK 是與油墨和紙張連結的減法模型，從 sRGB HEX 進行轉換取決於目標描述檔、印刷機與基材。任何 RGB-to-CMYK 的結果因此都是近似值，而非固定的對應，這正是列印色彩決策應交給專屬的 RGB to CMYK 轉換器，而非靜態圖表的原因。
無障礙對比則運作於完全不同的軸線。單一色彩名稱本身無法通過或未通過 WCAG；對比值是根據特定前景色與特定背景色之間計算得出，而門檻會隨著文字大小與粗細而改變。HTML 色彩名稱圖表列出的是標準化的 sRGB 數值；它無法告訴你 darkseagreen 配 ivory 在 16px 內文時是否清晰易讀。請使用圖表鎖定精確的 HEX 值，再將該 HEX 餵給獨立的 對比檢查工具，由它依據 WCAG AA 或 AAA 評估該配對。將名稱、CMYK 與對比視為同一個綜合答案，正是產生矛盾或無法使用結果的原因。
| 任務 | 合適工具 | 它會產生什麼 |
|---|---|---|
| 確認 CSS 色彩名稱背後的精確 HEX | HTML 色彩名稱圖表 | 標準化的小寫 #RRGGBB 與十進位 rgb(...) |
| 將 sRGB HEX 轉換為列印用的 CMYK | RGB to CMYK 轉換器 | 對應工作描述檔的近似 CMYK 百分比 |
| 檢查文字或背景配對的 WCAG 對比 | 色彩對比檢查工具 | 數值比率以及 AA 或 AAA 的通過與否 |
| 尋找六位數 HEX 的數位互補色 | 互補色尋找器 | 8 位元 RGB 互補色，含通道值 |
如何在圖表中查詢色彩
- 在 HTML 色彩名稱圖表 頂端的篩選器中，輸入部分 CSS 色彩名稱、精確的 #RRGGBB 值，或完整的 rgb(...) 字串。
- 檢視符合的列。每一個保留下來的列會顯示關鍵字、已渲染的色塊、小寫 HEX，以及十進位的 rgb(...) 三元組。
- 若你的搜尋以 # 開頭，圖表會切換為精確 HEX 比對，因此像 #ff8c00 這樣的值只會回傳 darkorange。
- 若你貼上完整的 rgb(...) 字串（例如 rgb(72, 209, 204)），比對同樣為精確比對，這能避免一段簡短的數字片段意外對應到不相關的通道值。
- 點擊 HEX 值即可複製到剪貼簿。圖表只會在瀏覽器成功解決剪貼簿請求後回報成功。
- 清除篩選器即可恢復全部 148 列。若沒有任何符合項目，圖表會顯示無符合訊息，而非以鄰近色彩替代。
若你的瀏覽器拒絕剪貼簿權限，關鍵字、HEX 與 RGB 文字仍可選取以供手動複製。圖表絕不會修改大小寫，也不會把值包進 CSS 宣告中，因此你所複製的內容與表格顯示完全一致。
從 HTML 色彩名稱到 CMYK 列印值
當設計師交給你一份以 CSS 關鍵字建構的樣式表，而你需要將結果送往印刷廠時，HTML 色彩名稱圖表是起點，而非終點。從圖表中取出你打算列印之關鍵字的精確 sRGB HEX。該 HEX 是一個固定的錨點 —— 圖表顯示的值，就是你螢幕上所顯示、也是轉換工具將讀取的值。
取得 HEX 後，使用專屬的螢幕轉列印轉換器將其轉換為 CMYK 百分比，該轉換器會將工作描述檔納入考量。RGB 與 CMYK 是不同的色彩模型，轉換僅為近似：像 mediumslateblue 在 #7b68ee 這樣鮮豔的 sRGB 色彩，所轉出的 CMYK 數值會依據你所選的描述檔、紙張與印刷機而有所不同。請將 CMYK 輸出視為一個起點，由印刷廠進行打樣確認，而非保證值。
在圖表中看起來相近的名稱，可能產生出乎意料地不同的 CMYK 值。#ff69b4 的 hotpink 與 #ffb6c1 的 lightpink 僅在飽和度上有所不同，但在轉換時，其青、洋紅、黃與黑百分比可能各自獨立偏移。請分別查詢每個名稱，複製其 HEX，並個別轉換該 HEX，而非假設整個色彩家族共用同一個 CMYK 配方。
在無障礙對比檢查中使用同一個色彩
HTML 色彩名稱圖表不會評分無障礙程度，但它所提供的精確 HEX 值，正是對比檢查工具給出真實答案所需要的輸入。WCAG 將對比定義為特定配對中兩個 sRGB 色彩之間的比率，並對一般文字、大型文字與非文字 UI 元件設有不同的門檻。單一色彩 —— 即便是單一關鍵字 —— 本身無法符合或未符合該標準。
若要檢查一組配對，請從圖表中挑選前景色，複製其 HEX，再挑選背景色並複製其 HEX。將兩者同時餵給對比檢查工具，由它依據 WCAG 2.x 門檻評估前景與背景的比率。檢查工具會回傳數值比率，以及你所設定之內文尺寸或大型尺寸目標的通過或未通過結果。在圖表中看起來不同的名稱，在亮度上可能相當接近，因而產生未通過 AA 的比率；而看起來相近的名稱，卻可能產生通過 AAA 的比率。唯一可靠的方法就是實際計算該配對。
若你正在為設計系統挑選色彩，請對你計畫使用的每個關鍵字，分別對其將出現的每一個背景執行這個循環。從圖表複製 HEX，貼入對比工具，記錄比率，之後才將該關鍵字鎖入樣式表。兩分鐘的查詢工作，能避免因為單一文字與背景配對未通過審查，而必須重新部署樣式表的更大麻煩。
具名色彩圖表的限制
這 148 個 CSS 關鍵字是 sRGB 色彩空間中的歷史識別字。它們既不是感知上均勻的調色盤，也不是科學分類法，更不保證顯示器能重現某種實體顏料。相鄰的名稱有時看起來出乎意料地相似，且部分名稱在相對明度上的描述並不一致。圖表也刻意將 transparent 與 currentColor 排除於 148 列的計算之外。Transparent 是代表透明黑色的特殊含 alpha 關鍵字，而 currentColor 取決於計算後的 color 屬性，因此兩者皆無固定的獨立 HEX。此一排除讓表格誠實地呈現每一列的本質：唯一一筆標準化的不透明對應，除此之外別無其他。
篩選功能絕不會改變對應、合併別名、捏造模糊同義詞，或將色彩轉換至其他色彩空間。清除篩選器即可恢復全部 148 列；若無符合項目，則顯示無符合訊息，而非以鄰近色彩替代。因此，圖表在轉換、驗證與複製工作上是可靠的，但在產生或無障礙評分方面，則刻意保持範圍的狹窄。
延伸閱讀：在 InDesign 中將 RGB 轉換為 CMYK：實務工作流程。
延伸閱讀：色彩差異計算圖表：解讀 Delta E 2000。