An HTML color names chart alternative built as a searchable, interactive reference contains all 148 opaque CSS named-color keywords standardized by CSS Color 4, each row paired with its lowercase six-digit HEX value, a decimal rgb(r, g, b) tuple, and a rendered swatch you can copy from directly. Unlike a static image or PDF, this kind of chart runs entirely in the browser, accepts three filter modes (keyword fragment, exact #RRGGBB, or a complete rgb() string), and preserves standardized aliases such as aqua/cyan and fuchsia/magenta as separate valid rows. The dataset is locked at exactly 148 opaque rows, nothing you type is transmitted to a server, and the visible text stays fully selectable if the clipboard write is denied. It is the practical substitute that developers reach for when a screenshot, printed swatch book, or 1990s-era reference table no longer matches how they actually work with CSS today, whether they are translating legacy stylesheets, hunting down the canonical value behind a name they inherited, or grabbing a stable token for a prototype.
Most people searching for an HTML color names chart alternative have already tried a static chart somewhere and hit the same friction: a long unsearchable list, columns that do not copy cleanly, aliases merged into one row, or no quick way to jump from a HEX value back to its name. The guide below walks through what a better reference actually delivers, how the searchable chart solves each of those pain points, and where it fits next to other color tools in a real workflow.
Why a Static HTML Color Names Chart Stops Being Useful
Static HTML color charts — the kind that arrived as one big image in early web design books, or as a fixed table on a documentation page — were adequate when browsers rendered a small, stable set of "web-safe" colors. CSS Color 4 expanded the named-color list considerably and standardized both the American and British spellings of several grays, along with the legacy aliases that some browsers still preserve for interop. A static image cannot keep up with that scope, and it certainly cannot let you jump from a HEX back to its name or filter to the row that matches the rgb() string a colleague pasted into Slack.
The common frustrations are predictable: scrolling through 140+ rows to find one keyword, guessing which spelling of "gray" the chart decided to use, and discovering too late that aqua and cyan were collapsed into a single entry even though CSS treats them as two distinct identifiers. A modern alternative addresses all of those at once — by searching, by preserving aliases as separate rows, and by offering one-click copying without sending the value anywhere first.
What a Better HTML Color Names Chart Includes
The searchable HTML Color Names Chart ships with a precise, locked-down dataset that holds up under production use. Every row contains one CSS keyword, one lowercase #RRGGBB value, one decimal rgb(r, g, b) tuple, and a rendered swatch. There are exactly 148 rows, 148 unique keyword keys, and standardized aliases are kept as separate rows rather than collapsed. The table is ordered ASCII-alphabetically by keyword, so searching produces predictable results and the page reads cleanly when pasted into a doc.
Because the chart runs entirely in the browser, nothing you type is sent to a server. Searches and copied values are not sent to a server. That matters when the color you are looking up is part of a confidential design system or an unreleased brand palette. The chart also handles one specific edge case that many static references get wrong: it keeps both American and British gray spellings (for example, gray/grey, dimgray/dimgrey, slategray/slategrey) as valid identifiers, because each spelling is a valid CSS name that a stylesheet can legally use.
How to Search and Copy HEX Values From the Chart
The workflow is short and works the same way whether you are translating a legacy stylesheet or just grabbing a token for a prototype.
- Type part of a CSS color name, an exact six-digit HEX value prefixed with #, or a complete rgb() string in the filter input at the top of the chart.
- Review the matching rows: each shows the standardized keyword, a live swatch, the lowercase HEX value, and the decimal rgb(r, g, b) tuple.
- Click a HEX value to copy it to your clipboard. The chart reports success only after the browser resolves the clipboard write.
- If clipboard permission is denied, select the HEX or RGB text manually — the visible values remain fully selectable and copy as plain text.
- Clear the filter (delete the input or use the clear control) to restore all 148 opaque rows in their specification order.
The matching rules are deliberately strict so a stray fragment never collides with the wrong row. Keyword search is case-insensitive and matches name fragments (typing "rebecc" still surfaces rebeccapurple). A query that starts with # uses exact six-digit HEX matching — A partial like #FF00 returns nothing rather than guessing, because exact HEX matching requires the full six-digit string. A complete rgb(...) search uses exact matching on the full string, so a short numeric fragment cannot accidentally match an unrelated channel value in another row. When nothing matches, the chart shows a no-match message rather than substituting a visually nearby color, because a guess would make the reference untrustworthy as a maintenance tool.
Filter Modes Compared
The chart is essentially three lookups in one tool, and choosing the right mode prevents silent misses during lookup.
| Filter input | Example | Matching behavior |
|---|---|---|
| Name fragment (no prefix) | rebecc | Case-insensitive substring match on the CSS keyword; returns rebeccapurple. |
| Exact HEX | #00ffff | Exact six-digit lowercase match; surfaces aqua and cyan because both are valid identifiers mapped to that value. |
| Complete rgb() string | rgb(255, 0, 0) | Exact full-string match against the rgb(r, g, b) column; no fuzzy numeric containment. |
| Empty filter | (blank) | All 148 opaque rows shown in ASCII-alphabetical keyword order. |
This separation matters when you are auditing code that arrived from a different machine: a HEX-prefixed search behaves like a precise equality check, while a name search behaves like a fuzzy substring match. Reaching for the wrong one is the most common way to get a false sense that a color does not exist in the chart.
Aliases, Excluded Keywords, and What the 148 Means
Two keywords map to the same HEX on purpose. Aqua and cyan both resolve to #00ffff, and fuchsia and magenta both resolve to #ff00ff. CSS Color 4 keeps both spellings as valid identifiers for historical and interop reasons, and the chart preserves them as separate rows. If you are reading an older stylesheet that uses "aqua" or auditing one that uses "cyan," you will see the row you expect. The same logic applies to the paired American/British gray spellings listed earlier — they are not accidental duplicates, each spelling is a legal CSS identifier worth its own row.
Two well-known CSS keywords are intentionally absent from the 148: transparent and currentColor. Transparent is a special alpha-bearing keyword representing transparent black; it is not an opaque swatch with a fixed numeric mapping, so listing it inside an "opaque named colors" table would imply a precision the keyword does not have. currentColor depends on the computed color property of whichever element is being styled, so it has no fixed standalone HEX either. The chart's external golden cases cover these exclusions so the row invariant of "148 opaque rows" stays auditable during maintenance.
All listed colors are in the sRGB color space. The names are historical identifiers — they are not a perceptually even palette, a scientific taxonomy, an accessibility rating, or a guarantee that a particular display reproduces a physical pigment. Two neighboring names can look surprisingly similar in sRGB, and the names do not consistently describe relative lightness. Use the chart as a reference, not as a design system.
Workflows Where the Chart Pays for Itself
Translating a legacy stylesheet is the most common reason to reach for the chart. Drop a keyword like "darkseagreen" into the filter to confirm its exact HEX, or paste a colleague's #RRGGBB token to find the readable keyword name behind it. When you are writing a prototype and want a readable named-color identifier instead of an opaque hex literal, scan the alphabetical list for one that describes the role. When you are checking the value behind a name you inherited from a CSS framework, search the keyword directly to see the canonical mapping.
Two adjacent jobs are easy to do badly without warning, and the chart helps you avoid the trap. First, an accessibility check should never rely on a color name alone; contrast depends on the foreground-background pair, text size, and weight, and the WCAG criteria are explicit about that. For that, switch to the Color Contrast Checker to evaluate the actual pair against WCAG AA and AAA. Second, generating a palette is outside the chart's job — for that, the Color Palette Generator builds complementary, analogous, or triadic relationships from a base color in seconds. Using a reference chart as a generator is a recipe for 148 one-off tokens with no relationships between them.
Limits Worth Knowing Before You Build on It
The chart does not invent fuzzy synonyms, merge aliases, convert between color spaces, or change the mapping when you filter. Every row you see is the standardized CSS Color 4 value, full stop. The dataset is locked by invariants: 148 rows, 148 unique keyword keys, six lowercase hexadecimal digits per HEX cell, and separate alias rows. If a future CSS Color revision changes a mapping, the invariants make any deviation visible during maintenance.
For a definitive external cross-check, the W3C CSS Color 4 named-colors table lists the same keyword set and sRGB triples that this chart is built on. Because nothing you type is sent to a server, the chart behaves predictably in restricted or shared environments without exposing search strings.
For a deeper look, see How to Generate a CSS Toggle Switch With Native HTML.
For a deeper look, see Is an HTML Color Names Chart Safe to Use Online? Here's Why.