140 CSS Color Names

Pink

Red

Orange

Yellow

Brown

Green

Cyan

Blue

Purple

White

Gray & Black

What the CSS color names are

CSS color names — also called HTML color names, named colors or web color keywords — are plain-English words you can use anywhere a CSS color value is expected, in place of a hex code or rgb() function. Writing color: teal is exactly equivalent to color: #008080 or color: rgb(0, 128, 128); the browser resolves the keyword to a fixed value defined in the specification. There are 140 of these keywords, plus rebeccapurple (#663399), added to CSS Color Module Level 4 in memory of web pioneer Eric Meyer's daughter, for 141 in total. Every current browser recognizes all of them, and they are case-insensitive.

The list has quirks worth knowing. Several names are synonyms that resolve to the identical value — cyan and aqua are both #00FFFF, magenta and fuchsia are both #FF00FF, and gray, grey and their compounds (darkgray/darkgrey) are interchangeable. A few are famously counter-intuitive: darkgray (#A9A9A9) is actually lighter than plain gray (#808080), and green is a deep #008000, not the bright #00FF00 that most people expect — that one is lime.

Should you use color names or hex codes?

For production work, hex codes and custom properties are the norm: a design almost never lands exactly on one of the 140 keywords, and teams need precise, tokenized values. Color names earn their place in other situations — quick prototypes and demos where readability beats precision, teaching and documentation where rebeccapurple communicates better than #663399, debugging where a glaring hotpink border marks an element instantly, and fallback values. They are also a useful vocabulary: knowing that a mock-up's blue is close to steelblue or cornflowerblue gives you a starting point to describe and refine it.

If you have a hex code and want to know which keyword is nearest, paste it into the color converter — it reports the closest named color automatically — or use color name from image to name a color straight from a screenshot. To go the other way and turn a keyword into a full palette, open it in the color picker or the palette generator.

How this list is organized

The table above groups all 141 names into color families — reds and pinks, oranges and browns, yellows, greens, blues and cyans, purples, plus whites, grays and blacks — and within each family the colors run roughly light to dark. Every row gives the keyword, its hex code, its RGB triple and its HSL value, so you can copy whichever format your project uses. Use the filter box at the top to jump to a name or a hex value, or the family links to skip to a section.

For named colors beyond the CSS keyword list — coral, sage, terracotta, mauve and hundreds more design and paint names — browse the color library, which groups 245+ shades by family and gives each its own page with harmonies, tints and shades. For ready-made UI systems, see the Tailwind and Material Design charts. And before using any name for text, check the pairing against its background in the contrast checker.

Color name FAQ