CSS Color Names
aliceblue
to yellowgreen — grouped by family. Click any swatch for a
quick view with conversions, accessibility, and its nearest Tailwind equivalent.
Search by name or hex code · press / to focus · of 148 names match
Reds
Oranges & Browns
Yellows
Greens
Cyans & Teals
Blues
Purples & Violets
Pinks & Magentas
Where the names come from
Most of these names are far older than CSS. They trace back to the X11 window system’s
rgb.txt file from the
1980s, where workstation developers named colors after whatever came to mind — which is why the list
includes oddly specific entries like papayawhip,
dodgerblue, and cornflowerblue. The web
started with just 16 named colors in HTML 3.2/4.01 (black, white, red, lime, navy, and so on);
the full X11-derived set was standardized through SVG and then adopted into CSS Color Module Level 3
as the “extended color keywords” you see here.
One name has a different story. rebeccapurple (#663399) was added to CSS in 2014 in memory of Rebecca Meyer, the daughter of CSS pioneer Eric Meyer, who died of brain cancer on her sixth birthday. Purple was her favorite color, and the community named it rebecca—not becca—purple because she had been looking forward to being called Rebecca once she turned six. It remains the only CSS color named after a person.
Practical details worth knowing: the keywords are case-insensitive (Tomato and tomato both work), several are exact aliases (gray/grey, cyan/aqua, magenta/fuchsia), and because the set grew organically it is not evenly distributed — there are far more light pastels than deep saturated tones, and the lightness steps between related names are irregular. If you need a systematically spaced palette, the Tailwind color chart is built for exactly that.
Frequently asked questions
Yes — every name here (e.g. 'rebeccapurple', 'cornflowerblue') is a valid CSS color keyword you can use anywhere a color value is expected, such as color: tomato;.
CSS defines both spellings as aliases for the same color for compatibility with British and American English. 'cyan'/'aqua' and 'magenta'/'fuchsia' are similar historical duplicates.
No — they are two unrelated systems. CSS names are a fixed browser standard; Tailwind's palette is a designed scale that ships with the framework. Very few values overlap exactly, which is why the quick view computes the perceptually nearest Tailwind class for any name using the CIEDE2000 color-difference formula, along with how visible that difference actually is.
No. CSS color keywords are case-insensitive, so TOMATO, Tomato, and tomato are all valid. They must be complete keywords, though — partial or hyphenated forms like 'dark-red' aren't recognized.
Related tools
Color Chart
Browse the full Tailwind CSS color system and the 216 web-safe colors, with hex codes and copy-to-clipboard for every swatch.
Try it → ColorsHEX to RGB Converter
Convert any HEX color code to its RGB and HSL equivalents, live, with copy-to-clipboard values.
Try it → AccessibilityContrast Checker
Check the WCAG contrast ratio between any two colors, live, with AA/AAA pass-fail results.
Try it →Ready to find your perfect palette?
Start from any color and let real color theory do the rest — or warm up with today's puzzle.