CSS Named Color Validator

CSS named colors: 147 keywords from HTML 4 to the X11 palette

CSS named colors are the human-readable keywords — red, cornflowerblue, rebeccapurple — that browsers resolve to a specific sRGB triplet. The current list, defined by CSS Color Module Level 3, contains 147 distinct names (148 if you count aqua and cyan as separate entries; they map to the same hex). Validating a name means looking it up case-insensitively in this fixed dictionary — there is no algorithm, just membership.

Beyond the 147 named colors, CSS also accepts a handful of special keywords: transparent (fully transparent black), currentColor (inherits the computed color property), and the deprecated system colors like ButtonFace. Modern CSS Color Module Level 4 introduces system-color() as the replacement.

A brief history: 16 from HTML 4 plus the X11 palette

The original web inherited only 16 colors from HTML 4.01: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow. CSS 2.1 added orange. CSS Color Module Level 3 then borrowed 130+ extra names from the X11 window system palette — that is where colorful entries like papayawhip, cornsilk, ghostwhite, lemonchiffon, peachpuff and mistyrose come from. The only post-2014 addition is rebeccapurple (#663399), proposed by Eric Meyer in tribute to his daughter Rebecca and adopted unanimously by the CSS WG.

Equivalence to hex, rgb() and modern color functions

Every named color has an exact hex equivalent. The browser converts at parse time:

color: red;            /* same as */
color: #ff0000;        /* same as */
color: rgb(255, 0, 0); /* same as */
color: hsl(0, 100%, 50%);

Case is irrelevant: Red, RED and red all match. Whitespace inside the keyword is not allowed — papaya whip is invalid, you must write papayawhip. The full mapping is in the CSS Color Module Level 3 spec, available as the color-name npm package or the colors dictionary on MDN.

Should you use named colors in production?

For prototypes and demos they read beautifully. For production, design systems generally prefer design tokens (CSS custom properties like --color-primary) backed by a palette of hex or oklch() values, so themes and dark mode stay coherent. CSS Color 4 also introduces oklch() and color-mix() which surpass named colors for accessibility and theming. Two pitfalls worth noting: gray and grey are both valid and map to the same color, but darkgray is paradoxically lighter than gray (X11 legacy). Avoid darkgray/darkgrey if surprise is unwelcome.

Validation strategy

There is no regex — the only correct validation is dictionary lookup. Lowercase the input, strip whitespace, then check against the 147-entry set. Useful sources: color-name and css-color-names on npm; the W3C CSS Color spec; Mozilla's --lwc-colors dictionary inside Gecko. Avoid hand-typed lists: missing one entry creates false negatives.

FAQ

How many CSS named colors are there?

147 distinct colors in CSS Color Module Level 3, plus the special keywords transparent and currentColor. If you count aqua/cyan and fuchsia/magenta as separate names, the count rises to 149.

Are CSS color names case-sensitive?

No. Red, RED and red are all valid and resolve to #ff0000. Spaces and dashes are not allowed inside the keyword.

Why does the color rebeccapurple exist?

It was added in 2014 in memory of Rebecca Meyer, daughter of CSS expert Eric Meyer. The CSS Working Group adopted #663399 (her favourite purple) as a unanimous tribute — the only named color whose origin is a memorial.

Is darkgray darker than gray?

No, and this is the most famous X11 legacy bug. darkgray is #a9a9a9, while gray is #808080 — so darkgray is actually lighter. Avoid the pair in production code.