HTML 顏色名稱對照表是一份可搜尋的清單，將全部 148 個不透明的 CSS 具名顏色及其精確的標準化 HEX 與 RGB 數值集中於同一處。對照表的每一列顯示一個 CSS 關鍵字、一個全小寫的六位數 HEX 值、一個十進位 rgb() 三元組，以及一個實際渲染的色塊，讓你可以在閱讀數字的同時以視覺方式確認顏色。這份清單直接取自 CSS Color 4 named colors 規範，並透過不變式檢查固定為 148 列，這代表沒有任何關鍵字遺漏、意外重複或拼打錯誤。你可以透過三種方式搜尋——以 CSS 關鍵字的片段、以精確的 #RRGGBB 值，或以完整的 rgb() 字串——而結果列會保留規範所定義的 ASCII 字母順序。由於對照表完全在你的瀏覽器中執行，你所輸入的關鍵字與複製的值都不會被送往任何伺服器。
這份 148 列表格中包含什麼
對照表中的每一列都由四個欄位構成：一個 CSS 關鍵字、一個全小寫的六位數 #RRGGBB 值、一個十進位 rgb(r, g, b) 三元組，以及一個可在瀏覽器中看到的實際渲染色塊。關鍵字欄位保存標準中所寫的正規 CSS 識別符；HEX 欄位保存全小寫的精確對應；RGB 欄位以逐通道的十進位形式保存同一個顏色；而色塊則可在螢幕上確認視覺結果。這份資料集透過四項不變式加以鎖定：剛好 148 列、148 個不重複的關鍵字鍵、每個 HEX 值都是六位小寫十六進位數字，以及每個標準化別名各自獨立成列。
這些不變式可以防範參考對照表最常見的錯誤：CSS Color 4 中的條目遺漏、隨著時間被拼錯的識別字、表格重新產生時通道順序被調換，以及可能掩蓋有效替代項目的意外合併。外部的黃金個案——第一個與最後一個依字母排序的條目、別名端點、混合通道的列，以及 CSS Color 4 中新增的 rebeccapurple 條目——也會在每次載入時一併檢查。所有列出的顏色皆在 sRGB 色彩空間中解析，這與 CSS 用於具名數值的色彩空間相同。
如何搜尋並複製顏色值
- 在上方表格的篩選框中輸入 CSS 顏色名稱的一部分、精確的 #RRGGBB 值，或完整的 rgb(...) 字串。
- 檢視結果列中顯示的符合標準化關鍵字、實際渲染的色塊，以及 HEX 與 RGB 的對應數值。
- 點選結果列中的任何 HEX 值以要求寫入剪貼簿；對照表僅在瀏覽器確認複製成功後才會回報成功。
- 若剪貼簿權限被拒絕，請手動選取可見的關鍵字、HEX 或 RGB 文字——對照表絕不會更改大小寫、新增 CSS 宣告，或複製隱藏的格式。
- 清除篩選條件即可依 ASCII 字母順序恢復全部 148 個不透明具名顏色的完整清單。
簡短的數字片段不會對應到不相關的通道值，因為完整的 rgb(...) 搜尋使用的是完全相符比對，而非模糊解析。篩選內容中前置的 # 會將對照表切換為該次查詢的精確 HEX 比對，這能避免在較長的 HEX 值中意外產生子字串相符。若沒有任何列符合，對照表會顯示無相符的訊息，而不會以「足夠接近」的鄰近顏色來取代。
三種搜尋輸入類型的行為方式
| 篩選輸入 | 比對行為 | 範例 |
|---|---|---|
| 關鍵字片段 | 在全部 148 個關鍵字中進行不區分大小寫的子字串比對 | 輸入 gold 會回傳 goldenrod、lightgoldenrodyellow、palegoldenrod 以及 gold |
| 精確 #RRGGBB | 當查詢以 # 開頭時，六位數 HEX 必須完全符合儲存的值 | 輸入 #00ffff 會回傳共用該對應的 cyan 與 aqua 兩列 |
| 完整 rgb(...) | 在完整的 rgb(r, g, b) 運算式上進行完全相符比對 | 輸入 rgb(255, 215, 0) 會回傳 gold 那一列 |
篩選絕不會更改對應、合併別名、自行產生模糊同義詞，或將一個值轉換為另一個色彩空間。對照表永遠只回傳規範所定義的同一組關鍵字、HEX 與 RGB 配對——篩選唯一控制的，是同一時間可見的列之子集。
別名、灰色拼法與值重複的列
148 列的計數將標準化別名視為各自獨立且有效的條目，而非將它們摺疊為單一正規列。Aqua 與 cyan 都對應到 #00ffff；fuchsia 與 magenta 都對應到 #ff00ff。美國與英式灰色的拼法在數個名稱上也並存，因此針對特定地區所撰寫的樣式表可以直接查詢而無需翻譯。這些並非意外的重複紀錄——每個拼法都是有效的 CSS 識別字，在閱讀或維護既有樣式表時將它們保留下來是很實用的。
| 關鍵字 A | 關鍵字 B | 共用的對應 |
|---|---|---|
| aqua | cyan | #00ffff |
| fuchsia | magenta | #ff00ff |
| gray | grey | 由 CSS Color 4 所定義、每個關鍵字相同的 HEX 值 |
對照表中某些相鄰的名稱可能看起來意外地相似，也有一些名稱並未對相對亮度做出一致的描述，因此每列旁的色塊作為快速的視覺檢查相當實用，而不是只依賴關鍵字。這些名稱是歷史性的識別字，並非感知上均勻的調色盤、科學分類法或無障礙評等，也無法保證顯示器能重現某種實體顏料。
對照表刻意排除的內容
對照表排除了兩個存在於 CSS 中、但不符合不透明具名顏色表的關鍵字：transparent 與 currentColor。Transparent 是帶有透明度的特殊關鍵字，代表透明黑，而非具有固定對應的不透明色塊。CurrentColor 則取決於使用它的元素之計算後 color 屬性，因此它沒有可獨立存活的 HEX 值。將這兩者納入 148 列的計數中會產生誤導性的數值對應，因此它們會被完全排除在表格之外。
何時該改用其他顏色工具
顏色名稱對照表是一份查詢用的參考資料，而非產生器。若要製作漸層，請使用專門的漸層工具；若要圍繞一個基底色挑選調色盤，請使用調色盤產生器；若要取樣影像中的平均顏色，請使用影像平均工具；而針對歷史性的 216 色網頁安全色，請使用網頁安全色立方體對照表。這些都不是本對照表的設計目的，因此不應透過複製數值再手動重建的方式，把它當作產生器來使用。
在無障礙的決策上，光靠顏色名稱也是不夠的。對比取決於前景與背景的配對、文字大小與粗細，以及適用的指引——而非其中一個值剛好有個親切的名字。請使用專門的對比檢查工具，依據相關的 WCAG 等級來處理該任務。若需要漸層、調色盤產生、影像取樣或歷史性的網頁安全色，請使用對應的專門工具，而不是把這份參考對照表當作產生器。
讓對照表派上用場
這份對照表在以下三個反覆出現的工作流程中能發揮價值。第一，當你接手一份充滿 color: 與 background-color: 行的舊有樣式表時，你可以將任何名稱貼入篩選框，以確認其背後精確的 HEX 與 RGB。第二，當你在勾勒原型並希望使用易讀的關鍵字而非六位數代碼時，可以瀏覽依字母排序的清單，挑選一個能傳達意圖的名稱。第三，當你在建立設計權杖檔時，可以利用對照表把穩定的識別字複製到 CSS 中，並確信對照表回傳的值就是標準所規範的值。具名顏色識別字可以在任何接受 CSS 顏色值的地方使用——語法與瀏覽器支援細節請參閱 MDN named-color reference——而對照表提供了將猜測轉為已確認對應的驗證步驟。
若想深入了解，請參閱 RGB 轉 HEX 色階與變化：通道逐步解析。
若想深入了解，請參閱 漸層產生器調色盤靈感：從色彩配對到 CSS。