CSS named colors: the full list of 148 and when to use them

Colours already have names in CSS

Before hex was invented, software specified colours with words, and CSS kept that vocabulary. The color property accepts 148 named values — from the obvious blue to the suspicious lightgoldenrodyellow — and they all map to exact, fixed hex colours. Named colors are a real token type, not a shorthand: tomato is precisely #FF6347, forever.

In practice most people use a dozen of them and think that is the entire feature. The other 130+ are a useful resource for prototyping, documentation and tests, and a few are arguably the best-looking colours CSS has to offer.

The complete list

Here are all 148 keywords, grouped by colour family for scanning. gray and grey, aqua and cyan, fuchsia and magenta are aliases that resolve to the same hex:

Reds/oranges: red, darkred, firebrick, indianred, brown, maroon, salmon, darksalmon, lightsalmon, coral, tomato, orangered, orange, darkorange, gold, goldenrod, darkgoldenrod, peru, chocolate, saddlebrown, sienna
Pinks/violets: pink, lightpink, hotpink, deeppink, palevioletred, mediumvioletred, violet, plum, orchid, thistle, magenta/fuchsia, mediumorchid, mediumpurple, lavender, purple, rebeccapurple, indigo, darkmagenta, darkviolet, blueviolet
Blues/teals: blue, mediumblue, darkblue, navy, royalblue, dodgerblue, cornflowerblue, steelblue, lightskyblue, skyblue, deepskyblue, lightblue, powderblue, lightsteelblue, cadetblue, teal, cyan/aqua, darkturquoise, turquoise, mediumturquoise, darkcyan, aquamarine, mediumaquamarine, lightseagreen, mediumseagreen, seagreen
Greens/olives: green, darkgreen, forestgreen, lime/limegreen, lawngreen, chartreuse, greenyellow, yellowgreen, olivedrab, darkolivegreen, olive, yellow, khaki, darkkhaki, palegoldenrod
Neutrals/browns: black, white, gray/grey, darkgray/darkgrey, dimgray/dimgrey, lightgray/lightgrey, slategray/slategrey, darkslategray/darkslategrey, lightslategray/lightslategrey, gainsboro, silver, whitesmoke, snow, floralwhite, linen, seashell, oldlace, beige, ivory, cornsilk, blanchedalmond, bisque, antiquewhite, navajowhite, moccasin, papayawhip, peachpuff, sandybrown, tan, burlywood, wheat, rosybrown
Blues/grays/lights: aliceblue, azure, mintcream, honeydew, ghostwhite, lavenderblush, lavender, mistyrose, lightcyan, lightgoldenrodyellow, lightyellow, lightgreen, palegreen, paleturquoise, palevioletred

When a name beats a hex value

Named colors win when the exact hue is not yet the point. In a prototype, `background: tomato` communicates intent ('we want something tomato-ish here') in a way a hex never can. The same is true in design-token documentation, where `--error: firebrick` reads better than `--error: #B22222` in a bullet point, and in tests, where asserting against an expressive keyword makes failures explainable.

There is a cheaper reason to love them too: they are self-documenting. `color: gold` in a chart legend is a sentence; `color: #FFD700` is homework. For throwaway exploration the readability of a keyword is worth more than the precision you are not using yet.

When a name is a trap

The traps are real. There is no consistent rule to remember which of the 148 your reader knows — hotpink is a specific, saturated magenta-pink, not 'sort of pink'. Aliases multiply confusion (gray and grey are both valid and identical, and slack `green` implies a pure #008000 that most teams do not actually want). And a name carries assumed meaning: a colleague will read `--brand: purple` as a decision, not a placeholder.

The sharpest trap is semantic. `color: green` in a report about environmental data collides with the pre-existing meaning of the word in that context. The moment a colour name is doing double duty as content, switch it to hex or a token.

Find the closest named colour to any hex

When you have a hex and want its nearest keyword, the honest way to compare is perceptual distance — the OKLCH space, not raw RGB difference. Take your value, compute its position, and pick the named colour with the smallest distance. In practice the closest keyword is usually a small shrug: your carefully tuned #5833FF lands nearest to rebeccapurple, which confirms you are one step away from a name that ships.

You can run that comparison by hand with the colour converter: paste your hex and read the OKLCH output, then test candidate keywords until one lands close. Or skip the arithmetic — the colour names tool measures all 148 keywords against your value in OKLab and lists them closest first. If nothing is within a perceptually small distance, use the hex — approximating a precise colour down to a name you half-like is the worst trade in this article.

The ones worth remembering

Most names are for completeness; these do real daily work and are worth committing to memory:

• black, white, gray, silver — the four reliable neutrals
• red, green, blue, yellow, orange — status-color primaries
• tomato, coral, gold, skyblue, dodgerblue — pleasant mid-tones for charts and accents
• crimson, firebrick, indigo, deeppink, rebeccapurple — unmistakable statement colours