出現在樣式表、設計稿或教學文章中的顏色名稱,幾乎總是指向 CSS Color 4 所標準化的 148 個不透明關鍵詞之一。HTML 顏色名稱對照表是這些關鍵詞的瀏覽器端參考:每一列都將 CSS 識別碼與其精確的小寫 #RRGGBB 值、十進位 rgb(r, g, b) 三元組,以及一個渲染色塊配對,讓設計師可以確認名稱背後的數字、複製穩定的色彩標記,或在不離開頁面的情況下讀取別名。由於該對照表完全在瀏覽器中執行,從不將搜尋或複製的值傳送到伺服器,因此顏色查詢會在本地端機器上私下進行。資料集已鎖定為規格不變量——148 列、148 個唯一關鍵詞鍵、每個值六個小寫十六進位數字,以及獨立的別名列——這意味著每個對應都精確到每一個數字,且絕不會被該對照表本身悄悄更改。

cmyk color chart from image
HTML 顏色名稱對照表:148 個 CSS 關鍵詞參考

此對照表包含什麼內容

HTML 顏色名稱對照表嵌入了 148 個不透明的 CSS Color 4 命名顏色關鍵詞及其精確的 sRGB 對應。每列包含一個 CSS 關鍵詞、一個小寫 #RRGGBB 值、一個十進位 rgb(...) 值,以及一個渲染色塊。該對照表刻意將 transparent 與 currentColor 排除在其 148 列的計數之外:transparent 是一個特殊的承載 alpha 的關鍵詞,代表透明黑色而非不透明的命名色塊,而 currentColor 則取決於使用它的元素之計算後的 color 屬性,因此兩者都沒有固定的獨立 HEX 值。將這些關鍵詞保留在不透明表格之外,能防止工程師誤將其視為標準規範,進而避免在該列中出現誤導性的數字對應。

所有 148 個列出的顏色都在 sRGB 色彩空間中解析。這種一致性很重要:相同的關鍵詞在每個現代瀏覽器和每個現代作業系統中都會回傳相同的六位數 HEX,因此從對照表複製標記的設計師可以放心地將其複製到其他地方,並獲得完全相同的重現效果。這些名稱是歷史性的識別碼,而非視覺均勫的調色盤、科學分類法、可及性評等,或對螢幕重現實體顏料的保證。一些相鄰的名稱在實務上看起來驚人地相似(例如 lightseagreen 接近 teal),而某些名稱也未一致地描述相對亮度(darkkhaki 比 darkgray 淺),但該對照表並不做出任何視覺上的聲明;它僅列出該規範所定義的精確對應。

三種篩選模式以找到正確的列

篩選器接受三種輸入類型,並套用符合該類型的比對規則。關鍵詞比對不區分大小寫,並比對名稱片段,因此輸入 "dark"、"gold" 或 "gray" 會回傳所有包含該片段的標準化關鍵詞,且 "Gold" 與 "gold" 會回傳相同的列。HEX 比對會在搜尋以 # 開頭時啟動,且僅回傳小寫六位數十六進位值等於輸入的列,這能防止意外的局部比對導致色塊標示錯誤。RGB 比對會在輸入為完整括號內的 rgb(...) 字串時啟動,且解析器要求完整的字串,因此像 "0, 255" 這樣的簡短數字片段無法意外比對到另一列中不相關的通道值。

每種模式都保留規格表的順序,在此實作中即依關鍵詞的字母順序(ASCII 順序)。篩選永遠不會更改對應、合併別名、發明模糊同義詞,或將色彩轉換到另一個色彩空間;它僅縮小可見的列。當篩選器被清除時,所有 148 列會依字母順序回傳。若沒有任何列符合,對照表會顯示「無符合」訊息,而非代入一個相近的顏色,這能防止在參考查詢過程中發生靜默的誤判。

標準化別名及其作為獨立列存在的原因

部分 CSS 命名顏色是其他顏色的刻意別名。Aqua 與 cyan 都對應到 #00ffff;fuchsia 與 magenta 都對應到 #ff00ff。數個名稱也存在美式與英式灰色拼法共存的情況。該對照表將這些別名保留為獨立列,而非將其合併,因為每種拼法都是有效的 CSS 識別碼。資料集不變量要求 148 個唯一關鍵詞鍵,而別名在不合併值的情況下計入此總。任何別名背後的參考值都與其配對相同,但將它們視為不同的列,意謂著閱讀使用 aqua 的舊式樣式表的設計師,可以無需先轉換為 cyan 就能確認該特定關鍵詞背後的值;而閱讀使用 grey 的樣式表的設計師,則無需先轉換為 gray 就能比對英式關鍵詞。

別名配對共用 HEX共用 RGB兩列同時存在的原因
aqua / cyan#00ffffrgb(0, 255, 255)兩種拼法都是有效的 CSS 識別碼;舊式樣式表可能使用其中任一種。
fuchsia / magenta#ff00ffrgb(255, 0, 255)兩種拼法都是有效的 CSS 識別碼;設計稿與程式碼可能使用其中任一種。
gray / grey(及其變體)依名稱而異依名稱而異美式與英式拼法共存;每種皆為不同的關鍵詞鍵。

複製 HEX 而不遺失格式

每列都將其小寫 #RRGGBB 值公開為複製目標。點擊 HEX 值會請求寫入剪貼簿,且僅在瀏覽器解析該請求後才回報成功。若剪貼簿權限被拒絕,可見的關鍵詞、HEX 與 RGB 文字仍可供手動選取複製。該對照表不會在複製的輸出中嵌入隱藏格式、不會修改大小寫,也不會將值包裝在 CSS 宣告中;使用者點擊的內容與剪貼簿收到的內容完全相同。這種簡潔性在設計師將標記放入樣式表,或將值傳遞給期望取得原始六位數十六進位的下游工具時至關重要。

此對照表能妥善解決的常見任務

HTML 顏色名稱對照表是一個固定、以名稱為優先的參考,而這種定位正對應於它能可靠執行的一小組任務。翻譯舊式樣式表便是其中之一:審查舊有程式碼的設計師可以將關鍵詞貼入篩選器,並確認瀏覽器將解析的精確數字,而無需依賴記憶或過時的速查表。為原型挑選一個易讀的關鍵詞是另一項:撰寫快速模型的開發人員可以瀏覽字母順序的清單,挑選一個能傳達意圖的名稱(tomato、lime、slategray),而無需承諾特定的十六進位值。確認已知名稱背後的值、當程式碼庫缺少某種拼法時尋找別名,以及將穩定的色彩標記複製到新樣式表,則補足了日常情境。由於資料集不變量已鎖定——148 列、148 個唯一關鍵詞鍵、每個值六個小寫十六進位數字——從對照表取得的每個值,都能在每個支援該規範的瀏覽器上重現。

命名顏色可用於任何接受命名顏色識別碼的 CSS 顏色值,惟須遵守屬性語法與瀏覽器支援,這也是為什麼該對照表在讀取或維護現有樣式表時同樣實用:工程師看到的列,就是瀏覽器將解析的值,兩者之間沒有任何隱藏的轉換。

何時應改用其他工具作為下一步

該對照表是參考工具,而非產生器、取樣器或評估器。對於超出查詢已知名稱或複製標記的任務,合適的工具通常是專門的工具。影像取樣屬於影像顏色挑選器或影像平均顏色尋找器,因為該對照表不會從上傳的檔案讀取像素資料。圍繞選定基礎色的調色盤產生,屬於顏色調色盤產生器,它會回傳互補、類似與三等分的配色。對比評估屬於專門的對比檢查器,因為僅憑顏色名稱並不足夠:對比取決於前景與背景的配對、文字大小與粗細,以及適用的指引,而這些變數超出了名稱對照表所能判斷的範圍。轉換為 CMYK 或其他墨水模型的印刷轉換,屬於色彩空間轉換器,它會接收複製的 HEX 並產生墨水百分比,因為該對照表定義的是 sRGB 值,而非墨水覆蓋率。將名稱對照表視為固定參考以外的任何工具,是在混合工作流程中最常見的混淆來源;將這些任務外移,能讓每個工具專注於其真正擅長的事。

任務最佳工具為何不適用名稱對照表
查詢 CSS 關鍵詞、HEX 或 RGBHTML 顏色名稱對照表這是對照表的核心用途。
從上傳的影像中取樣顏色影像顏色挑選器 / 平均顏色尋找器該對照表不會從檔案讀取像素資料。
圍繞基礎色建立調色盤顏色調色盤產生器該對照表是參考工具,而非產生器。
評估兩個顏色之間的 WCAG 對比顏色對比檢查器僅憑名稱無法代表前景與背景的配對。
將 sRGB 轉換為 CMYK 或其他墨水空間色彩空間轉換器該對照表定義的是 sRGB 值,而非墨水覆蓋率。

資料集如何維持精確

維護像這樣的參考工具,代表在更新時必須防範遺漏的列、拼錯的識別碼,以及通道順序錯置。該對照表會驗證列數(148)、鍵的唯一性(148 個不同的關鍵詞字串)、格式(每個值六個小寫十六進位數字),以及一組涵蓋端點、別名、混合通道、rebeccapurple,以及首尾字母條目的小型外部黃金對應。這些檢查作用於資料集本身,而非使用者輸入,因此它們防範的是靜默回歸,而非使用者錯誤。由於該對照表從不發明模糊同義詞、從不將色彩轉換到其他色彩空間,也從不合併別名,因此表格背後的資料就是使用者看到的資料;規格與本對照表之間不存在轉換層。

瀏覽器端處理,無網路呼叫

所有篩選、渲染與剪貼簿處理皆在瀏覽器本地端執行。搜尋會與嵌入的資料集進行比對、色塊從同一列的 HEX 渲染、剪貼簿寫入則透過瀏覽器的權限模型進行協商。這些操作皆不會將搜尋字串或複製的值傳送到伺服器,這代表機密標記可以在不離開本地端機器的情況下被查詢與複製。對於在保密協議、內部風格指南或尚未發布的品牌標記下工作的設計團隊而言,這道隱私界線正是讓該對照表能作為日常參考而非出版品安全使用的部分原因。

欲深入了解,請參閱 隨機顏色產生器:您今天就能貼上的 CSS 程式碼

欲深入了解,請參閱 RGB 轉 CMYK 對照表:常見顏色與轉換指南