Color Name Finder

Enter any colour and this tool finds the closest named CSS colour, using a perceptual distance (CIE Lab) that matches what the eye sees better than comparing raw RGB numbers. It lists the five nearest names with a difference score, so you can pick a readable name for a hex value.

How to use it

1. Enter a colour.
2. Read the closest name and the near matches.
3. Check the swatches.
4. Copy the name.

When it helps

• Describing a colour in words in a brief or doc.
• Giving a hex value a readable CSS name.
• Choosing a named colour close to a brand colour.
• Naming colours in a design system.

Good to know

• A difference below about 2 is hard to see by eye.
• CSS has around 140 names, so exact matches are rare.
• Names are convenient, but hex is more precise.

How colour distance is measured

Comparing colours by their red, green and blue numbers works poorly, because equal numeric differences don't look equally different. The tool converts colours to CIE Lab, a model designed so that distance roughly matches perceived difference, and measures the straight-line distance there.

A distance below about 1 is invisible to most people, around 2 is noticeable on close comparison, and above 10 the colours clearly differ.

Worked example: naming a hex value

Enter #e9967b. The nearest CSS name is darksalmon, with a distance under 1, so it's effectively the same. Enter #f6b82f and you'll see colours such as goldenrod and orange, with the best match listed first.

If you need an exact name for documentation, pick the top match and say "close to" rather than claiming equality.

Why names help

Names make colours easier to discuss: "use something like steelblue" communicates better than a hex code over the phone. They're also easier to remember and to spot in code, which helps when reviewing stylesheets.

The CSS list includes the basics such as red and blue and curious ones such as papayawhip and rebeccapurple, the last added in memory of a designer's daughter.

Beyond CSS names

Design brands use their own names, such as paint makers' catalogues with thousands of entries. Those aren't standard, so the tool sticks to CSS names, which every browser understands.

For a custom name, consider combining the closest CSS name with a descriptor, such as warm amber, to keep it meaningful.

Using names in code

Named colours work directly in CSS, SVG and many design tools, so you can write color: steelblue without a hex code. They're easier to read in quick prototypes, though a design system should use variables with meaningful names instead.

If your tool doesn't support names, use the hex shown.

Questions