一個 HTML 顏色名稱圖表替代方案，以可搜尋的互動式參考形式建置，內含 CSS Color 4 所標準化的全部 148 個不透明 CSS 命名顏色關鍵字，每一列皆配對其全小寫六位數 HEX 值、小數 rgb(r, g, b) 元組，以及可直接複製的渲染色塊。與靜態圖片或 PDF 不同，這類圖表完全在瀏覽器中執行，支援三種篩選模式(關鍵字片段、精確的 #RRGGBB，或完整的 rgb() 字串)，並將標準化別名(如 aqua/cyan 與 fuchsia/magenta)保留為各自獨立的有效列。此資料集嚴格鎖定為正好 148 列不透明項目，你所輸入的內容不會傳送到任何伺服器，即便剪貼簿寫入被拒，所有可見文字仍可完整選取。這是開發者在螢幕擷圖、印刷色卡或 1990 年代參考表已無法對應其實際 CSS 工作方式時，所會取用的實用替代方案——無論是在轉譯舊式樣式表、追查所繼承名稱背後的標準值，或是為原型設計取得一個穩定的代號。
大多數搜尋 HTML 顏色名稱圖表替代方案的人，都已在某處試過靜態圖表並遇到相同的摩擦:冗長且無法搜尋的清單、無法乾淨複製的欄位、合併成一列的別名，或是無法從 HEX 值快速跳回對應名稱。下列指南將說明一個更好的參考工具實際能帶來什麼、可搜尋圖表如何解決上述各項痛點，以及它在實際工作流程中與其他色彩工具的搭配定位。
為何靜態 HTML 顏色名稱圖表會失去效用
靜態 HTML 顏色圖表——也就是早期網頁設計書中以一張大圖呈現的那種，或文件頁面上以固定表格形式存在的版本——在瀏覽器僅渲染一小組穩定的「網頁安全色」時尚稱堪用。CSS Color 4 大幅擴充了命名顏色清單，並標準化了數個灰色的美式與英式拼寫，連同部分瀏覽器為相容性仍保留的舊式別名。靜態圖片無法跟上這樣的範圍，當然也無法讓你從 HEX 跳回其名稱，或篩選出符合同事貼到 Slack 上的 rgb() 字串的那一列。
常見的挫折都可預期:捲動 140+ 一個關鍵字、推測圖表究竟採用「gray」的哪一種拼寫，以及太晚才發現 aqua 與 cyan 雖被 CSS 視為兩個相異識別字，卻遭合併成單一項目。現代替代方案一次解決所有這些問題——透過搜尋、透過將別名保留為獨立列，以及透過一鍵複製而無須先將值傳送至任何地方。
更好的 HTML 顏色名稱圖表應包含什麼
可搜尋的 HTML 顏色名稱圖表內建一套精確且嚴格鎖定的資料集，經得起生產環境使用。每一列包含一個 CSS 關鍵字、一個全小寫 #RRGGBB 值、一個小數 rgb(r, g, b) 元組，以及一個渲染色塊。表格正好有 148 列、148 個唯一關鍵字鍵，標準化別名保留為獨立列而非合併。表格按關鍵字的 ASCII 字母順序排列，因此搜尋結果可預期，頁面在貼到文件中時也讀起來清晰。
由於此圖表完全在瀏覽器中執行，你所輸入的內容不會傳送到任何伺服器。搜尋與複製的值皆不會傳送到任何伺服器。當你正在查詢的顏色屬於機密設計系統或未公開的品牌色票時，這一點至關重要。此圖表還處理了一個許多靜態參考經常弄錯的特殊邊角情況:它同時保留美式與英式灰色拼寫(例如 gray/grey、dimgray/dimgrey、slategray/slategrey)作為有效識別字，因為每一種拼寫都是樣式表可合法使用的有效 CSS 名稱。
如何從圖表中搜尋並複製 HEX 值
工作流程很短，且無論你是在轉譯舊式樣式表或只是為原型設計取得一個代號，操作方式都一致。
- 在圖表頂部的篩選輸入框中，輸入 CSS 顏色名稱的一部分、以 # 為前綴的精確六位數 HEX 值，或完整的 rgb() 字串。
- 檢視符合的列:每一列皆顯示標準化關鍵字、即時色塊、全小寫 HEX 值，以及小數 rgb(r, g, b) 元組。
- 點擊任一 HEX 值即可複製到剪貼簿。圖表僅在瀏覽器成功解析剪貼簿寫入後才會回報成功。
- 若剪貼簿權限被拒，請手動選取 HEX 或 RGB 文字——可見的值仍可完整選取，並以純文字形式複製。
- 清除篩選條件(刪除輸入內容或使用清除控制項)，即可依規格順序恢復全部 148 列不透明項目。
比對規則刻意訂得嚴格，以免任何雜散片段錯誤命中不相干的列。關鍵字搜尋不區分大小寫，並比對名稱片段(輸入 "rebecc" 仍會帶出 rebeccapurple)。以 # 開頭的查詢使用精確六位數 HEX 比對——像 #FF00 這類部分輸入不會回傳結果，因為精確 HEX 比對要求完整的六位數字串。完整的 rgb(...) 搜尋則對完整字串進行精確比對，因此短短的數字片段無法意外命中另一列中不相關的通道值。當毫無符合結果時，圖表會顯示「無符合」訊息，而不是以視覺上相近的色彩替代，因為猜測會使此參考作為維護工具時失去可信度。
篩選模式比較
此圖表本質上是三種查詢合一的工具，選對模式可避免查詢時發生靜默漏失。
| 篩選輸入 | 範例 | 比對行為 |
|---|---|---|
| 名稱片段(無前綴) | rebecc | 對 CSS 關鍵字進行不區分大小寫的子字串比對;回傳 rebeccapurple。 |
| 精確 HEX | #00ffff | 精確六位數小寫比對;同時帶出 aqua 與 cyan，因為兩者皆為對應該值的有效識別字。 |
| 完整 rgb() 字串 | rgb(255, 0, 0) | 對 rgb(r, g, b) 欄位進行精確全字串比對;不做模糊數字包含式比對。 |
| 空白篩選 | (空白) | 依 ASCII 字母順序顯示全部 148 列不透明項目。 |
當你正在稽核來自不同機器的程式碼時，這種區隔至關重要:以 HEX 為前綴的搜尋行為類似精確等值檢查，而名稱搜尋則類似模糊子字串比對。誤用模式是產生「某個顏色不存在於圖表中」的假象最常見的原因。
別名、排除的關鍵字，以及 148 所代表的意義
兩個關鍵字刻意對應到同一個 HEX。Aqua 與 cyan 都解析為 #00ffff,fuchsia 與 magenta 則都解析為 #ff00ff。CSS Color 4 基於歷史與相容性原因將兩種拼寫皆保留為有效識別字，圖表也將其保留為獨立列。若你正在閱讀使用「aqua」的舊式樣式表，或稽核使用「cyan」的樣式表，皆會看到預期中的那一列。同樣的邏輯也適用於前述的美式/英式灰色配對拼寫——它們並非偶然的重複，每一種拼寫都是值得獨立成列的合法 CSS 識別字。
兩個廣為人知的 CSS 關鍵字刻意未列入 148 之中:transparent 與 currentColor。Transparent 是代表透明黑色的特殊含 alpha 通道關鍵字;它並非具有固定數值對應的不透明色塊，因此將其列入「不透明命名顏色」表格會暗示該關鍵字並不具備的精確度。currentColor 則取決於被設定樣式之元素的計算後 color 屬性，因此它同樣沒有固定的獨立 HEX。圖表的外部黃金案例涵蓋了這些排除項，以便「148 列不透明項目」這個列不變條件在維護期間仍可稽核。
所有列出的顏色皆位於 sRGB 色彩空間。這些名稱屬於歷史識別字——它們並非視覺上均勻的色票、科學分類法、無障礙評等，也無法保證特定顯示器能重現某種實體顏料。sRGB 中兩個相鄰的名稱可能看起來出奇地相似，這些名稱也並未一致地描述相對明度。請將此圖表視為參考工具，而非設計系統。
圖表能發揮效益的工作流程
轉譯舊式樣式表是取用此圖表最常見的理由。在篩選框中輸入像「darkseagreen」這類關鍵字以確認其精確 HEX，或貼上同事的 #RRGGBB 代號以找出其背後可讀的關鍵字名稱。當你正在撰寫原型並希望使用一個可讀的命名顏色識別字而非不透明的十六進位字面值時，可掃描字母排序的清單，找出能描述其用途的名稱。當你正在確認從 CSS 框架繼承而來之名稱背後的值時，可直接搜尋該關鍵字以查看其標準對應。
有兩項相鄰工作很容易在不經意間做錯，而圖表能協助你避開陷阱。首先，無障礙檢查絕不應僅依賴顏色名稱;對比度取決於前景與背景的配對、文字大小與粗細，WCAG 標準對此有明確規定。為此，請改用至個別的色彩對比度檢查工具，根據 WCAG AA 與 AAA 評估實際的配對結果。其次，產生色票並非此圖表的職責——為此，色彩調色盤產生器能從單一基礎色在數秒內建構互補、類似或三等分的配色關係。將參考圖表當作產生器使用，只會得到 148 個彼此毫無關聯的一次性代號。
建構於其上之前值得了解的限制
此圖表不會自創模糊同義詞、合併別名、在不同色彩空間之間轉換，也不會在篩選時改變對應關係。你所見的每一列就是標準化的 CSS Color 4 值，僅此而已。資料集由不變條件鎖定:148 列、不變 148 個唯一關鍵字鍵、每個 HEX 儲存格六位全小寫十六進位數字，以及獨立的別名列。若未來 CSS Color 修訂版本變更了對應關係，這些不變條件能讓任何偏差在維護期間一覽無遺。
若需進行決定性的外部交叉驗證，W3C CSS Color 4 命名顏色表格列出了與本圖表所依據相同的關鍵字集合與 sRGB 三元組。由於你所輸入的內容不會傳送到任何伺服器，此圖表在受限或共用環境中行為可預測，不會洩漏搜尋字串。
如需深入了解，請參閱如何使用原生 HTML 產生 CSS 切換開關。
如需深入了解，請參閱線上使用 HTML 顏色名稱圖表安全嗎?以下是原因。