How does the color name finder decide which name is "closest"?

It computes the Euclidean distance between the input RGB and every entry in the CSS named-color table, then picks the entry with the smallest distance. The same metric ranks the runners-up.

Which color name list is used?

The 147 colors from CSS Color Module Level 4, which extends the original X11 list and is recognised by every modern browser.

Why does the same hex sometimes match a name that looks slightly different to my eye?

Euclidean RGB distance is not perceptually uniform — distances in CIE Lab would track human perception more closely, but RGB nearest-neighbour is fast and standard. Check the swatch visually before naming a brand color.

Can I use the name directly as a CSS value?

Yes for exact matches — CSS accepts any of the 147 names. For nearest matches you would usually keep the hex in CSS and just use the name as a label or documentation.

Does the finder support short hex like #abc?

Yes. The three-digit shorthand is expanded to six (so #abc becomes #aabbcc) before the lookup runs.

Color Name Finder

Find the closest CSS named color for any hex value with near-match alternates.

Written by Golam Rabbani, Founder & Lead Engineer

This interactive tool requires JavaScript. Read the formula and worked example below; you can compute the result by hand.

How to use this color name finder

Pick a hex color with the color picker or paste a hex value.
Press Find color name to search the bundled CSS named-color table.
See whether the input matches a named color exactly, or read the nearest name with its Euclidean RGB distance.
Review three alternate near matches with their own hex codes and distances.
Copy the result for use in CSS, design specs, or naming conventions.

About this color name finder

The color name finder maps any hex value to the closest entry in the CSS Color Module Level 4 named-color list — the 147 standardized X11/W3C extended names that browsers understand natively (gainsboro, dodgerblue, rebeccapurple, etc.). It first checks for an exact RGB match, then falls back to Euclidean distance over the entire table to find the nearest name plus three runners-up.

Worked example: #3b82f6 (the Tailwind blue) does not exist as a CSS named color, so the finder reports the closest match as cornflowerblue (#6495ed) at a Euclidean RGB distance of about 67. The near-match column then lists royalblue (#4169e1) and dodgerblue (#1e90ff) as the next-closest names. That is useful when you need to refer to a color in plain English for documentation, accessibility hints, or naming a CSS custom property.

As a second example, #ff6347 is an exact match for tomato — one of the 147 standardized names — so the tool reports a distance of 0 and no approximation is needed. That exact match is safe to use directly in CSS as `color: tomato`. The lookup table is bundled in lib/data/cssNamedColors.ts and the search runs entirely in your browser.

FAQ

How does the color name finder decide which name is "closest"?: It computes the Euclidean distance between the input RGB and every entry in the CSS named-color table, then picks the entry with the smallest distance. The same metric ranks the runners-up.
Which color name list is used?: The 147 colors from CSS Color Module Level 4, which extends the original X11 list and is recognised by every modern browser.
Why does the same hex sometimes match a name that looks slightly different to my eye?: Euclidean RGB distance is not perceptually uniform — distances in CIE Lab would track human perception more closely, but RGB nearest-neighbour is fast and standard. Check the swatch visually before naming a brand color.
Can I use the name directly as a CSS value?: Yes for exact matches — CSS accepts any of the 147 names. For nearest matches you would usually keep the hex in CSS and just use the name as a label or documentation.
Does the finder support short hex like #abc?: Yes. The three-digit shorthand is expanded to six (so #abc becomes #aabbcc) before the lookup runs.