The HTML Color Names Chart is a searchable list of all 148 opaque CSS named colors with their exact standardized HEX and RGB values in one place. Each row of the chart shows one CSS keyword, one lowercase six-digit HEX value, one decimal rgb() triplet, and a rendered swatch, so you can confirm the color visually while you read the numbers. The list comes straight from the CSS Color 4 named colors specification and is locked at 148 rows by invariant checks, which means no keyword is missing, duplicated by mistake, or mistyped. You can search it three ways — by a fragment of a CSS keyword, by an exact #RRGGBB value, or by a complete rgb() string — and the result rows preserve the ASCII-alphabetical order defined by the specification. Because the chart runs entirely in your browser, neither the keywords you type nor the values you copy are sent to any server.
What's inside the 148-row table
Every row in the chart is built from four fields: a CSS keyword, a lowercase six-digit #RRGGBB value, a decimal rgb(r, g, b) triplet, and a rendered swatch you can see in the browser. The keyword column holds the canonical CSS identifier as written in the standard; the HEX column holds the exact mapping in lowercase; the RGB column holds the same color in channel-by-channel decimal form; and the swatch confirms the visual result on screen. The dataset is locked by four invariants: exactly 148 rows, 148 unique keyword keys, six lowercase hexadecimal digits per HEX value, and separate rows for each standardized alias.
Those invariants protect the list against the most common reference-table errors: missing entries from CSS Color 4, identifiers that have been misspelled over time, channels that get transposed when the table is regenerated, and accidental merges that would hide valid alternates. External golden cases — the first and last alphabetical entries, the alias endpoints, mixed-channel rows, and the rebeccapurple entry added in CSS Color 4 — are also checked on every load. All listed colors resolve in the sRGB color space, which is the same color space CSS uses for named values.
How to search and copy a color value
- Type part of a CSS color name, an exact #RRGGBB value, or a complete rgb(...) string into the filter box above the table.
- Review the matching standardized keyword, the rendered swatch, and the HEX and RGB mappings shown in the result rows.
- Click any HEX value in a result row to request a clipboard write; the chart reports success only after the browser confirms the copy.
- If clipboard permission is denied, select the visible keyword, HEX, or RGB text manually — the chart never modifies capitalization, adds CSS declarations, or copies a hidden format.
- Clear the filter to restore the full list of 148 opaque named colors in ASCII-alphabetical order.
A short numeric fragment will not match an unrelated channel value, because a complete rgb(...) search uses exact-string matching rather than fuzzy parsing. A leading # in the filter switches the chart to exact HEX matching for that query, which prevents accidental substring matches inside longer HEX values. If no row matches, the chart shows a no-match message instead of substituting a nearby or "close enough" color.
How the three search input types behave
| Filter input | Match behavior | Example |
|---|---|---|
| Keyword fragment | Case-insensitive substring match across all 148 keywords | Typing gold returns goldenrod, lightgoldenrodyellow, palegoldenrod, and gold |
| Exact #RRGGBB | Six-digit HEX must match the stored value exactly when the query starts with # | Typing #00ffff returns the cyan and aqua rows that share that mapping |
| Complete rgb(...) | Exact-string match on the full rgb(r, g, b) expression | Typing rgb(255, 215, 0) returns the gold row |
Filtering never changes a mapping, merges aliases, invents fuzzy synonyms, or converts a value to another color space. The chart always returns the same keyword, HEX, and RGB pair that the specification defines — the only thing the filter controls is which subset of rows is visible at one time.
Aliases, gray spellings, and duplicate-value rows
The 148-row count includes standardized aliases as separate, valid entries rather than collapsing them into one canonical row. Aqua and cyan both map to #00ffff; fuchsia and magenta both map to #ff00ff. American and British gray spellings also coexist for several names, so a stylesheet written for one locale can be looked up without translation. These are not accidental duplicate records — each spelling is a valid CSS identifier, and keeping them visible is useful when you read or maintain existing stylesheets.
| Keyword A | Keyword B | Shared mapping |
|---|---|---|
| aqua | cyan | #00ffff |
| fuchsia | magenta | #ff00ff |
| gray | grey | Same per-keyword HEX values defined by CSS Color 4 |
Some neighboring names in the chart can look surprisingly similar, and some names do not describe relative lightness consistently, so the swatch next to each row is useful as a quick visual check rather than relying on the keyword alone. The names are historical identifiers, not a perceptually even palette, a scientific taxonomy, or an accessibility rating, and they make no promise that a display reproduces a physical pigment.
What the chart deliberately leaves out
The chart excludes two keywords that exist in CSS but do not fit an opaque named-color table: transparent and currentColor. Transparent is a special alpha-bearing keyword that represents transparent black rather than an opaque swatch with a fixed mapping. CurrentColor depends on the computed color property of the element that uses it, so it has no standalone HEX value that would survive outside a specific element context. Including either of those in the 148-row count would create a misleading numeric mapping, so they are kept outside the table entirely.
When to reach for a different color tool instead
The color names chart is a lookup reference, not a generator. For gradients, use a focused gradient tool; for picking a palette around a base color, use a palette generator; for sampling the average color in an image, use an image-average tool; and for historical 216-color web-safe choices, use the web-safe cube chart. None of those tasks is what this chart is built for, so the chart should not be repurposed into a generator by copying values out and rebuilding them by hand.
For accessibility decisions, a color name alone is also insufficient. Contrast depends on the foreground-background pair, the text size and weight, and the applicable guidance — not on whether one of the values happens to have a friendly name. Use a dedicated contrast checker against the relevant WCAG level for that task. For gradients, palette generation, image sampling, or historical web-safe colors, use the corresponding focused tools rather than treating this reference chart as a generator.
Putting the chart to work
The chart earns its place in three recurring workflows. First, when you inherit a legacy stylesheet full of color: and background-color: lines, you can paste any name into the filter to confirm the exact HEX and RGB behind it. Second, when you are sketching a prototype and want a readable keyword instead of a six-digit code, you can browse the alphabetized list and pick a name that communicates intent. Third, when you are building a design-token file, you can use the chart to copy stable identifiers into CSS, knowing that the value the chart returns is the value the standard specifies. A named-color identifier can be used wherever a CSS color value accepts one — see the MDN named-color reference for grammar and browser-support details — and the chart provides the verification step that turns a guess into a confirmed mapping.
For a deeper look, see RGB to HEX Shades and Variations: A Channel Walkthrough.
For a deeper look, see Gradient Generator Palette Ideas: From Pairs to CSS.