How many CSS named colors are there?

148 in CSS Color Module Level 4 (the most recent stable spec). The list extends the original X11 colors (1985), adds `rebeccapurple` (2014), and keeps several historical synonyms like aqua/cyan.

Are CSS named colors supported in all browsers?

Yes — every modern browser supports the full Level 4 list. `rebeccapurple` is the newest and is supported in Chrome 38+, Firefox 33+, Safari 9+. Use named colors freely.

Why use named colors at all?

Readability in code, and a stable mental model in conversation. color: tomato is faster to scan than a HEX. For production design systems, prefer tokens — but for utilities, demos, and one-offs, named colors are fine.

Is the matching the same as for Pantone?

Same metric — CIEDE2000 in CIE Lab. The only difference is the reference set: ~148 named colors here vs ~280 Pantone references in our matcher.

Can I match Tailwind color names instead?

Not in this tool — Tailwind names map to scales (50–950), not single colors. For Tailwind, generate a custom scale around your HEX with the Tailwind Palette Generator.

CSS reference

CSS Color Name Finder

Find the closest CSS named color (from the W3C CSS Color Module Level 4 spec — 148 named colors) for any HEX value. CIEDE2000 perceptual matching, ranked top 8.

All 148 CSS Color Module Level 4 named colors covered
CIEDE2000 perceptual matching (same as our Pantone matcher)
Top 8 ranked by ΔE
Click-to-copy the name or the HEX

Direct answer

CSS supports 148 named colors by keyword (e.g. tomato, rebeccapurple). Most are historical X11 names from 1985. We match any HEX to its closest name using CIEDE2000 ΔE in CIE Lab space.

Input HEX

Closest CSS name

blueviolet · ΔE 5.36

Top 8 matches

blueviolet

#8A2BE2 · ΔE 5.36

slateblue

#6A5ACD · ΔE 8.73

darkorchid

#9932CC · ΔE 8.76

darkviolet

#9400D3 · ΔE 9.29

mediumslateblue

#7B68EE · ΔE 9.99

blue

#0000FF · ΔE 12.03

mediumpurple

#9370DB · ΔE 13.68

royalblue

#4169E1 · ΔE 14.65

When this saves you time

Real workflows where css color name finder replaces tedious manual work or an in-app subscription tool.

Quick prototypes

Use a named color in a CSS prototype

Quick demos read more cleanly with <code>color: tomato</code> than <code>color: #FF6347</code>. The finder gives you the closest readable name.

Code reviews

Spot 'almost-standard' values in legacy CSS

If a stylesheet has <code>#FF6346</code>, the finder reveals it's effectively tomato (#FF6347, ΔE 0.4) — a candidate for cleanup to a named color or token.

Design tokens

Pick a semantic name for a token

Need to name a new accent color? See what CSS already calls things in that neighborhood — useful inspiration for descriptive token names.

Documentation

Explain a color in writing

Writing docs that reference colors — 'closer to lavender than indigo' communicates faster than raw hex codes.

How it works

The methodology — every transformation documented so the output is reproducible.

Parse the input HEX

Convert to sRGB → CIE XYZ → CIE Lab using D65 illuminant.

Compute ΔE2000 to every named color

Each of the 148 CSS named colors is pre-converted to Lab; we compute CIEDE2000 distance against the input Lab.

Rank ascending

Lowest ΔE wins. Top 8 surface so you can pick by name preference, not just numeric proximity.

Copy the name or HEX

Both forms click-copy. The CSS name works directly in any modern browser CSS.

Worked examples

Input	Result	Notes
#FF6347	tomato (ΔE 0.0)	Exact match. Named color is the canonical encoding.
#7A3DFF	blueviolet (ΔE 6.4)	No close named color — input is more saturated than any X11 keyword.
#663399	rebeccapurple (ΔE 0.0)	Added to CSS in 2014 in memory of Rebecca Meyer. Exact named match.
#FFC0CB	pink (ΔE 0.0)	The actual CSS pink — brighter than what most designers call 'pink'.

Common mistakes to avoid

Treating ΔE > 5 as a match

When the closest name is ΔE 8 away, there is no good CSS-named equivalent — use the HEX directly. Don't force a name on a color that doesn't have one.

Naming clashes (gray vs grey)

CSS accepts both spellings (`gray` = `grey`). Pick one for your codebase and stick with it; mixed spellings hurt searchability.

Assuming pink is what you think it is

CSS pink (#FFC0CB) is brighter than the everyday designer 'pink'. The named color may not match your mental model — confirm visually.

Forgetting `aqua` === `cyan`

CSS has duplicates: aqua/cyan, fuchsia/magenta. The finder may report either — they're identical.

Frequently Asked Questions

The history behind CSS named colors

Most CSS named colors come from the X11 window system color list, established in 1985 and shipped with rgb.txt. Names like cornflowerblue, papayawhip, and peachpuff are unchanged since then. CSS 2.1 added 16 basic colors plus orange; CSS 3 incorporated the X11 list; CSS 4 added rebeccapurple (#663399) in 2014 in memory of Rebecca Meyer.

Why CIEDE2000 instead of RGB distance

Naive RGB Euclidean distance gives nonsense matches because human perception is not uniform in RGB. CIEDE2000, computed in CIE Lab, is the published industry standard for perceptual color difference — same metric we use for Pantone matching. ΔE 1 ≈ just-noticeable difference under standard conditions.

When to use named vs hex vs tokens

Production design system: use design tokens (var(--primary)). Never inline HEX or named.
Quick prototype / utility CSS: named colors read better in code review.
Specific brand value: HEX or HSL channel variable — names are too imprecise.

CSS Color Name Finder