A color name that appears in a stylesheet, a design comp, or a tutorial almost always points to one of the 148 opaque keywords standardized by CSS Color 4. The HTML Color Names Chart is a browser-side reference for those keywords: every row pairs a CSS identifier with its exact lowercase #RRGGBB value, its decimal rgb(r, g, b) triple, and a rendered swatch, so a designer can confirm the digits behind a name, copy a stable color token, or read an alias without leaving the page. Because the chart runs entirely in the browser and never sends searches or copied values to a server, color lookups happen privately on the local machine. The dataset is locked to specification invariants — 148 rows, 148 unique keyword keys, six lowercase hexadecimal digits per value, and separate alias rows — which means every mapping is exact to the digit and never silently changed by the chart itself.
What the Chart Contains
The HTML Color Names Chart embeds the 148 opaque CSS Color 4 named-color keywords and their exact sRGB mappings. Every row contains one CSS keyword, one lowercase #RRGGBB value, one decimal rgb(...) value, and a rendered swatch. The chart excludes transparent and currentColor from its 148-row count on purpose: transparent is a special alpha-bearing keyword representing transparent black rather than an opaque named swatch, and currentColor depends on the computed color property of an element using it, so neither has a fixed standalone HEX value. Keeping those keywords outside the opaque table prevents a misleading numeric mapping from appearing in a row that an engineer might otherwise treat as canonical.
All 148 listed colors resolve in the sRGB color space. That uniformity matters: the same keyword returns the same six-digit HEX on every modern browser and every modern operating system, so a designer copying a token from the chart can rely on it reproducing identically elsewhere. The names are historical identifiers rather than a perceptually even palette, a scientific taxonomy, an accessibility rating, or a guarantee that a display reproduces a physical pigment. Some neighboring names look surprisingly similar in practice (lightseagreen sits close to teal, for instance), and some names do not describe relative lightness consistently (darkkhaki is lighter than darkgray), but the chart makes no perceptual claims; it only lists the exact mappings defined by the specification.
Three Filter Modes for Finding the Right Row
The filter accepts three kinds of input and applies a matching rule that matches the type. Keyword matching is case-insensitive and matches name fragments, so typing "dark", "gold", or "gray" returns every standardized keyword containing that fragment, and "Gold" returns the same row as "gold". HEX matching activates when the search begins with #, and only the row whose lowercase six-digit hex equals the input is returned, which prevents accidental partial matches that would mislabel a swatch. RGB matching activates on a complete rgb(...) string in parentheses, and the parser requires the full string, so a short numeric fragment such as "0, 255" cannot accidentally match an unrelated channel value in another row.
Each mode preserves the specification table order, which is ASCII alphabetical by keyword in this implementation. Filtering never changes a mapping, merges aliases, invents fuzzy synonyms, or converts the color to another color space; it only narrows which rows are visible. When the filter is cleared, all 148 rows return in alphabetical order. If no row matches, the chart shows a no-match message rather than substituting a nearby color, which protects against silent misreadings during a reference lookup.
Standardized Aliases and Why They Appear as Separate Rows
Some CSS named colors are intentional aliases of others. Aqua and cyan both map to #00ffff; fuchsia and magenta both map to #ff00ff. American and British gray spellings also coexist for several names. The chart preserves these aliases as separate rows rather than merging them, because each spelling is a valid CSS identifier. The dataset invariants require 148 unique keyword keys, and aliases count toward that total without merging values. The reference value behind any alias is identical to its pair, but treating them as distinct rows means a designer reading a legacy stylesheet that uses aqua can confirm the value behind that exact keyword without translating to cyan first, and a designer reading one that uses grey can match the British keyword without first converting to gray.
| Alias Pair | Shared HEX | Shared RGB | Why Both Rows Exist |
|---|---|---|---|
| aqua / cyan | #00ffff | rgb(0, 255, 255) | Both spellings are valid CSS identifiers; legacy stylesheets may use either. |
| fuchsia / magenta | #ff00ff | rgb(255, 0, 255) | Both spellings are valid CSS identifiers; design comps and code may use either. |
| gray / grey (and variants) | Varies by name | Varies by name | American and British spellings coexist; each is a distinct keyword key. |
Copying a HEX Without Losing Format
Each row exposes its lowercase #RRGGBB value as the copy target. Clicking the HEX value requests a clipboard write and reports success only after the browser resolves that request. If clipboard permission is denied, the visible keyword, HEX, and RGB text remain selectable for manual copying. The chart does not embed hidden formats in the copied output, modify capitalization, or wrap the value in CSS declarations; what the user clicks is exactly what the clipboard receives. That simplicity matters when a designer is dropping a token into a stylesheet or handing a value to a downstream tool that expects raw six-digit hex.
Common Tasks the Chart Solves Well
The HTML Color Names Chart is a fixed, names-first reference, and that focus maps onto a small set of tasks it performs reliably. Translating a legacy stylesheet is one: a designer auditing older code can paste a keyword into the filter and confirm the exact digits the browser will resolve, instead of relying on memory or an outdated cheat sheet. Choosing a readable keyword for a prototype is another: a developer writing a quick mockup can browse the alphabetical list and pick a name that conveys intent (tomato, lime, slategray) without committing to a specific hex. Checking the value behind a known name, finding an alias when one spelling is missing from a code base, and copying a stable color token into a new stylesheet round out the everyday scenarios. Because the dataset invariants are locked — 148 rows, 148 unique keyword keys, six lowercase hexadecimal digits per value — every value pulled from the chart is reproducible on every browser that supports the specification.
A named color can be used anywhere a CSS color value accepts a named-color identifier, subject to the property grammar and browser support, which is why the chart is also useful when reading or maintaining existing stylesheets: the row the engineer sees is the value the browser will resolve, with no hidden transformation in between.
When a Different Tool Is the Right Next Step
The chart is a reference, not a generator, sampler, or evaluator. For tasks that go beyond looking up a known name or copying a token, the right tool is usually a focused one. Image sampling belongs to an image color picker or image-average color finder, since the chart does not read pixel data from an uploaded file. Palette generation around a chosen base color belongs to a color palette generator, which returns complementary, analogous, and triadic schemes. Contrast evaluation belongs to a dedicated contrast checker, because a color name alone is insufficient: contrast depends on the foreground-background pair, the text size and weight, and the applicable guidance, and those variables sit outside what a names chart can judge. Print conversion to CMYK or another ink model belongs to a color-space converter that takes the copied HEX and produces ink percentages, since the chart defines sRGB values, not ink coverage. Treating the names chart as anything beyond a fixed reference is the most common source of confusion in mixed workflows, and externalizing those tasks keeps each tool focused on what it actually does well.
| Task | Best Tool | Why Not the Names Chart |
|---|---|---|
| Look up a CSS keyword, HEX, or RGB | HTML Color Names Chart | This is the chart's core purpose. |
| Sample colors from an uploaded image | Image Color Picker / Average Color Finder | The chart does not read pixel data from files. |
| Build a palette around a base color | Color Palette Generator | The chart is a reference, not a generator. |
| Evaluate WCAG contrast between two colors | Color Contrast Checker | A name alone cannot represent a foreground-background pair. |
| Convert sRGB to CMYK or another ink space | Color Space Converter | The chart defines sRGB values, not ink coverage. |
How the Dataset Stays Exact
Maintaining a reference like this means guarding against missing rows, misspelled identifiers, and transposed channels during updates. The chart validates row count (148), key uniqueness (148 distinct keyword strings), format (six lowercase hexadecimal digits per value), and a small set of external golden mappings that cover endpoints, aliases, mixed channels, rebeccapurple, and the first and last alphabetical entries. Those checks fire on the dataset itself rather than on user input, so they guard against silent regressions rather than user mistakes. Because the chart never invents fuzzy synonyms, never converts colors to another color space, and never merges aliases, the data behind the table is the data the user sees; there is no transformation layer between the specification and the row.
Browser-Side Processing, No Network Calls
All filtering, rendering, and clipboard handling runs locally in the browser. Searches are matched against the embedded dataset, swatches are rendered from the same row's HEX, and clipboard writes are negotiated with the browser's permission model. None of those operations sends a search string or a copied value to a server, which means a confidential token can be looked up and copied without leaving the local machine. For design teams working under non-disclosure agreements, internal styleguides, or pre-release brand tokens, that privacy boundary is part of what makes the chart safe to use as a daily reference rather than a publication.
For a deeper look, see Random Color Generator CSS Code You Can Paste Today.
For a deeper look, see RGB to CMYK Chart: Common Colors and Conversion Guide.