Color & Design·4 min read

How CSS Color Names Work: The 148 Keywords

CSS ships with a built-in vocabulary: write tomato or steelblue in a stylesheet and every browser renders the same exact color. Knowing how that vocabulary works turns it 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 free Color Name Finder 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 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.

You'll often see 140 quoted, but the spec defines 148 keywords. Some are aliases for the same value: aqua and cyan are identical, as are fuchsia and magenta, and every gray-family name works with both gray and grey spellings. Group the aliases and you get 139 distinct colors. The Color Name Finder uses all 148 keywords and shows aliases together, so a match for #00FFFF lists both aqua and cyan.

Names are case-insensitive in CSS, so SteelBlue and steelblue both work, but the spec writes them in lowercase and so does the finder. 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.

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 ranks the results. #E92C4B gives crimson, whose value #DC143C sits about 4.6 Delta E away, with indianred next. #5A8FCB gives cornflowerblue at about 4.5, with dodgerblue and steelblue close behind. #FF6347 gives tomato at a distance of exactly zero, because that's tomato's defined value.

The finder shows the closest name plus four alternatives, each with its Delta E, so you can see when two names are nearly tied. 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 that mismatch.

Mistakes people make with CSS 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. For a whole palette, paste up to 500 colors into the Name a list of colors box and copy the results as CSV or as CSS variables named after their nearest keyword.

Color Name Finder and its neighboring tools

Same colors, different questions.

Use this tool when the question is what do I call this color. When the question is what are this color's channel values, the HEX to RGB Converter 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 Finder's territory.