CSS Color Names

Where the 148 CSS color names come from

Most of the names trace back to the color palette of the X11 window system from the 1980s, which browsers later adopted and the CSS Color module made official. That's why whimsical names like papayawhip and mistyrose sit right next to plain old red and blue. Color number 148, rebeccapurple (#663399), was added in 2014 in memory of Rebecca, the daughter of web developer Eric Meyer, who passed away at age six, it's the only name that came straight from the web community itself.

When to use names and when to use hex codes

Named colors are handy for prototypes, examples and teaching: tomato is far easier to remember than #ff6347. In production, though, hex codes win, they cover 16.7 million shades versus just 148. Watch out for the duplicates: gray and grey (and every variant of them) are the exact same color, as are aqua/cyan and fuchsia/magenta. And beware of darkgray, which is paradoxically lighter than gray, a historical quirk inherited from X11.

Names from a different era

The list comes from the colours of X11 terminals in the 1980s, chosen by programmers using whatever names were in their heads: hence oddities like «papayawhip», «lemonchiffon» and «peachpuff», which describe desserts more than colours.

There are also contradictory pairs kept for compatibility: «darkgray» is LIGHTER than «gray», because the two names come from different tables that merged badly. It is the classic detail that cannot be fixed, because thousands of pages have relied on it for thirty years.

Double spellings and synonyms

Some colours have two spellings, both valid, the American and the British: gray/grey, and all their families (darkgray/darkgrey, lightslategray/lightslategrey). They are the same colour, and the choice is purely taste.

There are also pairs of different names for the exact same value: aqua and cyan are both #00FFFF, fuchsia and magenta both #FF00FF. If a style guide asks for consistency, you have to decide which to use, because a find-and-replace on the codes will not catch them.

When a name is right and when a code is

Names are handy for prototypes, examples and teaching: «tomato» reads and sticks better than #FF6347, and in a snippet meant to be explained that is worth more than precision. Beyond that, a name is a locked choice: it cannot be lightened by a hair.

In a real project it pays to move to CSS variables: the colour is declared once and used by the project's own name («--accent»), not by the colour's name. Changing a hue then takes one line, and light and dark themes become possible.

Nearby tools

To move from a name to its code and back there is Colour converter, and to pick a colour from an image Colour picker. The readability of a pair is checked with Colour contrast checker.