gizmobench

Color Name Finder

Type a colour as hex, as rgb() or as a keyword and read the CSS colour name that sits nearest to it, with the distance that says how near. The match is not made on the hex digits: both colours are linearised out of sRGB, converted to CIEXYZ under the D65 white point and then to CIELAB, and the 148 CSS Color Module Level 4 keywords are ranked by CIEDE2000 distance, which is why #FF6F61 comes back as salmon rather than the coral that plain RGB arithmetic picks. A colour that is a keyword exactly is marked exact with a distance of zero, everything else shows how far away it landed, and the five next closest names are listed underneath so you can pick the one you actually want. It runs in your browser, with no account and nothing uploaded.

colour#0B7A85
Hex
#0B7A85
RGB
rgb(11, 122, 133)
HSL
hsl(185, 85%, 28%)
nearestCSS name

teal#008080 · 5.3 away, not an exact match

Distance
5.3
Measured
CIEDE2000 in CIELAB
Nearest
teal
Hex
#008080
Distance
5.3
Exact
No

Closest CSS names

  • teal#008080
    distance 5.3 · rgb(0, 128, 128)
  • darkcyan#008B8B
    distance 7.8 · rgb(0, 139, 139)
  • cadetblue#5F9EA0
    distance 14.7 · rgb(95, 158, 160)
  • darkslategray, also darkslategrey#2F4F4F
    distance 16.1 · rgb(47, 79, 79)
  • steelblue#4682B4
    distance 16.9 · rgb(70, 130, 180)
  • slategray, also slategrey#708090
    distance 17.2 · rgb(112, 128, 144)

sRGB channels are linearised, converted to CIEXYZ under the D65 white point, then to CIELAB, and every keyword is ranked by CIEDE2000 distance.

Accuracy. The distance is measured in a perceptual colour space rather than on the raw hex digits, so the nearest name is the one that actually looks closest. An exact match is marked as exact; everything else shows how far away it is. The vocabulary is the 148 CSS Color Module Level 4 keywords and nothing else, and no distance can tell you how a colour will look on your screen or in print. The colour you type is read by this page and by nothing else: there is no upload, no account and no analytics call carrying it.

Common questions

How does it decide which name is closest?
Both your colour and every keyword are taken out of sRGB the long way: each channel goes through the sRGB transfer function, the result is multiplied into CIEXYZ under the D65 white point, and that becomes CIELAB. The names are then ranked by CIEDE2000, the CIE's 2001 colour-difference formula, which weighs lightness, chroma and hue separately and adds the rotation term that stops blues from being mismatched. The page names that method next to the result rather than leaving you to guess at it.
Why is the nearest name not the one with the closest hex code?
Because equal steps in hex are not equal steps to an eye. Take #FF6F61: by plain arithmetic on the RGB numbers the nearest keyword is coral, and coral is only the fourth choice once the colours are compared in CIELAB, where salmon wins. Green channels carry far more apparent lightness than blue ones, so a tool that subtracts hex digits will keep offering names that measure close and look wrong. The conversion is the whole point of this page.
Which colour names does it know?
The 148 keywords of CSS Color Module Level 4: the 147 SVG colour names plus rebeccapurple. Nine of them are alternative spellings of another keyword, such as grey for gray, cyan for aqua and magenta for fuchsia, so there are 139 distinct colours and both spellings are shown on the one row. There are no paint, thread or Pantone names here. Those are commercial colour systems with their own licensing, and a made-up list of pretty names would tell you nothing a browser or a stylesheet can use.
What does the distance number mean?
It is the CIEDE2000 difference between your colour and that keyword. Zero means the values are identical, which the page also marks as an exact match. By convention a difference of about 1 sits near the smallest change a trained observer notices under controlled lighting, so a match under 2 is very close, and a match in the teens is a name for a colour that is clearly not the same. A distance too small to show at one decimal place is written as under 0.1 rather than as zero, because a colour one step away from a keyword is still a different colour.
What can I type in?
Hex in three, four, six or eight digits, with or without the hash, rgb() or rgba() with commas or spaces, a bare triplet such as 11, 122, 133, and any CSS keyword, which is the quick way to look up what teal is in hex. An alpha value is read and then ignored, with a note saying so, because a keyword names an opaque colour. A channel above 255 or below 0 is refused rather than quietly clamped, and a hex code of the wrong length is refused rather than padded. An hsl() value is not read here: convert it with the hex to rgb converter on this site first.
Can I use the name it gives me in CSS?
Yes when it is an exact match: color: teal is the same value you entered. When it is not exact, the keyword is the closest label for the colour rather than a replacement for it, so keep your own hex code in the stylesheet and use the name for writing, naming a design token or describing a shade to someone. The row shows the keyword's own hex and rgb values so you can see exactly how far the substitution would move you.
Is anything sent anywhere?
No. The conversion and the search happen in this tab, with no upload, no account and no analytics call carrying the colour. The last value you typed is kept in your own browser's storage so the page opens where you left it, Start over clears it, and with storage blocked the tool still opens on its default colour and works normally.

The distance is measured in a perceptual colour space rather than on the raw hex digits, so the nearest name is the one that actually looks closest. An exact match is marked as exact; everything else shows how far away it is. The vocabulary is the 148 CSS Color Module Level 4 keywords and nothing else, and no distance can tell you how a colour will look on your screen or in print.