Named CSS colors explained: the keyword list, gray vs grey, and rebeccapurple

CSS lets you write color: tomato instead of color: #FF6347, and the browser knows exactly what you mean. There are about 148 of these named colors, and they are more than a convenience: they carry some history, a few traps, and two special keywords that behave unlike any fixed color. Here is what the list actually contains and where it bites.

Where the list comes from

The named colors are a fixed, standardized set defined in the CSS Color specification. They started as a small set of 16 VGA colors, grew through an informal list that shipped with early browsers, and were eventually frozen. That means the list does not grow with your design system. You cannot register a new name, and the ones that exist map to exact RGB values that never change.

A name is just an alias for a specific sRGB value. tomato is precisely #FF6347, no more flexible than typing the hex. The browser resolves the keyword to those channels before anything else happens.

gray, grey, and the duplicate spellings

Both spellings work. gray and grey resolve to the identical value, and so do the compounds: darkgray and darkgrey, lightslategray and lightslategrey, and several more. This exists because the early lists disagreed on spelling and the standard kept both to avoid breaking pages.

Note the oddity in that table: darkgray is lighter than plain gray. The names come from different eras and were never reconciled, so trust the values, not the words.

rebeccapurple

One name has a story. rebeccapurple (#663399) was added to the specification in 2014 in memory of Eric Meyer's daughter Rebecca, who died at six. Eric Meyer is a long standing figure in the CSS community, and the color was her favorite purple. It is the only named color added for a human reason rather than a technical one, and it remains in every browser.

The limits of named colors

Named colors are handy for quick prototypes and documentation, but they are a poor foundation for real work:

• They do not cover your brand. The odds that your exact blue is on the list are near zero.
• The naming is inconsistent, as the gray table shows, so you cannot predict lightness from a name.
• They give you no systematic way to build tints and shades. For that you want HSL, where you adjust lightness while holding hue steady.

For anything beyond a throwaway value, store hex or HSL and derive the rest.

The two that are not fixed colors

Two keywords behave differently from the rest.

transparent is black with zero alpha, equivalent to rgba(0, 0, 0, 0). It is fully see through, and because the underlying channels are black it can produce a faint dark fringe when fading a colored gradient to transparent. Fading to the same color at zero alpha avoids that.

currentColor resolves to whatever the element's color property is at that point in the cascade. It is the one keyword that changes meaning depending on context, which makes it ideal for icons and borders that should track the text color automatically:

.icon { fill: currentColor; }
.box { border: 1px solid currentColor; }

Change the color and both follow, with no extra variables.

When a named color is close but not exactly right, paste it into the Color Converter to see its hex and HSL, then nudge the lightness or hue to land on the value you actually want.