Colour name finder — the nearest CSS colour name for any HEX code

How to use the colour name finder

1. Enter your Colour as HEX, rgb(), hsl() or any CSS colour, or use the picker.
2. Read the Nearest CSS name, its value, and whether it is an Exact match.
3. Check the two distance figures to see how close the name really is.
4. Compare your colour with the four nearest names in the swatch row, or scan the table of eight.

What it does and when to use it

A HEX code such as #4a90d9 means nothing in a conversation. A name like “close to cornflowerblue” does. The finder gives every colour a recognisable label, which helps when you write design notes, comment a stylesheet, describe a colour to a client, or sort a messy list of brand colours into families.

It only uses the names CSS defines, so any name it gives also works in code. To browse all of them, open the CSS colour names reference. If you work in Tailwind, the nearest Tailwind colour tool names colours by utility class instead. For a full breakdown of one colour in every notation, use the colour picker.

How it works

Your colour and each of the 148 named colours are converted to OKLab, which has a lightness axis L and two colour axes a and b. The distance is:

ΔE OK = √((L₁ − L₂)² + (a₁ − a₂)² + (b₁ − b₂)²)

The list is sorted by that distance. A distance below 0.0005 counts as an exact match. The ΔE2000 figure for the top name uses the CIEDE2000 formula on CIE Lab values, a widely used measure for small colour differences.

Worked examples

These come from the tool itself.

#ff6347. Nearest CSS name: tomato, value #ff6347, Exact match: Yes, ΔE OK 0. The next names are orangered (0.0507) and coral (0.0538).

#4a90d9, a mid sky blue. Nearest: cornflowerblue (#6495ed), ΔE OK 0.0423, ΔE2000 5.05. Dodgerblue (0.0604) and steelblue (0.0627) follow.

#3b82f6. Nearest: dodgerblue (#1e90ff), ΔE OK 0.0363, ΔE2000 5.69, then royalblue and cornflowerblue.

Limits and tips

• 148 names cover the colour space unevenly. There are many pale tints and greys, so some other colours land far from any name.
• A name says nothing about contrast. Check readability separately.
• Distances are calculated for opaque colours; transparency is ignored.
• Your colour stays in your browser.