CSS defines 148 colour keywords you can write directly — tomato, rebeccapurple, cornflowerblue. They are convenient for prototyping and debugging, where a memorable name beats looking up a hex value.
How to use the Named CSS Colors
- Browse or search the list of named colours
- Click any swatch to copy its name or HEX value
- Use names for prototyping; move to custom properties for production
Where named colours came from
The list is a historical accident. Most of it originates in the X Window System's colour database from the 1980s, which was assembled informally over years — which is why it contains four names for off-white variations and the notorious pair gray and grey, both valid and identical.
It also contains genuine oddities. darkgray is lighter than gray, because they entered the list from different sources at different times. The naming is not systematic and should not be relied on to be.
One name was added deliberately and recently: rebeccapurple (#663399) was standardised in 2014 in memory of Rebecca Meyer, the daughter of CSS pioneer Eric Meyer, who died aged six. It is the only colour in the specification added as a tribute.
When to use them, and when not to
Named colours are excellent for throwaway work — debugging layout with outline: 1px solid red, sketching a prototype, writing an example.
They are a poor basis for a real design system. The palette is arbitrary rather than designed, the names give no sense of relationship, and nothing in the list is tuned for contrast. Production colour belongs in CSS custom properties with semantic names (--surface, --text-muted) that can be themed, not scattered keywords.
Frequently asked questions
How many CSS named colours are there?
148, including the duplicate British and American spellings of grey. All modern browsers support the full set.
Is gray the same as grey?
Yes, identical. Both spellings are valid for every colour containing the word — gray, grey, darkgray, darkgrey and so on all work.
Why is darkgray lighter than gray?
A historical inconsistency. The names came from different sources at different times and were standardised as-is for backwards compatibility. darkgray is #A9A9A9; gray is #808080.
Should I use named colours in production?
Prefer CSS custom properties with semantic names. The named palette is arbitrary, gives no indication of relationships, and is not designed for contrast. Named colours are best kept for prototyping and debugging.