An HTML color names chart maps human-readable color keywords to standardized CSS values, and the HTML Color Names Chart covers all 148 opaque named-color keywords.
That makes it useful when you need to compare a color name, an exact HEX value, or a complete RGB value without relying on a guessed shade. Use the HTML Color Names Chart to search those inputs, inspect the swatch and standardized values, and copy the HEX token when needed.
The main distinction is exact lookup versus color discovery: the chart resolves standardized names and values, but it does not identify an arbitrary image color, invent a nearby CSS name, generate a palette, or judge accessibility.
What this chart actually lets you compare
People often use “HTML color names,” “CSS color names,” and “CSS color names chart” interchangeably. The reference used here is more precise: it follows the opaque named-color keywords standardized by CSS Color 4. For modern CSS work, treat the displayed keyword and its standardized mapping as the authoritative pair.
- Name-to-value lookup: Enter part of a CSS color name to find matching keywords, swatches, and exact values.
- HEX-to-name lookup: Enter an exact six-digit #RRGGBB value to locate its standardized keyword and RGB mapping.
- RGB-to-name lookup: Enter a complete rgb(...) string to resolve an existing CSS value.
- Alias verification: See which different valid CSS identifiers intentionally share the same color value.
Searches and copied values remain in the browser and are not sent to a server. The chart is therefore a reference and lookup aid, not a color-generation service.
Keyword, HEX, and RGB searches compared
The most useful comparison starts with the information you already have. Each input method follows a different matching rule and is suited to a different part of a web project.
| Search input | How it matches | Best use | Result to review |
|---|---|---|---|
| CSS color-name fragment | Case-insensitive fragment matching | Find a keyword when you know only part of its spelling | Matching keyword, swatch, HEX, and RGB mapping |
| Exact #RRGGBB | Exact six-digit HEX matching | Resolve a known HEX value to its standardized name | Standardized keyword, swatch, HEX, and RGB mapping |
| Complete rgb(...) | Exact matching of the full string | Translate an existing RGB declaration | Standardized keyword, swatch, HEX, and RGB mapping |
If you know the word but not its exact spelling, begin with a keyword fragment. If you already have a six-digit HEX token, use the exact HEX search. If the value exists in a stylesheet as a complete RGB function, enter that entire string instead of trying to search for one channel.
A partial keyword may produce several matching rows, which remain in the specification table’s ASCII alphabetical order by keyword. The other two methods are deliberately exact. A search beginning with # does not perform fuzzy matching, and a short numeric fragment inside an incomplete RGB search cannot accidentally match an unrelated channel. A no-match message appears rather than substituting a nearby color.
Look up and copy a standardized mapping
- Open the HTML Color Names Chart and locate the filter.
- Type a CSS color-name fragment, an exact six-digit #RRGGBB value, or a complete rgb(...) value.
- Review the matching standardized keyword, live swatch, lowercase HEX value, and decimal RGB mapping.
- If the keyword search returns several names, compare the rows rather than assuming the first result represents the nearest visual match.
- Click a HEX value to request a clipboard copy. The chart reports success only after the browser resolves that clipboard request.
- Clear the filter when you need to restore the complete list of 148 opaque named-color rows.
If clipboard permission is denied, the visible keyword, HEX, and RGB text can still be selected and copied manually. The one-click action copies only the displayed HEX token: it does not add a CSS declaration, alter capitalization, or place a hidden format on the clipboard.
Choose the CSS representation for the job
Once the exact mapping is confirmed, compare the readability of a keyword with the consistency of a numeric token. These formats serve different purposes even when they represent the same sRGB value.
Use a named keyword for readability
A standardized keyword is readable in code and can be used anywhere a CSS property accepts a named-color identifier, subject to that property’s grammar and browser support. It is useful when translating a legacy stylesheet or selecting a readable color for a prototype. The keyword identifies one exact standardized value; it does not mean “the nearest color” to an image, design, or brand swatch.
Use HEX for a compact exact token
A copied six-digit HEX value gives you a compact representation of the confirmed color. It can be useful for design tokens, reusable components, and teams that want CSS values to remain consistent rather than relying on different aliases. Copy the raw token exactly as displayed, without adding property names or wrappers that the chart did not provide.
Keep RGB when that notation fits the stylesheet
The chart displays each mapping in decimal rgb(r, g, b) form. That can be helpful when maintaining CSS already written with explicit channel values. Search with the complete RGB string because this lookup is exact, and confirm the returned keyword and HEX value before changing existing code.
- Translating a legacy stylesheet: Look up each existing name, confirm its mapping, and decide whether to preserve the identifier or standardize the stylesheet around the exact token.
- Building a prototype: Choose a readable keyword, inspect its swatch, and check the foreground-background pair separately for accessibility.
- Documenting a shared color: Use the copied HEX value as the precise reference while treating the keyword as an additional label, not a visual approximation.
- Handling dynamic or transparent colors: Use a separate CSS strategy for currentColor or transparency rather than forcing them into an opaque named-color row.
Interpret aliases and special keywords correctly
Different identifiers can represent the same value. For example, aqua and cyan are separate valid CSS keywords that both map to #00ffff, or rgb(0, 255, 255). The fuchsia and magenta keywords form another alias pair. The chart preserves these rows instead of merging them, because each spelling is a valid CSS identifier that may already exist in a stylesheet.
American and British gray spellings also coexist for several names. When maintaining existing code, preserve the spelling already used by that project unless there is a separate reason to change it. Filtering never merges aliases, changes a mapping, invents fuzzy synonyms, or converts a value into another color space.
The 148-row count also has a deliberate boundary. Transparent is a special keyword representing transparent black rather than an opaque named swatch. currentColor depends on an element’s computed color and therefore has no fixed standalone HEX value. Neither is assigned an invented mapping in the chart.
Keep reference lookup separate from design decisions
CSS names are historical identifiers, not a perceptually even palette, scientific taxonomy, accessibility rating, or promise that a display reproduces a physical pigment. Neighboring names can look surprisingly similar, and some names do not describe relative lightness consistently. All 148 listed colors resolve in the sRGB color space, so the chart answers digital CSS mapping questions rather than print-color or physical-material questions.
A color name alone is also insufficient for an accessibility decision. Contrast depends on the foreground-background pair, text size, weight, and applicable guidance. Use the Color Contrast Checker to evaluate that relationship instead of inferring accessibility from a keyword or swatch.
Likewise, use focused tools for palette generation or gradient creation. The named-color chart does not sample images, calculate perceptual similarity, create gradients, or reproduce the historical web-safe color set.
For standards-level confirmation, compare the displayed mappings with the W3C CSS Color 4 named-color specification and the MDN named-color reference.
If you're weighing options, Why Does CSS Use a Data URL When Generating SVG Patterns? covers this in detail.
If you're weighing options, Repeat the Same Web Safe Colors Chart Result covers this in detail.