How to find the name of a colour, and tell how close the name really is

A colour name finder answers a question that sounds simple: what is this colour called? The honest answer is usually “nothing, exactly”, because a name list holds a few thousand points and the sRGB space holds 16.7 million colours. What a finder can tell you is the nearest named colour, and how near it is. Most finders give you the first half and leave out the second.

Name a colour with the tool

1. Open the Colour name finder. The Colour tab is selected, with #2563EB already in the field labelled Any CSS colour. Type a hex code, a CSS keyword, or an rgb(), hsl() or oklch() value. The swatch to the left opens a colour picker; in Chrome and Edge on a computer, a Screen button picks a colour from anywhere on your display.
2. Read the large panel, Most people would call it. It gives the nearest name from the xkcd colour survey, a plain description worked out from the colour itself (“vivid blue”), and the distance in words. The strip under it shows your colour beside the named one.
3. Read Its name in every list. Each row pairs your colour with the named colour and prints the ΔE between them: the CSS keyword, the survey name, a curated name, and, if you press Search all 31,918 names (283 KB), the nearest of every name in the full open list.
4. Under Other names nearby, press any name to name that colour instead. Under Using it, check the contrast as text on white and on black, and what the colour becomes for each kind of colour blindness.
5. In Use it in code, choose a format (CSS, Tailwind v4, Tailwind v3, SCSS or Design tokens) and whether the token is named after Survey names, Curated names or Plain descriptions, then press Copy code.

To name several colours at once, switch to Palette and paste up to 24 colours, one per line or separated by commas. To go the other way, from a name to a colour, use By name: it forgives spaces, accents and small typos, so “turqoise” still finds turquoise.

What the distance means

ΔE2000 (CIEDE2000) is a measure of how different two colours look, standardised by the CIE for small differences. The bands the tool uses are conventions rather than physiology, and it says so: a value of about 1 is the figure most often used as a just-noticeable difference for two patches side by side.

ΔE2000	The tool says	What it means for the name
under 1	Indistinguishable	As good as exact
1 to 2	Very close	Visible only side by side, if you look
2 to 3.5	Close	A visible difference side by side
3.5 to 5	Similar	The name of a neighbour
5 to 10	Related	Same family, clearly a different colour
10 and over	Different	A different colour that happened to be nearest

Here is #2563EB in each list, as the tool reports it:

List	Nearest name	ΔE2000	Verdict
CSS keyword (148)	royalblue	2.53	Close: not a stand-in
xkcd survey (921 used)	azul	1.95	Very close
Curated (4,961)	Epic Blue	1.76	Very close
Full list (31,918)	Old Gungeon Red	1.25	Very close

The last row is the reason a plain description sits beside the poetic names. The nearest of nearly 32,000 names to a vivid blue is called “Old Gungeon Red”. A name is an attribute of a different colour; it carries no promise about yours.

How far the nearest name usually is

The size of the list decides how close its nearest name tends to be. Measured on 2,000 random colours:

List	Names	Median distance to the nearest	Within ΔE 1
CSS keywords	148	5.85	0.5% of colours
xkcd survey (crude names removed)	921	3.20	4.8%
Curated	4,961	1.90	14.2%
Full list	31,918	1.15	38.6%

So a CSS keyword is, more often than not, a visibly different colour. That matters when someone asks you to “just use the CSS name”: the finder’s keyword row says whether the swap would show. #4169E1 is royalblue exactly; #2563EB is not, and swapping one for the other moves the colour by 2.53.

The keyword row also carries the specification’s own warnings. The CSS colour specification points out that darkgray (#A9A9A9) is lighter than gray (#808080), that lightpink is darker than pink, and that indianred has been found offensive. A finder that recommends a keyword should pass those on.

The mistake most finders make

The commonest shortcut is to measure red, green and blue as distances on a ruler and take the smallest. Equal steps in RGB are not equal steps to the eye, so the shortcut lands on the wrong name often. Against the CSS keywords, it picks a different name from CIEDE2000 for 41.9% of random colours, and its pick is a median 3.1 ΔE further away. Tailwind’s yellow-500, #EAB308, is goldenrod at ΔE 4.44; the ruler calls it orange, 9.31 away.

The script behind many older “name that colour” pages adds HSL to RGB and measures hue in a straight line, so two reds either side of 0° look far apart. Against its own 1,566 names, it disagrees with CIEDE2000 on 59.7% of random colours. For #00A806 it answers Japanese Laurel, ΔE 22.5 away, when Apple is 5.0 away in the same list.

Names for a whole palette

Naming tokens one colour at a time is slow and produces collisions: two greys can share a nearest name, and the second then overwrites the first in a config file. The Palette tab names every colour at once and the export suffixes the second one (azul, azul-2) instead. Each exported line notes where its name came from and how far away it is, for example --azul: #2563eb; /* survey name "azul", ΔE2000 1.9 */, so a reviewer can see which names are approximate.

The design-token export follows the 2025.10 colour format of the W3C Design Tokens Community Group, with the colour space, components and a hex fallback.

Other ways to do it

There is no built-in method on the operating systems this site documents: system colour pickers report values, not names. Designers often check a value against the CSS keywords by eye, which the table above suggests will be wrong for most colours. For a Pantone, RAL or NCS reference, go to the owner of that system: their data is licensed, and none of it is in this tool.

Checking nothing was uploaded

Open your browser’s developer tools, go to the Network panel and name a few colours. The lists arrive once, as files from this site, and no request carries your colour. The tool keeps working with the network switched off once the page and its lists have loaded.

To go further with a colour once it has a name, check it in the Contrast checker, turn it into a ramp with the Ramp & token generator, or convert it with the Colour converter.