All 148 CSS named colours, searchable by name, hue family, or value, with each one's hex, RGB, HSL, and OKLCH alongside its contrast against white and black. Useful for recognising a name in someone else's stylesheet, and for finding out why the one you reached for looks nothing like its name suggests.
Step by step
01Search by name or value
Type part of a name, or a hex code, to find the nearest named colours. Useful in both directions: identifying a name you have inherited, and finding a name for a value you already have.
02Filter by hue family
Neutral, red, orange, yellow, green, blue, or purple. Browsing a family is how you discover that the greens include everything from honeydew to darkslategray.
03Open one for the detail
Every notation the colour can be written in, plus its contrast against white and black — which is usually the number that decides whether the name is usable for what you had in mind.
04Copy the form you need
The name itself for a quick prototype, or the hex and OKLCH values for anything that will end up in a design system.
Worked example
The list grew by accident across three decades, and the results are famously inconsistent. These are the ones that catch people out.
Given
Names that do not mean what they say
darkgray #A9A9A9 lighter than gray (#808080)
lightgray #D3D3D3 but lighter still - the pair is
inconsistent, not inverted
gray #808080 grey also works, both spellings
accepted for gray/grey names
green #008000 half-brightness; the vivid one
is lime (#00FF00)
rebeccapurple #663399 added in 2014 in memory of
Eric Meyer's daughterThe set was inherited from X11 window-system colours, extended for SVG, and standardised in CSS without anyone reconciling the names — which is why darkgray is lighter than gray and green is not the greenest green. They are convenient and completely reliable as values; just never infer a colour's lightness from its name, and never assume two similarly named colours are related.
Before you use a name
The names are historical, not systematic
They came from the X11 window system, were carried into SVG, and were standardised largely as they stood. There is no scheme behind them: no consistent lightness ordering, no even hue spacing, and several near-duplicates. Treat them as a fixed vocabulary rather than a palette.
They are exact and universally supported
Every name maps to one precise sRGB value that has not changed and will not, and every browser has supported the full set for many years. As a way to write a colour they are as reliable as hex — the caution is about which colour you get, not whether it works.
Most of them fail contrast as text
The set is dominated by mid-tones, so the majority of names sit in the range that fails 4.5:1 against both white and black. That is why the contrast figures are shown here — the name tells you nothing about whether text will be readable.
Convenient for prototypes, awkward in systems
tomato and rebeccapurple are perfect while you are sketching. In a design system they carry no semantic meaning, cannot be adjusted, and give a reviewer nothing to reason about — a token name and an OKLCH value do both jobs better.
Both spellings work, for the grays
gray and grey are both accepted, along with the compounds — darkgray and darkgrey, lightslategray and lightslategrey. Everything else has exactly one spelling, so consistency in a codebase is a convention you have to enforce yourself.
The whole library is local
The dataset ships with the page, so searching, filtering, and every conversion happen in your browser with no requests, and the library works offline.
The judgement call
Named colours are a convenience with a narrow but real range of good uses.
Sketching or debugging a layout
Use a name
tomato is faster to type and easier to spot in devtools than a hex code you will delete in an hour.
Reading someone else's stylesheet
Look it up
Knowing that darkgray is lighter than gray explains a surprising number of inherited bugs.
A design token
Use a value
Names carry no meaning, cannot be nudged, and cannot express anything outside their fixed set.
Text or a background colour
Check contrast first
Most named colours are mid-tones that fail 4.5:1 against both white and black.
A colour outside sRGB
Not available
Every name is a fixed sRGB value. Wide-gamut colours need OKLCH or another modern notation.
Matching a brand colour
Use the exact value
Close is not matching, and the nearest name is often several perceptual steps away.
Reference
FAQ
148, each mapping to one exact sRGB value. The set was inherited from the X11 window system, carried into SVG, and standardised in CSS — which is why the naming is inconsistent even though the values are precise and stable.
Because the two names came from different places and nobody reconciled them. darkgray is #A9A9A9 and gray is #808080, so the darker-sounding name is the lighter colour. It is the most reliable way to confuse yourself with named colours.
green is #008000, a half-brightness green, while lime is #00FF00, the fully saturated one. If you write green expecting a vivid colour you will get something much more subdued — this catches people constantly.
Yes, for the gray family — gray and grey are both valid, as are the compounds like darkgray and darkgrey. Every other name has one spelling only. Keeping a codebase consistent is a convention you have to enforce yourself, since both parse identically.
For prototypes and debugging, they are excellent. For a design system, use values: names carry no semantic meaning, cannot be adjusted, and cover only a fixed set of sRGB colours. A token name plus an OKLCH value communicates far more to whoever reads it next.
#663399, added to CSS in 2014 in memory of Rebecca Meyer, the daughter of web standards author Eric Meyer, who died at six. It is the only named colour added for a reason other than convention, and the only one with a story attached.
The dataset ships with the page, so searching, filtering, and conversion all happen in your browser with no requests. It works offline.