Named CSS Colors Reference

How to use it

1. Type what you have. A keyword such as teal jumps straight to its row, and case is ignored, so RebeccaPurple lands in the same place. A hex value — #663399, 663399 or the three-digit #639 — finds every keyword that shares it. Press / to put the cursor in the filter.
2. Read the row: swatch, keyword, hex, the rgb, hsl and oklch notations, the family bucket, and the two contrast ratios against pure white and pure black.
3. Copy the form you need. Each row copies its keyword, its hex value or any of the three notations, so what you paste into a stylesheet is what the page showed you.
4. Link to one color. Every row owns a stable anchor, so /css-color-names#rebeccapurple opens with that color revealed — an ordinary link that works with scripting switched off.

Every color name CSS understands — all 148 of them — laid out as plain HTML you can read before a single script runs. Each row carries the keyword, a swatch, its hex, rgb, hsl and oklch notations, its contrast against white and against black, and a permanent anchor. Type a name, a hex value or a word to narrow the list; nothing you type is sent anywhere.

How it works

The keyword list is inherited, not invented. It began as the colour names shipped with the X Window System, became SVG 1.1's 147 colour keywords, was adopted wholesale by CSS Color 3 §4.3, and now sits in CSS Color 4 §6.1 with one addition: rebeccapurple, accepted in 2014.

148 keywords do not mean 148 different colors. Nine pairs of keywords resolve to the same value — aqua and cyan, fuchsia and magenta, and the seven gray/grey spellings — so the set covers 139 distinct hex values. Both spellings of a pair are real CSS, both are findable here, and each row names its partner.

Two things people look for are absent on purpose. transparent and currentColor sit in the same grammar slot yet name no fixed value, and the system colours such as Canvas resolve against the platform. Search for one and the page says so rather than showing nothing.

The table is a committed snapshot, not a lookup made while you read. Each keyword's hex comes from the spec list, the rgb, hsl and oklch notations are serialized from that hex at build time, and the two figures are WCAG 2.2 ratios against pure white and pure black. Every cell is re-derived on each test run, so a wrong digit fails the build.

Examples

rebeccapurple

rebeccapurple · #663399 · rgb(102 51 153) · hsl(270 50% 40%) · oklch(0.44 0.16 303.4) · purple · 8.41:1 on white · 2.50:1 on black

#0FF

aqua and cyan are the same color — #00ffff.

SlateGray

slategray · #708090 · rgb(112 128 144) · hsl(210 13% 50%) · oklch(0.593 0.031 248.3) · blue · 4.05:1 on white · 5.18:1 on black

dark cyan

4 colors shown

transparent

transparent is a CSS-wide keyword, not one of the 148 named colors.

#123456

#123456 is a valid color but has no CSS name — a converter can name the nearest one.

rgb(0 255 255)

rgb(0 255 255) is a color function, not a color name — a converter reads that notation.

Every example on this page is executed against the same engine that powers the tool, on every build.

Common errors

transparent is a CSS-wide keyword, not one of the 148 named colors.

The answer for transparent, currentColor, inherit, initial, unset and revert. None resolves to a fixed value, so the finder places the input instead of returning an empty list.

#123456 is a valid color but has no CSS name — a converter can name the nearest one.

Hex input that parses cleanly but matches none of the 139 named values. Guessing a nearest keyword is a different tool's answer, so the page names the gap and points at the converter.

No matching color — here's how the search works

What the heading says when the input is neither a keyword nor a hex value nor a word any row contains. The block underneath lists what the filter accepts, and Show all colors puts every row back.

Keyboard shortcuts

/

Focus the filter box