CSS Colour Names

Features

• All 148 CSS named colours, the complete CSS Color 4 name list
• Name to value: enter tomato for its value, RGB, HSL and the `color: tomato` form
• Value to name: paste #2f4f4f to see whether it has a standard name
• The nine same-colour pairs are called out (aqua / cyan, fuchsia / magenta, seven gray / grey pairs)
• Hex, RGB and HSL for every colour, ready to paste into a stylesheet
• A swatch drawn on every row, so you never have to convert a code in your head
• Each colour states whether black or white text reads better, with the WCAG contrast ratio and whether it reaches AA
• Browse by hue family: reds, oranges and browns, yellows, greens, blues and teals, purples, neutral
• Search by name fragment: enter dark to list every dark colour
• All 148 names sit in one searchable dropdown, with the value in the hint
• Empty input lists the whole table, browsable as a colour chart
• Paste tolerance: quotation marks and full-width characters do not break the lookup

How to use

1. Enter a colour name, such as tomato or rebeccapurple
2. Or paste a value such as #2f4f4f to see whether it has a standard name
3. To see which names belong to a family, enter a hue family such as "purples"
4. Leave the box empty to list all 148 names, grouped by hue

FAQ

Why do two names share one value, and which should I use?

Because the CSS colour list merges HTML’s historical names with SVG’s names, and the two sets overlap while also differing in spelling. That leaves nine pairs — `aqua` (HTML) and `cyan` (SVG), `fuchsia` and `magenta`, and seven spelling differences like `gray` / `grey`. Either works; browsers treat them identically. In practice: stay consistent with what the project already uses (mixing `gray` and `grey` in one codebase makes them look like different things), and pick one spelling convention for the team.

Should I use colour names or hex in my code?

Names are good where the point is to be readable at a glance: `color: tomato` reads better than `color: #ff6347`, needs no lookup, and makes review easier. But there are only 148 of them, so anything more specific has no name. Real projects therefore mix: names to express intent (an accent, a danger colour), hex or a modern form such as `oklch()` where a brand value or precision matters. One caveat: a colour name cannot be themed — you cannot make `tomato` a different red in dark mode, whereas a CSS variable can.

Do these names work in every browser?

The 148 names are part of CSS Color Module Level 4 and are supported in every modern browser. The one to watch is `rebeccapurple`, which arrived with Level 4 (in memory of Rebecca Meyer) — very old browsers, all versions of IE, do not recognise it and will drop the whole declaration as invalid. If you still support those, treat `rebeccapurple` as a colour that needs a fallback. The other 147 have been there since the earliest days of CSS.

Why is there no crayon or pencil colour chart here?

Because there is no trustworthy source for one. Crayon and pencil colour names are manufacturer product data tied to their own numbering systems — neither a public standard nor freely copyable common knowledge. A "48 crayon colours" chart made up from scratch would have names and values we invented ourselves: plausible-looking, matching no actual box of crayons, and worse than nothing. What is here is the W3C standard colour names — an open specification, all 148 directly usable in a browser, and better suited to on-screen work than any manufacturer’s chart.

Why does a value sometimes come back with "no name"?

Because the 148 names cover discrete values, while RGB has over 16 million colours. Any value outside those 139 simply has no standard name — that is not an error and does not hinder you: write the value itself in your stylesheet, CSS does not require a name. This tool deliberately says "it has no name" rather than "you typed it wrong", because that is the fact.