CSS color names

Almost all of these keywords were inherited from the X Window System's rgb.txt, a file that accumulated colour names through the 1980s as people added whatever they happened to need, and it grew without ever being designed.

HTML picked up a subset, browsers implemented rather more than the subset, and CSS eventually standardised what browsers were already doing. One name, rebeccapurple, was added later and deliberately, in memory of the daughter of a web standards contributor.

Its inconsistencies are worth knowing before you rely on it:

• darkgray (#a9a9a9) is lighter than gray (#808080). The dark- prefix was applied to a different base colour than the plain name.
• green is #008000, a fairly dark green. The bright one people expect is lime.
• Coverage is wildly uneven: there are dozens of near-white and pastel names, and very few useful mid-tones.
• Several pairs are identical: aqua and cyan, fuchsia and magenta, and every -gray/-grey spelling. They are marked above.

None of that makes them wrong, but it does mean you cannot build a ramp from them. Two names that sound like neighbours can be far apart, and two that sound unrelated can be identical.

Yes for prototypes, debugging and throwaway work. outline: 2px solid hotpink while hunting a layout bug is faster and more readable than a hex code, and it is obviously temporary.

No for a design system. Define custom properties with names that describe the role (--surface-sunken, --text-muted) rather than the hue. Role names survive a rebrand; --tomato does not.

And when a tool tells you a sampled colour "is" a keyword, check the distance. Out of 16.7 million possible colours, 138 have names. The odds that a photographed pixel is exactly one of them are essentially zero, which is why the image picker shows the closest name with its ΔE rather than pretending it matched.