HTML 顏色代碼涵蓋了 W3C CSS Color 4 所標準化的 148 個不透明 CSS 命名顏色關鍵字，每個關鍵字都對應一個小寫六位數的 HEX 值，以及一組相符的十進位 rgb() 對應。這個詞涵蓋的範圍比聽起來更廣：在實務中，搜尋 HTML 顏色代碼的設計師與開發者，通常想要的是以下三種需求之一——快速查詢特定命名顏色的精確 HEX、取得所有 CSS 接受之關鍵字的完整清單，或是快速將一個穩定且標準化的值複製到樣式表中，而無須猜測瀏覽器會如何解讀。HTML 顏色名稱對照表正是為了這項任務而設計。它將所有 148 個標準化不透明關鍵字整合進單一可搜尋的表格中，並提供渲染色塊、小寫 #RRGGBB 字串、相符的十進位 rgb(r, g, b) 三元組，以及一鍵複製到剪貼簿的功能——所有處理皆在瀏覽器本地端執行，因此不會將任何搜尋或複製的值傳送至伺服器。這使其成為翻譯舊有樣式表、為原型挑選易讀的關鍵字、檢查名稱背後的精確數值，以及將穩定的色彩權杖複製到新 CSS 之中的實用日常參考工具。
HTML 顏色代碼在 CSS 中涵蓋的範圍
HTML 顏色代碼是一個涵蓋四種技術上不同 CSS 顏色格式的統稱。W3C CSS Color 規格支援十六進位標記法，例如 #ff6347；函式 rgb() 形式，例如 rgb(255, 99, 71)；用於色相、飽和度與亮度的 HSL 系列；以及一份封閉的命名顏色關鍵字清單，例如 tomato、rebeccapurple 或 lightseagreen。每一種格式在瀏覽器解析後，最終都會產生相同的 sRGB 像素值；差別僅在於語法與撰寫方式。
在搜尋 HTML 顏色代碼時，命名顏色這一層是最相關的。它是唯一以純英文可讀的 CSS 顏色格式、唯一能讓設計師無須在心裡進行算術即可挑選色塊的格式，也是唯一固定且有限，而非開放式的格式。現代 CSS 在該清單中恰好認得 148 個不透明關鍵字。完整的清單——包括 aqua/cyan 與 fuchsia/magenta 等別名，再加上美式與英式的 gray 拼法——皆經過策展，且在各家瀏覽器中保持穩定。
Hex 與 rgb() 在功能上可互換。瀏覽器將 #ff6347 與 rgb(255, 99, 71) 視為相同的 sRGB 數值，且多數樣式指南建議在其中擇一，並在整個專案中一致使用。HSL 則是感知導向的替代方案——將色相（色環上的角度）與飽和度及亮度（百分比）分離——適用於憑感覺而非依通道算術來調整顏色的情境。HTML 顏色名稱對照表聚焦於關鍵字這一層，因為這一層正是錯字與過時參考最容易破壞舊有樣式表的地方。
148 個標準化 CSS 命名顏色
CSS Color 4 規格定義了恰好 148 個不透明命名顏色關鍵字，而 HTML 顏色名稱對照表逐列反映此數量。依據 W3C 命名顏色清單，對照表中的每個關鍵字皆解析為單一小寫六位數的 HEX 值，以及單一的十進位 rgb(r, g, b) 對應；沒有任何四捨五入、沒有任何近似值，也沒有任何列是規格之外的自行編造。對照表排除了兩個初學者經常預期會出現的 CSS 關鍵字：transparent 與 currentColor。Transparent 是特殊的帶 alpha 關鍵字，代表透明黑色而非不透明命名色塊，因此將其納入不透明表格會產生誤導性的數值對應。currentColor 則根本沒有固定的獨立 HEX——它始終在渲染時解析為該元素的 computed color 屬性，因此其值取決於情境。將這兩者排除於 148 列計數之外，才是如實反映規格所標準化內容的做法。
全部 148 個關鍵字皆在 sRGB 色彩空間中解析。這個色彩空間正是顯示器、手機螢幕以及未經校色的瀏覽器預覽所使用的，因此從對照表複製的值，在取得該值的螢幕上看起來會與其他螢幕一致。這些名稱是歷史性的識別符，並非感知均勻的調色盤。它們既非色彩的科學分類，也非無障礙等級評分，更不保證任何特定顯示器能準確重現某種實體顏料。有些相鄰的名稱看起來出奇地相似——例如 gainsboro 與 lightgray，在一般螢幕上已接近到多數人難以分辨。請使用對照表將意圖轉換為精確的 sRGB 三元組；勿直接以名稱作為衡量無障礙性或印刷準確度的替代方案。
如何查詢顏色並複製其 HEX
使用對照表是三步驟的工作：篩選、檢查、複製。每個步驟皆可透過鍵盤操作且可復原。
- 前往 /color/named-colors-chart/ 開啟對照表，並點擊表格頂部的篩選框。
- 輸入部分的 CSS 顏色名稱（不分大小寫的片段比對）、以 # 為前綴的精確六位數 HEX 值，或完整的 rgb(r, g, b) 字串。對照表依 ASCII 順序比對關鍵字片段、依前置的 # 比對精確 HEX，並依整組數字三元組比對完整 rgb()——簡短的數字片段不會意外比對到不相關的通道。
- 檢視相符的關鍵字、渲染的色塊、小寫 HEX，以及十進位 RGB。點擊 HEX 值即可將其寫入剪貼簿；若瀏覽器拒絕剪貼簿權限，關鍵字、HEX 與 RGB 文字仍可選取以便手動複製。清除篩選框，即可依原本的 ASCII 字母順序恢復全部 148 列不透明資料。
在開始篩選之前，有幾項行為值得事先了解：
- 對照表絕不會合併別名、自行發明模糊同義詞，或在色彩空間之間進行轉換。輸入 aqua 即看到 aqua；輸入 cyan 即看到 cyan；兩列皆顯示相同的 #00ffff 對應。
- 若搜尋無相符結果，對照表會顯示無相符訊息，而非以鄰近顏色替代，因此拼字錯誤會清楚可見，而非被默默掩蓋。
- 複製時始終寫入與顯示內容完全一致的小寫六位數 HEX，沒有任何 CSS 宣告的外層包裝，也沒有大小寫的轉換。
- 清除篩選條件後，始終會恢復完整的 148 列；篩選操作絕不會永久隱藏任何一列。
為何 Aqua/Cyan 與 Fuchsia/Magenta 等別名很重要
期望嚴格一對一關鍵字對應列的讀者，會看到重複的列並合理地提出疑問。對照表刻意將標準化別名保留為個別列。Aqua 與 cyan 皆對應 #00ffff，fuchsia 與 magenta 皆對應 #ff00ff；對照表保留這兩列，是因為每一種拼法都是有效的 CSS 識別碼，皆獲所有現代瀏覽器辨識，且任一種拼法皆可能出現在您所繼承或必須維護的程式碼中。將其合併將會掩蓋 CSS 的一項事實：包含 aqua 的樣式表，與包含 cyan 的樣式表行為完全相同，但兩者之中只有一個是作者實際撰寫的名稱。同樣的邏輯也適用於 gray 的美式與英式拼法——gray、grey、darkgray、darkgrey、lightgray、lightgrey、dimgray 與 dimgrey 皆以個別的有效列呈現，並具有相同的對應值。
| 關鍵字 | HEX | RGB |
|---|---|---|
| aqua | #00ffff | rgb(0, 255, 255) |
| cyan | #00ffff | rgb(0, 255, 255) |
| fuchsia | #ff00ff | rgb(255, 0, 255) |
| magenta | #ff00ff | rgb(255, 0, 255) |
| rebeccapurple | #663399 | rgb(102, 51, 153) |
| gray | #808080 | rgb(128, 128, 128) |
| grey | #808080 | rgb(128, 128, 128) |
這表示對照表不僅是 148 像素的色塊調色盤；它同時也是所有合法拼法的詞彙表。當您閱讀一份到處使用 aqua 的舊有樣式表時，只需透過單一篩選即可確認 aqua、cyan 與 #00ffff 為相同的顏色。當您撰寫新程式碼時，對照表能協助您決定團隊應統一採用哪一種拼法——通常是與周圍程式碼庫一致的關鍵字，而非您當下首次搜尋到的拼法。
第三種值得了解的別名是 rebeccapurple，它是對照表中唯一在非歷史脈絡下新增的名稱。它對應 #663399（rgb(102, 51, 153)），並由 CSS Color 4 標準化，以紀念 Rebecca Alison Meyer。它在對照表中與其他項目並列，而非任何既有紫色的重複，且是諸如「是否有一個體面的中紫色關鍵字？」這類問題最簡明的命名顏色答案。
在 CSS 中選擇命名顏色、HEX 或 rgb()
這四種 CSS 顏色格式各有不同的編輯用途，其選擇屬於程式碼風格決策，而非渲染決策——瀏覽器會將其全部正規化為相同的 sRGB 三元組。下表摘要說明每種格式適用的情境。
| 格式 | 範例 | 最佳用途 |
|---|---|---|
| 命名顏色 | tomato | 易讀的原型、固定的設計權杖、翻譯舊有樣式表 |
| 十六進位 | #ff6347 | 精簡的單一真實來源值；小寫六位數形式最具可攜性 |
| rgb() | rgb(255, 99, 71) | 當您已習慣以整數通道思考，或正從影像工具轉換而來時 |
| HSL / hsl() | hsl(9, 100%, 64%) | 感知導向的調整——在不更動飽和度的前提下平移色相或亮度 |
在這些格式中，命名顏色這一層是最小且最受限制的，而這正是其優勢所在。由於清單封閉於 148 個關鍵字，您可以信賴像 tomato 這類名稱，在每個瀏覽器、每份樣式表、每個裝置上都代表相同意義。這樣的穩定性正是 HTML 顏色名稱對照表成為實用翻譯工具的原因：若您知道名稱，即可確認數值；若您知道數值，即可確認名稱。如需更深入的參考，MDN 命名顏色頁面以相同的規格表格為基礎，並附上跨瀏覽器相容性說明。
Limits of the Named-Colors Reference
The chart is a lookup, not a generator, and it deliberately does not do a handful of things that are tempting to misuse it for. Knowing where the chart stops keeps it from being blamed for jobs it was never built to do.
Contrast and accessibility decisions are the most common misuse. A named color or a HEX value tells you a color's sRGB channels, but WCAG contrast depends on the foreground-background pair, the rendered text size, and the applicable guideline level — not on which keyword you chose. For that task, the Color Contrast Checker takes any two HEX or rgb() values and reports AA and AAA ratios in real time.
Palette generation is the next common misuse. The 148 named colors are not a perceptually even palette, so deriving a balanced scheme by eye from the chart will give uneven results. The Color Palette Generator is the right tool for that — pick any base HEX, including one copied from the chart, and it will compute balanced relationships across several standard schemes.
Print and CMYK conversion, gradient code, image sampling, random exploration, and converting between HEX and RGB are also separate tasks. Each of those jobs has a focused tool that handles it end to end. Use the HTML Color Names Chart when you need to translate, verify, or copy one of the 148 standardized opaque named-color keywords; reach for the focused tool when you need anything else.
For a deeper look, see What Details Matter When You Generate a CSS Checkbox.
For a deeper look, see Which Details Matter When You Generate a CSS Cubic Bezier.