How many CSS named colors are there?

147 in CSS Color Module Level 4: 140 from the original X11 list plus rebeccapurple (added in 2014 in tribute to Rebecca Meyer) and small additions like ColorText system colors.

Should I use named colors in CSS?

Mostly no for design work — they're hard-coded and inflexible. But they're useful for placeholder/demo content and for compactness in toy examples (red is shorter than #ff0000).

What's the difference between this and color-name-from-hex?

This tool requires an exact match from the named CSS palette. color-name-from-hex returns the closest match (including xkcd-style names) even for arbitrary hex values.

css named colors · live filter · local · 148 colors

Search every CSS named color

Q: Is anything sent to a server?

No — pure lookup table in the browser.

Filter the full CSS named-color palette by name or HEX. Click any swatch to copy the name. All 148 keywords supported by every modern browser.

Color Name Lookup

Total

144

css names

Visible

144

all

Filter

—

query

Status

ready

live

input · color

output · preview

Live preview

Showing first 24 of 144 swatches. Click any tile in the catalog to copy its name.

Quick Start

How to find a CSS named color

Search by name or HEX, click any swatch to grab the canonical name.

01
Search
Type a partial name (blue) or a HEX prefix (#3b).
Colors round-trip through a normalised OKLCH representation, so manipulations (lighten, mix, contrast) preserve perceptual uniformity per CSS Color 4.
searchOKLCHCSS Color 4perceptuallive
q · colorblue · sRGB
```
lightblue
blue
blueviolet
```
loaded · normalisedOKLCH · ready
02
Scan results
Browse with the live swatch and HEX value beside each name.
Format conversion handles hex, rgb(), hsl(), oklch(), color(display-p3 …) with proper gamut mapping when crossing colour spaces.
readhex · rgb · hslP3gamut-mappedlive
rows · options30+ · live
```
royalblue #4169E1
```
options applied · livelive
03
Copy the name
Click a tile to copy the CSS keyword to clipboard.
Contrast and accessibility checks evaluate against WCAG 2.2 AA (4.5:1) and AAA (7:1) thresholds; APCA is offered when contrast is the goal.
copyWCAG 2.2APCAAA · AAAcontrast
✓ · convertedname · ready
```
✓ Copied royalblue
```
converted · liveWCAG-aware
04
Drop in CSS
Paste straight into color:, background:, or anywhere CSS expects a color.
Copy formats any swatch in the chosen syntax (#aabbcc, rgb(170 187 204), etc.); downloads emit CSS variable blocks or palette JSON.
shipclipboardCSS varspalette JSONblob
ok · copiedready · done
```
color: royalblue
```
shipped · ready to shipsuccess

Pro tips

Colour work that survives accessibility audits

Use OKLCH for manipulation

OKLCH is perceptually uniform — lightness changes look uniform. hsl() isn’t, and produces muddy mid-tones.

Test against WCAG 2.2

4.5:1 for normal text (AA), 7:1 for AAA. Use Contrast Checker before shipping.

Mind gamut clipping

P3 colours that exceed sRGB get clipped on standard displays. Choose relative colorimetric in CSS Color 4.

Colour blindness affects 8%

Use the Color Blindness simulator to check critical UI before launch.

Don’t hardcode hex

Use CSS variables. Light/dark themes become trivial when colours are tokenised.

Dark mode isn’t inverted

Don’t simply invert lightness — desaturate slightly and re-pick accents. Pure-inverted UIs look harsh.

Use Cases

When to use named colors

Prototypes, fallbacks, learning, accessibility QA.

Quick prototypes

<code>color: tomato</code> reads better than <code>#FF6347</code> in a comp. Conversions go through OKLCH so perceptual lightness stays uniform across hues — a 50% L blue looks as bright as a 50% L yellow. HSL fakes this and produces muddy mid-tones, OKLCH solves it per CSS Color 4.

WCAG 2.2 AA

Email templates

Named colors render reliably in legacy email clients. WCAG 2.2 contrast is sampled live for AA (4.5:1) and AAA (7:1) — flip foreground/background to test both directions. APCA is offered when contrast itself is the goal (e.g., dataviz).

P3-aware

Style demos

Showcase examples without hunting for the right HEX. Output covers hex, rgb(), hsl(), oklch(), and color(display-p3 …) for CSS Color 4. Drop straight into Tailwind config, CSS custom properties, or Figma without re-typing values.

perceptually-uniform

QA & debug

Compare what the browser thinks a HEX maps to. Pair with the Contrast Checker before shipping any new theme. Catches accessibility regressions before they become bugs filed against you by users with low vision.

gamut-safe

Learning CSS

Memorable references beat hex codes for beginners. Tokens drop straight into Figma variables, Tailwind config, or CSS custom properties. Theme switching becomes a single variable swap rather than a search-replace across stylesheets.

a11y-ready

Accessibility checks

Verify whether your brand color is also a CSS keyword. Gamut-aware: tools warn before you ship a P3 colour that clips on sRGB displays. Choose the appropriate fallback strategy (relative colorimetric vs perceptual) per CSS Color 4 spec.

a11y

FAQ

Frequently asked questions

How many named colors are there?

148 keywords are standardised by CSS Color Module Level 4. We list them all.

Are 'aqua' and 'cyan' the same?

Yes — both map to #00FFFF. CSS has several aliases like this.

Can I use named colors in legacy IE?

Yes — even IE6 supports the 16 basic keywords. Modern browsers accept all 148.

What about 'transparent' and 'currentColor'?

These are CSS keywords but not colors per se. They aren't in this list.

Is anything sent to a server?

No — the keyword list is bundled with the page; filtering is local.

Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

47 in queue·8 shipped this month

Request queued. Thanks!