Color & Design·4 min read

How CSS Color Names Work: The 140 Named Colors

CSS ships with a built-in vocabulary: write Tomato or SteelBlue in a stylesheet and every browser on earth renders the same exact color. Understanding how css color names work turns that vocabulary from trivia into a tool, whether you're making a prototype readable, labeling palette entries in a doc, or hunting for the closest human word for #E92C4B. This guide covers where the names came from, how nearest-name matching works, and when a name beats a code.

Open the tool All insights

Where the named colors came from before CSS existed

A short, strange history.

Most of the list predates the web. The names trace back to the X11 window system's color file from the 1980s, which itself borrowed from paint charts, which is how oddities like PapayaWhip and BurlyWood ended up as web standards. Browsers adopted the list informally, and CSS later standardized it so that names, hex, and rgb() became interchangeable notations.

One name has a newer story: RebeccaPurple, #663399, was added in 2014 in memory of Rebecca Meyer, daughter of CSS pioneer Eric Meyer. It's the only named color added for a person.

Knowing the provenance explains the list's quirks. Nobody designed it as a coherent palette, so don't expect the names to form usable ramps or evenly spaced hues. They are a shared vocabulary that history handed the web, useful precisely because everyone's browser agrees on every entry.

How CSS color names work, and why the count is fuzzy

Numbers people argue about.

The commonly cited figure is the 140 named colors, though the spec technically defines around 148 keywords once you count duplicates. Aqua and Cyan are the same value, as are Fuchsia and Magenta, and both Gray and Grey spellings work for every gray-family name. Subtract the aliases and you land near 140 visually distinct colors.

Distribution across the spectrum is lumpy, which surprises people. There are dozens of fine-grained blues and greens, a wall of near-whites like Snow, Ivory, and MintCream, and comparatively few distinct oranges. The list reflects 1980s terminal aesthetics more than any systematic sampling of color space.

Finding the nearest name to a hex, with worked matches

What the lookup computes.

Nearest-name matching converts your input and every named color into Lab space, then computes Delta E, a measure of perceived difference, and returns the smallest. Input: #E92C4B gives Crimson, whose value #DC143C sits about 5 Delta E away, close enough to describe the color honestly. Input: #5A8FCB gives SteelBlue. Input: #FF6347 gives Tomato at a distance of exactly zero, because that's Tomato's defined value.

The distance number matters as much as the name. Under 5, the name is a fair description; past 10 or so, treat it as a general direction rather than a label you'd put in a brand doc.

Why not just find the closest RGB values? Because channel arithmetic doesn't match human vision. Our eyes are far more sensitive to some hue shifts than others, so a naive nearest-neighbor search in RGB space will sometimes crown a name that looks obviously wrong next to your swatch while a better candidate sits two entries away. Lab space and Delta E were designed to fix exactly that mismatch.

Mistakes people make with html color names

Small traps, real consequences.

Names feel too simple to misuse, and yet.

Assuming Gray is lighter than DarkGray. It isn't: Gray is #808080 and DarkGray is #A9A9A9, a legacy quirk from merging two naming traditions.
Expecting Green to match what most people call green. Green is the fairly dark #008000; the bright screen green is Lime, #00FF00.
Shipping names to systems that don't parse them. CSS and SVG understand SteelBlue; plenty of native mobile styling, canvas pixel work, and config formats want the hex.
Using near-white names like Ivory or Snow on white backgrounds and wondering where the element went. Check the hex before trusting a poetic name.

Named colors vs hex in practice

When each notation earns its place.

Names win wherever humans read the code more often than machines transform it: prototypes, teaching examples, quick demos, terminal themes, and test fixtures. A test asserting the border is Crimson documents itself; #DC143C does not.

Hex wins everywhere precision or tooling is involved, which is production, more or less. Brand colors almost never coincide with a named value, design tools export hex, and diffs over hex are unambiguous. A sensible split is names in throwaway and illustrative code, hex behind design tokens in anything shipped.

There's a middle path, too: use the nearest name as a comment or a token alias. A line like --accent: #E92C4B; /* near Crimson */ costs nothing and gives every future reader an instant mental picture, which is the whole service a name provides.

Color Names Lookup and its neighboring tools

Same colors, different questions.

Use this lookup when the question is 'what do I call this color'. When the question is 'what are this color's channel values', HEX to RGB answers it directly. For exploring a color interactively before naming or converting anything, the Color Picker is the faster starting point. And if the label you need is an ink standard for print rather than a CSS word, that's the Pantone Color Lookup's territory.