CSS Named Colors Reference

All 148 CSS named colors — search, sort, and copy values

147 colors
Copied!

What is CSS Named Colors Reference?

CSS Named Colors Reference is a complete, searchable catalog of all 148 named colors defined in the CSS Color Level 4 specification, plus the special keywords transparent and currentColor. Each color is displayed as a swatch alongside its name, hex code, RGB values, and HSL values so you can pick the right shade without switching tools.

CSS named colors have existed since CSS1, but the full set of X11/SVG names was standardized in CSS2.1 and the Color Level 4 spec. Names like rebeccapurple (added in 2014 in honor of web developer Eric Meyer's daughter) and the full gray scale from aliceblue to whitesmoke are supported across all modern browsers.

Frontend developers use this reference to avoid memorizing hex codes for common colors during prototyping, to verify which names are valid CSS identifiers, and to find perceptually similar colors grouped by hue family. Designers use it to communicate color intent in pull request comments — writing color: cornflowerblue is far more readable than color: #6495ed.

The search box filters by name in real time, and clicking any swatch copies the CSS keyword to your clipboard so you can paste it directly into your stylesheet.

How to Use

  1. Type a color name or partial name in the search box to filter the palette in real time.
  2. Browse by hue family — the colors are grouped from reds and pinks through oranges, yellows, greens, blues, purples, and neutrals.
  3. Click any swatch to copy its CSS name to your clipboard.
  4. Hover over a swatch to see the full hex, RGB, and HSL values in the tooltip.
  5. Use the copied name directly in any CSS property: color: cornflowerblue; or background: paleturquoise;.

Examples

Search: 'blue'

→ Returns aqua, blue, blueviolet, cadetblue, cornflowerblue, darkblue, deepskyblue, dodgerblue, lightskyblue, mediumblue, midnightblue, navy, powderblue, royalblue, skyblue, slateblue, steelblue

Search: 'gray' or 'grey'

→ Returns all 10 gray variants — both spellings are valid CSS (darkgray/darkgrey, lightgray/lightgrey, etc.)

Click swatch for 'tomato'

→ Copies 'tomato' to clipboard — equivalent to #ff6347 or rgb(255, 99, 71)

Frequently Asked Questions

Are CSS named colors supported in all browsers?

Yes. All 148 named colors are supported in every modern browser including Chrome, Firefox, Safari, and Edge. They are also valid in SVG, Canvas, and CSS-in-JS libraries.

What is the difference between 'gray' and 'grey'?

Both spellings are valid CSS and produce the same color (#808080). The same applies to darkgray/darkgrey, lightgray/lightgrey, darkslategray/darkslategrey, lightslategray/lightslategrey, and slategray/slategrey.

Can I use named colors in JavaScript?

Yes. Any CSS color string accepted by the browser's color parser — including named colors — can be used in canvas fillStyle, element.style.color, and CSS-in-JS libraries.

What is rebeccapurple?

rebeccapurple (#663399) was added to the CSS specification in 2014 as a tribute to Rebecca Alison Meyer, daughter of CSS expert Eric Meyer, who passed away that year. It is the only named color with a personal origin story.

How do named colors compare to Tailwind or Material Design palettes?

CSS named colors are a browser standard and require no build step or dependency. Tailwind and Material palettes offer more systematic scales (50–950 shades) but are framework-specific. Named colors are best for quick prototypes and readable code; design system palettes are better for production UIs.

Related Tools