Color Names List: 220 Named Colors with Hex and RGB

What are color names?

A color name is a word that stands in for a color value — crimson instead of #DC143C, forest green instead of rgb(34, 139, 34). Color names exist because a word is easier to say, remember, and scan in a design brief or a line of code than six hex digits or three RGB numbers, even though the word and the number describe exactly the same color. This page is a list of colors built around that idea: 220 named colors, organized into twelve families — red, orange, yellow, green, cyan, blue, purple, pink, brown, gray, black and white — so you can find a name by browsing a family or by searching directly.

Not every color name carries the same weight, though. A smaller set of these are official CSS color names — keywords the CSS specification itself defines, which means typing color: tomato into a stylesheet works exactly like typing the hex code, no library or preprocessor required. The rest are conventional names — Burgundy, Sage, Espresso and similar — that come from design, printing, and everyday language rather than any web standard; they’re useful for talking about a color, but a browser won’t recognize them as CSS keywords. This tool lists both kinds side by side and marks which is which, so you always know whether a name will actually work in code or is just a common way to describe a shade.

How to use the color names list

1. Search by name or hex code. Type into the search field and the list narrows as you go — searching crimson and searching dc143c return the same result, since the search matches against both the color name and its hex code.
2. Narrow to official CSS colors, if that’s what you need. Check “Official CSS colors only” to drop everything except the 121 names that work literally in a stylesheet, and watch the live count update to match. Leave it unchecked to browse the full set of 220, including the conventional names that aren’t part of the CSS spec.
3. Browse the results and copy what you need. Colors are grouped under a heading for each of the twelve families, and each heading links through to that family’s shades page for the full range. Every row shows a swatch, the name, the hex code and the rgb() value — click the name to copy it, or click either code to copy that instead, and a checkmark confirms for two seconds. A small CSS badge marks the names that are official keywords.

When to use a name instead of a hex code

Color names earn their keep wherever a human is going to read the code, not just the browser. background-color: tomato tells a reviewer what’s on screen at a glance, where background-color: #FF6347 makes them stop and picture it, or open a color picker to check. That readability matters most in early prototyping and teaching contexts — sketching a layout, writing a quick code sample, explaining CSS to someone new — where the exact shade of orange matters less than getting something colored on the page fast, and a name is quicker to type and recall than a six-digit code.

That trade-off flips once a project needs an exact, consistent palette. CSS only defines a fixed set of keyword colors, so the moment a brand or design system calls for a specific shade of blue rather than just any blue, there usually isn’t a name for it — the palette has to be expressed as hex or rgb() values anyway. Design tools, style guides, and CSS custom properties all store colors as hex or RGB natively, so production stylesheets tend to define named custom properties on top of a hex value, something like --brand-blue: #1D4ED8, rather than lean on the built-in keywords — keeping the readability of a name while still pinning down the exact color.

Honest limitations

CSS defines roughly 148 color keywords in total, counting spelling variants like gray and grey as separate names. Of those, 121 appear on this page — the ones that fall inside these twelve families. The other 99 names shown here are conventional names, things like Burgundy, Sage and Espresso, that no standards body defines; another color chart or brand guide may place the same name a few percent lighter or darker, since there’s no single authoritative hex value behind it.

The official CSS names came from the old X11 color palette, and they inherited its quirks rather than any deliberate system — the clearest example is DarkGray (#A9A9A9), which is actually lighter than plain Gray (#808080). CSS also accepts both spellings throughout the gray family — gray and grey, darkgray and darkgrey, slategray and slategrey all work identically in a stylesheet — but this list shows only one spelling per color. Keywords are case-insensitive too: crimson, Crimson and CRIMSON are the same color. And every value here is sRGB — what you actually see depends on your display’s gamut and calibration, and CMYK printing can’t reproduce all of these colors regardless of how they look on screen.

Why is it free?

The list, the search, and the copy buttons all run in your browser — nothing you type is sent to a server. There’s no account to create, no watermark on a copied hex code, and no premium tier gating the CSS-only filter or the family shade pages. It’s a reference page, and reference pages should just work.