HTML 顏色名稱對照表會將人類可讀的顏色關鍵字對應至標準化的 CSS 值，而 HTML Color Names Chart 涵蓋全部 148 個不透明具名顏色關鍵字。
因此，當您需要比較顏色名稱、精確的 HEX 值或完整的 RGB 值，而不想依賴猜測色階時，這項工具就很有用。您可以使用HTML Color Names Chart 搜尋這些輸入內容、查看色票與標準化值，並在需要時複製 HEX 代碼。
主要差別在於精確查詢與顏色探索：此對照表會解析標準化名稱與數值，但不會辨識任意影像中的顏色、虛構鄰近的 CSS 名稱、產生調色盤，也不會評估無障礙程度。
這份對照表實際可讓您比較哪些內容
人們經常交替使用「HTML 顏色名稱」、「CSS 顏色名稱」與「CSS 顏色名稱對照表」。這裡採用的參考資料更為精確：它遵循 CSS Color 4 標準化的不透明具名顏色關鍵字。進行現代 CSS 工作時，請將顯示的關鍵字及其標準化對應關係視為權威組合。
- 名稱轉數值查詢：輸入 CSS 顏色名稱的一部分，即可找到相符的關鍵字、色票與精確數值。
- HEX 轉名稱查詢：輸入精確的六位數 #RRGGBB 值，即可找出其標準化關鍵字與 RGB 對應關係。
- RGB 轉名稱查詢：輸入完整的 rgb(...) 字串，即可解析現有的 CSS 值。
- 別名驗證：查看哪些不同的有效 CSS 識別字刻意共用相同的顏色值。
搜尋內容與複製的值會保留在瀏覽器中，不會傳送到伺服器。因此，此對照表是參考資料與查詢輔助工具，而非顏色產生服務。
關鍵字、HEX 與 RGB 搜尋比較
最有用的比較方式，是從您已掌握的資訊開始。每種輸入方式遵循不同的比對規則，適用於網頁專案的不同部分。
| 搜尋輸入 | 比對方式 | 最佳用途 | 要檢視的結果 |
|---|---|---|---|
| CSS 顏色名稱片段 | 不區分大小寫的片段比對 | 只知道拼寫的一部分時，用來尋找關鍵字 | 相符的關鍵字、色票、HEX 與 RGB 對應關係 |
| 精確的 #RRGGBB | 精確的六位數 HEX 比對 | 將已知的 HEX 值解析為標準化名稱 | 標準化關鍵字、色票、HEX 與 RGB 對應關係 |
| 完整的 rgb(...) | 完整字串的精確比對 | 轉換現有的 RGB 宣告 | 標準化關鍵字、色票、HEX 與 RGB 對應關係 |
如果您知道單字內容，卻不清楚其精確拼寫，請從關鍵字片段開始。如果您已取得六位數 HEX 代碼，請使用精確 HEX 搜尋。如果某個值以完整 RGB 函式的形式存在於樣式表中，請輸入整個字串，而不是試圖搜尋單一色Channel。
部分關鍵字可能產生數列相符的列，這些列會依規格表中的關鍵字，以 ASCII 字母順序排列。另外兩種方法則刻意採用精確比對。以 # 開頭的搜尋不會執行模糊比對，而不完整 RGB 搜尋中的短數字片段也不會意外比對到無關的色Channel。系統會顯示無相符結果的訊息，而不會改用鄰近顏色替代。
查詢並複製標準化對應關係
- 開啟 HTML Color Names Chart 並找到篩選器。
- 輸入 CSS 顏色名稱片段、精確的六位數 #RRGGBB 值，或完整的 rgb(...) 值。
- 檢視相符的標準化關鍵字、即時色票、小寫 HEX 值與十進位 RGB 對應關係。
- 如果關鍵字搜尋傳回多個名稱，請比較各列，而不要假設第一個結果代表最接近的視覺比對結果。
- 點擊 HEX 值即可要求複製到剪貼簿。只有在瀏覽器解析該剪貼簿要求後，此對照表才會回報成功。
- 當您需要還原完整的 148 列不透明具名顏色清單時，請清除篩選器。
如果剪貼簿權限遭拒，仍可手動選取並複製可見的關鍵字、HEX 與 RGB 文字。一鍵操作只會複製顯示的 HEX 代碼：它不會加入 CSS 宣告、不會變更大小寫，也不會在剪貼簿中放入隱藏格式。
依用途選擇 CSS 表示法
確認精確對應關係後，請比較關鍵字的可讀性與數值代碼的一致性。即使這些格式代表相同的 sRGB 值，其用途仍不相同。
使用具名關鍵字以提升可讀性
標準化關鍵字在程式碼中容易閱讀，且可用於任何接受具名顏色識別字的 CSS 屬性，但仍須遵循該屬性的語法與瀏覽器支援情況。轉換舊有樣式表或為原型選擇易讀的顏色時，這種方式很有用。關鍵字會指定一個精確的標準化值；它並不表示影像、設計或品牌色票中的「最接近顏色」。
使用 HEX 以取得精簡的精確代碼
複製後的六位數 HEX 值可用來精簡表示已確認的顏色。對於設計代碼、可重複使用的元件，以及希望 CSS 值維持一致而非依賴不同別名的團隊而言，這種方式很有用。請依顯示方式原樣複製代碼，不要加入對照表未提供的屬性名稱或包裝符號。
當 RGB 註記符合樣式表需求時予以保留
此對照表會以十進位 rgb(r, g, b) 格式顯示每項對應關係。維護已使用明確色Channel 值撰寫的 CSS 時，這種格式可能很有幫助。由於這項查詢採精確比對，請使用完整 RGB 字串搜尋，並在變更現有程式碼前確認傳回的關鍵字與 HEX 值。
- 轉換舊有樣式表：查詢每個現有名稱、確認其對應關係，並決定要保留識別字，還是圍繞精確代碼將樣式表標準化。
- 建立原型：選擇易讀的關鍵字、查看其色票，並另行檢查前景與背景的搭配是否符合無障礙需求。
- 記錄共用顏色：使用複製的 HEX 值作為精確參考，並將關鍵字視為額外標籤，而非視覺近似值。
- 處理動態或透明顏色：針對 currentColor 或透明度採用獨立的 CSS 策略，不要硬將它們納入不透明具名顏色的資料列。
正確解讀別名與特殊關鍵字
不同識別字可以代表相同的值。例如，aqua 與 cyan 是兩個各自獨立且有效的 CSS 關鍵字，兩者都對應至 #00ffff，也就是 rgb(0, 255, 255)。fuchsia 與 magenta 關鍵字則構成另一組別名。此對照表會保留這些資料列而不將其合併，因為每種拼寫都是有效的 CSS 識別字，而且可能已存在於樣式表中。
數個名稱也同時存在美式與英式的灰色拼寫。維護現有程式碼時，除非另有變更理由，否則請保留該專案已使用的拼寫。篩選功能絕不會合併別名、變更對應關係、虛構模糊同義詞，也不會將值轉換至其他色彩空間。
148 筆資料列的數量也有明確界線。Transparent 是代表透明黑色的特殊關鍵字，而非不透明的具名色票。currentColor 則取決於元素計算後的顏色，因此沒有固定的獨立 HEX 值。此對照表不會為這兩者指定憑空捏造的對應關係。
將參考資料查詢與設計決策分開
CSS 名稱是歷史沿用的識別字，並非感知均勻的調色盤、科學分類法、無障礙評級，也不保證顯示器能重現實體顏料。相鄰名稱可能看起來出奇地相似，有些名稱也無法一致描述相對亮度。清單中的所有 148 種顏色都會在 sRGB 色彩空間中解析，因此此對照表可回答數位 CSS 對應問題，而不是印刷顏色或實體材料問題。
單憑顏色名稱也不足以做出無障礙決策。對比度取決於前景與背景的搭配、文字大小、字重及適用指南。請使用Color Contrast Checker 評估這項關係，而不要依據關鍵字或色票推論無障礙程度。
同樣地，請使用專門工具進行調色盤產生或漸層建立。具名顏色對照表不會擷取影像樣本、計算感知相似度、建立漸層，也不會重現歷史上用於網頁安全的顏色組合。
若要進行標準層級的確認，請將顯示的對應關係與W3C CSS Color 4 具名顏色規格及MDN 具名顏色參考資料進行比較。
如果您正在權衡 various 選項，Why Does CSS Use a Data URL When Generating SVG Patterns? 對此有詳細說明。
如果您正在權衡 various 選項，Repeat the Same Web Safe Colors Chart Result 對此有詳細說明。