PlayInfoBox

Home /Converter /How CSS Named Colors Work

How CSS Named Colors Work

CSS lets you write "Tomato" or "SlateBlue" instead of a hex code, but the list behind those names is older, stranger, and less systematic than most people assume.

Named colors are predefined keywords that map to a fixed hex value

Writing color: tomato; in CSS is functionally identical to writing color: #FF6347; β€” the browser simply substitutes the keyword for its defined hex value, with no calculation involved.

The CSS specification defines 147 named colors

This includes both American and British spelling variants for some colors (gray and grey, for example), which both resolve to the same value, so the count depends slightly on whether spelling variants are counted separately.

The list originated outside CSS, in X11 and SVG

Most of these names were not invented for the web β€” they trace back to the X11 windowing system's color list from the 1980s, which SVG later adopted, and CSS in turn adopted from SVG rather than designing an original palette.

The names are not evenly or predictably distributed across hues

Names like Tomato (a red-orange), SlateBlue (a muted purple-blue), and Chartreuse (a bright yellow-green) came from informal historical naming rather than a designed color system, so guessing a hue from its name alone is unreliable.

16 basic colors versus 131 extended colors

The original CSS1 specification defined only 16 basic named colors (black, white, red, and so on); the much larger extended list was added later, adopted wholesale from the SVG/X11 color keyword set.

The transparent keyword is a special case

Unlike the other named colors, transparent does not map to an opaque hex value β€” it represents fully transparent black, functionally equivalent to rgba(0,0,0,0).

Why the names feel so historically arbitrary

The X11 color list that these names descend from was assembled in the 1980s for early Unix graphical systems, largely by informally naming colors after recognizable objects, fabrics, and pigments rather than by any systematic hue-based scheme. CSS, and SVG before it, adopted that list wholesale for compatibility and convenience rather than redesigning it, which is why the names feel more like a historical artifact than a deliberately organized color system.

When named colors are useful, and when hex or RGB is the better choice

Named colors are genuinely useful for quick prototyping, readable example code, or CSS keywords like transparent and currentColor that have no numeric equivalent to type out. For anything requiring a precise brand color, a design system's exact palette, or fine-grained control, hex or RGB values are the more reliable choice, since the named-color palette is fixed and cannot represent most colors exactly.

Frequently Asked Questions

How many named colors does CSS actually support?

The CSS Color specification defines 147 named color keywords, though the exact count depends on whether spelling variants like gray/grey are counted as one color or two, since both resolve to the same hex value.

Do named colors look the same in every browser?

Yes. Because named colors are standardized in the CSS specification with fixed hex values, all modern browsers render them identically β€” there is no browser-specific variation the way there sometimes is with system fonts or default form styling.