Color Name Finder

What this tool does

The Color Name Finder answers a simple question: what is this colour called? You give it any colour — pick one, or paste a hex code — and it finds the closest match among the 148 CSS named colours, the keyword set you can write straight into a stylesheet. It shows the matched name, that name’s exact hex value, and your colour and the named colour side by side so you can compare them directly. It tells you whether the match is exact or only approximate, gives a closeness percentage, and lists the next few runners-up with their own distances. All of the matching is plain arithmetic running locally in your browser, so results are instant and nothing you enter is uploaded.

Use cases

Named colours are woven through the web. A teammate mentions a colour by name in a ticket and you want to see it; you inherit a stylesheet full of keywords like SteelBlue and Goldenrod and need to know what they actually look like; or you have a hex code from a screenshot and want a memorable name for it. This tool covers all of those. Developers use it to translate arbitrary brand colours into the nearest readable keyword for quick prototypes and code comments. Designers use it during audits to spot when a stylesheet drifts away from its intended palette — if a colour matches a CSS keyword exactly, that is often a sign someone reached for a default instead of the brand value. Educators and people new to CSS use it to build intuition for what the keyword colours are and how they relate. It is also a handy naming aid: when you need a human label for a colour in documentation or a design system, the closest CSS name is a sensible starting point.

How to use it

1. Choose a colour with the native colour picker, or type a hex code into the HEX value field. Three-digit shorthand such as #3C9 works.
2. Read the result: the large swatches show your colour and the closest named colour side by side.
3. Check the match summary — it states the name, whether the match is exact or approximate, and how close it is.
4. Scan Other close names for the runners-up, each with its own distance value, in case a slightly different name suits you better.
5. Copy the name, the hex, or both with the copy buttons. Press Reset to return to the default colour.

Tips

Treat the closeness percentage as a rough guide, not a verdict. A match in the high nineties will usually look convincingly like its named colour, while anything lower means the keyword is only a loose approximation — lean on the side-by-side swatches to make the final call. When you are auditing a stylesheet, an exact match is the interesting result: it often reveals a placeholder colour that slipped past review. If two runners-up are almost equally close, pick the name that communicates best to your team rather than the one with the marginally smaller number. And remember the list is fixed at 148 names — most real-world colours will be approximate matches, which is expected and not a problem.

Related techniques

The Color Name Finder pairs naturally with a colour converter: once you know a colour’s nearest name, the converter expresses it in RGB, HSL, HSV or OKLCH for whatever your code needs. If you want variations on a named colour, a tints and shades generator will expand it into a full scale of lighter and darker steps. And because RGB distance is the same maths used to compare any two colours, the finder is a gentle introduction to colour-distance thinking — useful background for palette matching, image quantisation and accessibility work alike.