CSS Named Colors

All 148 named colours

CSS defines 148 colour keywords. They are case-insensitive, work anywhere a colour is accepted, and are exactly equivalent to their hex values — tomato and #FF6347 are the same colour to the browser.

The final column shows the best contrast ratio achievable against pure black or pure white text, which tells you at a glance whether the colour can carry text. Green means it meets WCAG AA for body text (4.5:1), amber means large text only (3:1), red means neither.

Where the names came from

The list is a historical accident rather than a designed palette. Sixteen colours came from the Windows VGA palette into HTML 3.2: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white and yellow. Those sixteen are the only ones in the HTML 4.01 specification.

The remaining 130 arrived from the X11 window system colour database, where they had been contributed over years with no coordination. That explains the inconsistencies:

• gray (#808080) is darker than darkgray (#A9A9A9). X11 and VGA disagreed and both names survived.
• green (#008000) is much darker than lime (#00FF00), which is the actual pure green.
• Both gray and grey spellings work for every grey keyword.
• aqua and cyan are identical, as are fuchsia and magenta.

rebeccapurple (#663399) is the only addition since. It was added to CSS Color Level 4 in 2014 in memory of Rebecca Meyer, the six-year-old daughter of CSS pioneer Eric Meyer; purple was her favourite colour and the hex value nods to the shorthand #639.

Modern colour syntax

Named colours are convenient for prototypes and debugging. Production design systems use notations that support alpha and perceptual manipulation.

/* Legacy */
color: #FF6347;
color: rgb(255, 99, 71);
color: rgba(255, 99, 71, 0.8);

/* Modern space-separated syntax */
color: rgb(255 99 71 / 80%);
color: hsl(9 100% 64% / 80%);

/* Perceptually uniform — the current best practice */
color: oklch(0.7 0.19 34);

/* Relative colours: derive from an existing value */
--hover: oklch(from var(--brand) calc(l - 0.1) c h);

oklch() matters because HSL is not perceptually uniform: hsl(60 100% 50%) (yellow) looks far brighter than hsl(240 100% 50%) (blue) despite identical stated lightness. In OKLCH the lightness value corresponds to what the eye actually perceives, so a palette built by varying L has genuinely even steps. It is supported in every major browser since 2023.

Convert between all these formats with the colour converter.

Using colour accessibly

WCAG 2.2 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt, or 14pt bold) at level AA. Level AAA raises these to 7:1 and 4.5:1.

Most named colours fail against white. yellow on white is 1.07:1 — effectively invisible. gold, lime, cyan and aqua are similarly unusable for text.

Check any pair with the contrast checker, and read the colour accessibility guide for the full requirements.

Frequently Asked Questions