EN
PT
ES
CSS Named Colors
Searchable reference for all 147 CSS named colors. Click any swatch to copy its name; sort by name, hue, or lightness.
What are CSS named colors?
CSS named colors are a fixed set of 147 keywords — like tomato, aliceblue, rebeccapurple — that you can use anywhere a CSS color is expected, in place of a hex code or rgb() function. They're baked into every browser, render identically across platforms, and require no preprocessing. The list grew over CSS's history: the original 16 came from VGA, another batch from X11, and rebeccapurple was added in 2014 in memory of CSS pioneer Eric Meyer's daughter.
How to use this reference
Type into the search box to filter by name (try blue, dark, or red) or by hex (try ff). Switch the sort dropdown to organise by hue if you're hunting for a specific color you can only describe visually, or by lightness when picking shades for hover states. Click any swatch to copy the keyword to your clipboard — paste it directly into a CSS rule like color: tomato;.
When to reach for named colors
Named colors are great for quick prototypes, README badges, demo code, and any context where exact brand fidelity isn't required. They're not great for production design systems — the legacy palette is uneven (lots of pinks and oranges, fewer dark teals) and the names are awkward (papayawhip, peachpuff). For shipping work, derive named-color hex equivalents and rebuild the palette around your brand using a tool like our Color Harmony Generator.
Where the names come from
The 147 names trace back to the X Window System's rgb.txt file from the late 1980s, which itself borrowed names from a Sinclair Paints catalog and various other sources. The original 16 — aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow — were inherited from VGA hardware. Modern CSS specifies the full list as exact sRGB hex codes; browsers do not approximate.
Color groups in the named-color palette
Reds & pinks: red, crimson, salmon, lightcoral, hotpink, deeppink, pink and friends. Oranges & browns: orange, darkorange, coral, tomato, chocolate, sienna, peru. Yellows & golds: yellow, gold, khaki, palegoldenrod. Greens: green, lime, forestgreen, seagreen, olive, olivedrab — by far the largest hue group. Blues: blue, navy, royalblue, dodgerblue, steelblue, lightblue. Purples: purple, violet, indigo, orchid, plum, rebeccapurple. Neutrals: a dozen gray/grey aliases plus silver, white, black.
Frequently asked questions
Why are there 147 names if Wikipedia lists 140?
gray and grey, darkgray and darkgrey, etc. The 140 figure counts each color once, ignoring spelling. Both numbers describe the same palette; we list 147 so you can search for either spelling.Is aqua the same as cyan?
#00FFFF. Same for fuchsia and magenta (#FF00FF). The duplicates exist because CSS inherited names from two different sources (VGA and X11) and chose not to deprecate either.Can I use these in HTML attributes like bgcolor?
bgcolor is a deprecated HTML attribute; use CSS instead. Modern HTML5 color input fields and the SVG fill attribute also accept named colors, and those are fine.What's rebeccapurple and why does it have a person's name?
rebeccapurple (#663399) was added to the CSS spec in 2014 in memory of Rebecca Meyer, daughter of web standards pioneer Eric Meyer, who died at age six. The CSS Working Group fast-tracked the addition as a tribute. Purple was her favorite color.Are named colors slower than hex codes?
#fff to #ffffff. There's no performance difference at runtime. The only practical difference is bytes on the wire — tomato is shorter than #ff6347, but compression makes that moot.Can I add my own named colors?
:root { --brand-tomato: #FF6347; } and then color: var(--brand-tomato);. Our Color Harmony Generator outputs ready-to-paste custom property declarations.