Free · No install required
CSS Named Colors Reference
All 148 CSS named colors. Searchable, filterable by hue, copy as name, hex, or rgb.
139 of 139 — click name, hex, or rgb to copy.
Why a CSS named colors reference
CSS gives you 148 color keywords — tomato, peachpuff, dodgerblue, rebeccapurple — that work in any browser without further setup. They’re useful for quick prototyping, error messages, and anywhere you’d rather write a memorable name than a hex code.
This is the searchable list, grouped by hue, with copy-to-clipboard for the name, the hex, and the rgb() form.
Named colors vs design tokens
Named colors aren’t a design system. They’re a curated set of recognizable swatches with no consistent scale across them — lightblue and lightgreen aren’t the same lightness, and darkred and darkblue aren’t the same darkness.
For production work, define your own tokens in OKLCH and reference them via CSS custom properties. Use named colors as starting points or shortcuts in scratch code.
Use cases
- Quick prototypes:
background: papayawhipreads better thanbackground: #ffefd5. - Mocking states: red/green/orange named colors at a glance for success/error/warning placeholders.
- CSS art: when you’re making a small illustration in pure CSS, named colors keep the code readable.
- Tutorials: more memorable for readers than a string of hex digits.
How to use
- 1
Filter by hue group
Use the chips at the top to focus on red, blue, green, etc. Helpful when you know the rough hue but not the exact name.
- 2
Search by name or hex
Type a partial name or hex value to filter. The list updates live.
- 3
Copy in your preferred format
Click the name to copy the color keyword. Click the hex to copy the hex value. Click rgb to copy the rgb() string.
DevZap Premium
Use this directly on any page with DevZap
DevZap brings every tool into your browser as a one-click extension. No tab switching, no copy-pasting URLs. Inspect, generate, and export from any page you visit.
FAQ
Frequently asked questions
Should I use named colors in production CSS?
For prototypes and quick demos, sure. For production design systems, prefer your own tokens over named colors — named colors are arbitrary historical choices and don't compose into a coherent palette. Use named colors as inspiration, then quantize to your design system scale.
Why do `aqua` and `cyan` look identical?
They are the same color (#00ffff). The CSS spec keeps both for historical compatibility — `cyan` came from X11 aliases and `aqua` from HTML 4. Same with `fuchsia` and `magenta`.
Where does this list come from?
The CSS Color Module Level 4 spec, which standardized the 148 names that every modern browser supports. Some browsers support additional aliases for legacy compatibility, but those are not in the official spec.
What's the deal with `rebeccapurple`?
Added to the spec in 2014 as a tribute to Rebecca Meyer, daughter of Eric Meyer (CSS pioneer). It's #663399, a vivid purple. The story is moving — look it up.
You might also like
Related tools
Color Converter — HEX, RGB, HSL, OKLCH
Convert any color between HEX, RGB, HSL, and OKLCH instantly. WCAG contrast against white shown live.
color Open the Color Converter — HEX, RGB, HSL, OKLCH tool
Tailwind Colors Palette Browser
Browse the Tailwind v4 default palette. Copy as utility class, HEX, or OKLCH with one click.
color Open the Tailwind Colors Palette Browser tool
WCAG Contrast Checker
Check WCAG 2.2 contrast ratios for any pair of colors. Get AA / AAA pass/fail at a glance.
color Open the WCAG Contrast Checker tool
Ready to make your browser smarter?
Install DevZap free. Upgrade when you're ready.