CSS REFERENCE · 147 COLORS

CSS Color Names — Complete Reference

Every CSS named color from the Color Module Level 4 spec — 147 of them — in one searchable grid. Sort by name, hue, or perceptual lightness. Click any swatch to copy the HEX.

Showing 148

Four things worth knowing about CSS named colors

The list looks haphazard because it is — these names accumulated over thirty years of web evolution. A few facts that explain the weirdness.

147 keywords, 142 distinct colors

There are 147 valid color keywords in CSS Color Module 4, but only 142 distinct hex values — gray and grey, cyan and aqua, magenta and fuchsia, and a couple of darkgray/darkgrey-style pairs are all aliases.

X11 origin

Most names come from the X11 color list — a 1980s X Window System palette named by Paul Ravelling and others. That is why you see names like "papayawhip" and "blanchedalmond" that no design tool would ship today.

British and American spellings

Every name with "gray" has a "grey" alias and vice versa. Browsers accept both. CSS Color 4 standardized this — earlier specs were inconsistent and some browsers shipped only one form.

rebeccapurple has a story

Added in CSS Color 4 in honor of Rebecca Meyer, the daughter of CSS spec co-editor Eric Meyer, who died of cancer at age 6. She had picked the color herself. It is the only named color added to CSS by community proposal.

When to use them

Named colors are for prototypes and tests, not production.

CSS named colors are convenient — typing "tomato" is faster than "#FF6347" — and most of them are perfectly serviceable hues. But the palette is unprincipled: 17 different reds, no consistent lightness ladder, several names that name the same color, and a few oddities ("papayawhip"?) that no design system would touch.

In production code, use HEX (for handoff), OKLCH (for design tokens), or your design system's palette tokens. Named colors are most useful for two things: quick prototypes ("just give me red") and CSS tests where the name reads more clearly than a hex value.

One exception: rebeccapurple. Use it. The color is decent and the history is worth honoring.

Frequently asked questions

How many CSS named colors are there?

147 keywords, of which 142 are distinct colors. The remaining five are aliases (gray/grey, cyan/aqua, magenta/fuchsia, plus a couple of darkgray/darkgrey-style pairs).

Can I use CSS color names in HTML attributes too?

Yes — anywhere CSS color values are accepted, named colors work. That includes inline style attributes, SVG fill / stroke attributes, and the deprecated HTML color attribute. They do not work in canvas fillStyle until you assign them as a string.

Are CSS named colors case-sensitive?

No. "Tomato", "TOMATO", and "tomato" all work the same. Convention is all-lowercase.

Why is "transparent" not on this list?

"transparent" is technically a CSS color keyword too, equivalent to rgba(0,0,0,0). We omit it because it has no displayable swatch — it is conceptually a color, but visually nothing.

What about currentColor and system colors?

currentColor is a dynamic keyword that takes the value of the element's color property — not a fixed color. System colors (Canvas, CanvasText, LinkText, ButtonFace, etc., from CSS Color 4) are resolved by the browser based on the user's OS theme. Neither is included here because they have no fixed hex value.

What's the closest named color to my brand color?

Our color converter does this — paste any color and the closest CSS named color (matched in OKLab space for perceptual accuracy) appears alongside the conversion results.