CSS Named Colors Reference

The CSS named colors reference is the searchable table of the names CSS defines, each shown as a swatch with its hex value and a copy button.

What is CSS Named Colors Reference?

The CSS named colors reference is the table itself rather than a tool wrapped around it. Names sit in a responsive grid — two columns on a phone, six on a wide screen — and each card shows the swatch, the name and its hex value with a copy button beside it. A search field above the grid filters the list as you type.

The search is a substring match over the name, which is exactly the behaviour you want when the name is half-remembered. Typing sky finds skyblue and lightskyblue and darkskyblue but not a colour whose name merely means sky, and typing dark narrows the list to the dark-prefixed family — the darkolivegreen and darkseagreen entries alongside the rest. Because the filter runs on every keystroke, the grid is a practical way to answer questions like which two names share a value or what the hex of aliceblue actually is, without leaving the page for a specification document.

A reference page has one job beyond listing: it should answer the small questions that come up while writing css color names into a stylesheet, and the filter is how it does that. Search color names by the fragment you remember and the grid narrows to a handful of swatches, so darkseagreen and mediumseagreen can be compared by eye rather than by argument. The same habit runs in reverse when you need named color values to paste into a token file: type the family, read the hex off the card, copy it.

What the build's table contains is worth stating precisely, because a reference is only as good as its list.

• 141 names, ordered alphabetically from aliceblue to yellowgreen.
• Two values with two names each: aqua and cyan both mean #00FFFF, and fuchsia and magenta both mean #FF00FF.
• The gray spelling only. grey, darkslategrey and the other British spellings are not part of this table, though CSS accepts them.
• No transparent or currentcolor entries: those are keywords a browser understands, not fixed named values, and nothing here pretends otherwise.

The strengths and the limits are the same fact seen twice: a name is shorter to remember than a hex string and says nothing about how the colour should be used. Nothing in this table tells you whether a name is safe for text, which names are old and which were added later, or how a value behaves under a colour-vision deficiency. It lists values, and the rest of the domain exists for the other questions — the lookup names an arbitrary colour, the finder snaps one to this table, and the contrast tools measure what happens when two of these values meet.

Read it the way you would read a dictionary: for definitions, not for style. When a name is going into a stylesheet, copy the hex beside it, because a keyword survives a rename-free refactor but a hex string behaves the same in every tool and every language, and because a value that has to be checked later is easier to check when it is written in one notation everywhere.

How to use CSS Named Colors Reference

1. Type part of a name into the search field to filter the grid.
2. Scan the swatches to find the value you meant rather than the name you remembered.
3. Use the copy button on a card to take its hex value for a stylesheet or a token file.
4. Clear the filter to read the list in alphabetical order when browsing rather than searching.

When to use CSS Named Colors Reference vs related tools

Use this when the name is the question — spelling it correctly, finding its value, or checking whether a colour has a name at all. The colour name lookup does the reverse by naming a colour you already have, the nearest named colour finder snaps a value into this table and reports what the snap cost, and the format validator checks whether a name you have written will actually be accepted.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.

Frequently asked questions about CSS Named Colors Reference