🎨 All Named CSS Colors

What are named CSS colors?

CSS color keywords are named colors you can use directly in any CSS or HTML file without typing a hex code. Instead of color: #4682b4 you write color: steelblue. The browser understands both identically. There are 148 named colors in the current CSS specification — from the familiar (red, blue, green) to the specific (rebeccapurple, papayawhip, cornflowerblue).

Where do the names come from?

Most CSS color names originate from the X11 color system developed in the 1980s for Unix workstations — which is why the list contains names like thistle, lavenderblush, and peachpuff that a modern naming committee would probably not choose. They were added to early browsers for compatibility and have been part of the web standard ever since. One exception: rebeccapurple was added in 2014 in memory of Rebecca Meyer, the six-year-old daughter of web standards developer Eric Meyer, who died on her birthday that year. It is the only CSS named color with a personal story.

How to use named colors in CSS

Named colors work anywhere a color value is accepted in CSS:

/* All of these are valid */
color: tomato;
background-color: cornflowerblue;
border: 2px solid goldenrod;
box-shadow: 0 2px 8px rgba(102, 51, 153, 0.3); /* rebeccapurple */
fill: steelblue; /* SVG */

Named colors are fully supported in all modern browsers and are case-insensitive — SteelBlue, steelblue, and STEELBLUE are identical. Each named color has an exact hex equivalent that never changes. Click any color below to see its full PIGMENTUM page with 12 color formats, similar shades, lightness variants, and accessibility contrast ratings.