CSS Color Names is a searchable reference of all 148 named colours you can use in CSS, each shown with its swatch and hex value. Type part of a name or a hex code to filter instantly, and click any colour to copy either its keyword or its hex — whichever you need.
You can also go the other way: use the “Find a colour’s name” box to pick or paste any colour and get the matching named colour — or the closest one when there is no exact match. Named colours like tomato, rebeccapurple, and steelblue are handy for quick prototyping and readable stylesheets, and every one maps to an exact hex value. Everything runs in your browser.
How to use the CSS color names reference
- Type a colour name (or part of one) or a hex code in the search box to filter.
- Choose whether clicking copies the colour name or its hex value.
- Click any colour card to copy it to your clipboard.
- Paste the name (e.g. color: tomato;) or the hex into your CSS.
What are named CSS colours?
CSS defines a set of 148 colour keywords — words like red, navy, gold, and rebeccapurple — that you can use anywhere a colour is expected, instead of a hex or rgb() value. They are a superset of the original 16 HTML colours and are supported in every browser. Each keyword corresponds to a fixed hex value, so tomato is always #ff6347.
Names vs. hex values
Colour names make CSS more readable and are great for prototyping, but they are a fixed palette — you cannot tweak their lightness or opacity without switching to hex, rgb(), or hsl(). Note that some names are synonyms: aqua and cyan are identical, as are fuchsia and magenta, and several colours offer both gray and grey spellings. rebeccapurple (#663399) was added in memory of Eric Meyer’s daughter and is the newest keyword.
When to use a name or a value
Reach for a named colour when you want quick, legible defaults — borders, placeholders, or a fast prototype. Switch to hex or hsl() when you need brand-exact colours, a full tint/shade scale, or transparency. To turn a named colour into other formats, copy its hex here and use the Color Converter; to build a full scale from it, use the Shades & Tints generator.
Frequently Asked Questions
How many named colours does CSS have?
CSS has 148 named colour keywords, including synonyms such as aqua/cyan and the gray/grey spelling variants. All of them are listed and searchable here.
Can I use a colour name directly in CSS?
Yes. Write it wherever a colour is expected, for example color: tomato; or background: steelblue;. Every modern browser supports the named colours.
Are colour names the same as their hex values?
Yes, each keyword maps to a fixed hex value — for example tomato is always #ff6347. Click a colour here to copy either the name or the hex.
Why are there both gray and grey?
CSS accepts both the American (gray) and British (grey) spellings for the grey family, and they resolve to the same values. Both are included in this list.
What is rebeccapurple?
rebeccapurple (#663399) is a named colour added to CSS in memory of Rebecca Meyer, daughter of web-standards author Eric Meyer. It is the most recently added colour keyword.
How do I find the name of a colour I have?
Use the “Find a colour’s name” box at the top: pick a colour or paste its hex, and it shows the matching named colour, or the closest one if there is no exact match. Click the result to highlight it in the list.