Color Name Finder
Enter a hex, rgb(), or hsl() color and instantly find the closest matching CSS named color, with a live swatch comparison and a few next-closest alternatives.
🔒 Processed locally in your browser
Loading…
How to use
- Type a color into the field in hex, rgb(), or hsl() format, or pick one visually with the color swatch.
- The closest CSS named color appears instantly, with its own swatch, name, and hex code shown next to yours.
- Check the distance score to see how close the match is — a distance of 0 means an exact match.
- Scroll the list below to see a few more of the next-closest named colors, ranked from nearest to farthest.
Features
- Accepts hex, rgb(), and hsl() color formats, plus a visual color picker
- Matches against all 148 standard CSS/X11 named colors
- Shows a live side-by-side swatch of your color and the matched named color
- Includes a numeric distance score plus several next-closest alternatives
- 100% client-side — your colors never leave your browser
Frequently asked questions
How does the color name matching work?
Your color is converted to RGB, then compared against every standard CSS named color using the Euclidean distance between their RGB values. The named color with the smallest distance is shown as the closest match, with the next few smallest shown as alternatives.
Which named colors are matched against?
The standard set of 148 CSS/X11 extended color keywords defined by the CSS Color Module — the same names browsers recognize in CSS, like "tomato", "slateblue", or "rebeccapurple". It's a fixed, well-known list, so an exact match is only found when your color happens to land exactly on one of them.
Why are the color names shown in English even though the site is in my language?
Names like "Tomato" or "SlateBlue" are literal CSS keywords, not translatable text — a browser only understands the English spelling in a stylesheet. They're kept in English in every locale for that reason, while the rest of the page around them is fully translated.
What does the distance score mean?
It's the straight-line (Euclidean) distance between your color and the named color in RGB space, where each channel ranges 0-255. A distance of 0 is an exact match; the maximum possible distance (black to white) is about 441. Smaller numbers mean a closer visual match.
Does this tool store or upload my colors?
No. All parsing, matching, and distance calculations happen locally in your browser using plain JavaScript. Nothing is sent to a server or saved anywhere.