CSS Color Names
All 148 named colors supported by every browser, searchable by name or hex and grouped into color families.
Shades of Red
Shades of Orange
Shades of Yellow
Shades of Green
Shades of Cyan
Shades of Blue
Shades of Purple
Shades of Pink
Shades of Brown
Shades of Gray
Shades of White
How to use the CSS color names list
- Search by name, such as
blue, to see every keyword that contains it, or by hex, such as#ff7f50, to find the name for a value. - Narrow the grid with one of the 12 color-family filters.
- Click a swatch to copy its hex code.
- Open a color's own page for its conversions, contrast results, shades and harmonies.
148 names, 139 distinct colors
CSS Color Module Level 4 defines 148 named colors. Several are aliases, so together they cover 139 distinct values:
aquaandcyanare both#00FFFF, andfuchsiaandmagentaare both#FF00FF.- Seven grays accept both spellings:
gray/grey,darkgray/darkgrey,dimgray/dimgrey,lightgray/lightgrey,slategray/slategrey,darkslategray/darkslategreyandlightslategray/lightslategrey.
The list mixes the 16 original HTML colors with names inherited from the X11 color set, which explains quirks such as darkgray (#A9A9A9) being lighter than gray (#808080).
About rebeccapurple and letter case
rebeccapurple (#663399, rgb(102, 51, 153)) was added in CSS Color Level 4 in memory of Rebecca Meyer, and it is the newest keyword on the list.
Keywords are case-insensitive: Tomato, TOMATO and tomato all resolve to #FF6347, though lowercase is the usual convention. transparent and currentcolor are color keywords too, but they are not counted among the 148.
When names beat hex, and when they don't
Names are readable at a glance, which helps in prototypes, teaching material and debugging: outline: 2px solid red is instantly recognizable in a code review. They also work anywhere a CSS color is accepted, including inline style attributes and SVG.
For production UI, hex or oklch() tokens are the better choice. The named colors were never designed as a system, so their saturation and lightness jump around, and 139 values cover a tiny slice of the 16,777,216 colors in 24-bit sRGB. To turn any name into other formats, paste it into the color converter.
A page for every named color
Each name links to its own page at /colors/ plus the name (the grey spellings share their gray twin's page), for example navy (#000080). Each page collects the color's conversions to other formats, its contrast results, its shades and its harmonies. Related names are grouped in family hubs such as shades of blue.
Frequently asked questions
How many CSS color names are there?
There are 148. Because of aliases such as gray and grey or aqua and cyan, they cover 139 distinct colors.
Are CSS color names case-sensitive?
No. Tomato, TOMATO and tomato all mean #FF6347, though lowercase is the common style.
What is rebeccapurple?
rebeccapurple is #663399, or rgb(102, 51, 153). It was added in CSS Color Level 4 in memory of Rebecca Meyer.
Are HTML color names the same as CSS color names?
Yes. The keywords are defined in CSS and work wherever a CSS color is accepted, including style attributes in HTML. The 16 original HTML names, such as navy, teal and silver, are part of the same list.
Why is darkgray lighter than gray?
The names come from different sources. darkgray (#A9A9A9) comes from the X11 color set, while gray (#808080) comes from the original HTML colors, so the two were never designed as a scale.
Should I use color names in production CSS?
Rarely. They are fine for prototypes and quick debugging, but a design system is easier to maintain with hex or oklch() tokens that follow a deliberate scale.