CSS Named Colors: The Complete Guide to Color Keywords

Every CSS developer knows color: red; and background: navy;. Fewer know that CSS actually defines 148 color keywords, including rebeccapurple, lightgoldenrodyellow and peru. They are a small, odd, genuinely useful corner of the language — and knowing what is in the list saves you from guessing hex codes.

Where CSS color names came from

The names arrived in layers:

• The 16 classic colors came from HTML 4 in the late 1990s: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white and yellow.
• The rest came from X11 and SVG. When CSS3 adopted the SVG color keyword list, it inherited about 130 more names from the X11 window system — which is why the list includes theatrical names like papayawhip, thistle and mistyrose.
• `rebeccapurple` was the exception. In 2014 the CSS working group added #663399 under that name in memory of Rebecca Meyer, who had died of brain cancer at six years old. It was the first color keyword added to the spec by community request.

More names than colors

The 148 keywords do not describe 148 different colors, because a few are alternate spellings of the same value:

• aqua and cyan are both #00FFFF.
• fuchsia and magenta are both #FF00FF.
• The gray family ships both spellings: gray / grey, darkgray / darkgrey, dimgray / dimgrey, lightgray / lightgrey, slategray / slategrey, darkslategray / darkslategrey and lightslategray / lightslategrey.

The spelling pairs exist because American and British English disagree, and the spec decided to accept both rather than pick a fight.

Names that surprise people

A handful of keywords do not mean what their name suggests:

Two more records worth knowing: lightgoldenrodyellow is the longest keyword at 20 characters, and red is the shortest at three.

Names that are not colors

CSS reserves a few color-ish keywords that behave differently:

• `transparent` is shorthand for rgba(0, 0, 0, 0) — fully transparent black.
• `currentColor` is not a color value at all but a reference to the element's computed color, which is how borders and SVG fill can inherit text color.
• System colors such as Canvas, CanvasText, LinkText and ButtonFace follow the operating system or user theme, and are mainly useful for controls that should match the platform.

How to write them correctly

• Names are case-insensitive: DarkSlateGray, darkslategray and DARKSLATEGRAY are identical.
• Names never contain spaces or hyphens, so light goldenrod yellow becomes lightgoldenrodyellow and slate gray becomes slategray.
• There is no shorthand. red works, r does not.
• Every name equals a fixed RGB value, so it behaves exactly like the equivalent hex code everywhere — no profile or platform surprises.

Names vs hex codes: when to use which

• Use a name for prototypes, demos, quick utilities and anything where readability wins. border: 1px solid silver says more at a glance than #C0C0C0.
• Use hex or a design token when the value must be exact and stable — brand colors, theme files, anything a designer hands over as a spec. A token like --brand-500 also survives a rebrand, while a name is baked into the spec forever.
• Never assume a name is accessible. yellow and lime on white are effectively invisible, and gray at #808080 gives roughly 3.9:1 against white — enough for large text, short of the 4.5:1 that body copy needs.

You do not have to memorize the list. The color library lists named colors with their hex, RGB and HSL values side by side, and if you have a code and want the nearest name, the color name finder does the matching for you.

Try it: open RebeccaPurple in the library and read the note next to #663399, then run the same code through the contrast checker against white. It is a good reminder that "named" does not mean "safe" — every color still has to earn its contrast ratio.

Names are the human layer on top of color codes: short, memorable and sometimes delightfully strange. Use them where they help you read your own CSS, and reach for hex when precision and contrast are what matter.