Color Name Finder
A color name finder takes a hex code and returns the closest CSS color keyword. This one compares your value with the 141 named colors in its list and rates how far apart they are: #3B82F6 comes back as RoyalBlue (#4169E1) marked Close, while #1DA1F2 returns DodgerBlue (#1E90FF), Very close, and #FF7F50 is an exact Coral.
Your Color
Closest Match
Popular Tools
About Color Name Finder
Color Name Finder answers one question: what is this color called? Type or paste a hex value into Enter color, or open the swatch beside it and pick a shade, and the tool compares your color with the 141 CSS color keywords it carries. The Closest Match card names the winner, and the HEX, RGB and HSL buttons underneath copy that match — RoyalBlue as #4169E1, rgb(65, 105, 225), hsl(225, 73%, 57%) — not the value you typed.
The comparison is a straight-line distance in RGB space: the red, green and blue channels of the two colors are subtracted, squared, added and square-rooted. Match Quality turns that number into a word — Exact match! at zero, Very close below 30, Close below 80, Approximate beyond it. #3B82F6 and RoyalBlue sit 33 units apart, which is why they read as Close. The measure is arithmetic rather than perceptual, so no Lab conversion and no delta-E formula are involved.
The Browse All tab shows all 141 swatches at once with a search box that matches the keyword or the hex text, plus ten filters: All, Red, Orange, Yellow, Green, Blue, Purple, Pink, Gray and White. Click a swatch and it drops into the finder as an exact match. Each swatch label flips between black and white using the relative-luminance formula WCAG defines for contrast, so pale colors get dark text.
Limits: the list is CSS keywords only — no Pantone, RAL or paint-brand catalogues, no eyedropper on an uploaded photo, and no invented names. Where two keywords share a hex the first one in the list wins, so #00FFFF always returns Aqua and never Cyan, and #FF00FF returns Fuchsia rather than Magenta. Matching runs in the page; nothing you paste is uploaded.
Use Cases
How to use
Stay on the Finder tab and either drag the color swatch on the left or type a hex value such as #3B82F6 into the Enter color box.
Read the two cards: Your Color repeats what you entered and Closest Match names the nearest CSS keyword.
Check the Match Quality line underneath — Exact match!, Very close, Close or Approximate — to see how far the keyword sits from your color.
Press the HEX, RGB or HSL button to copy the matched keyword in that notation.
To go the other way, switch to Browse All, narrow the grid with the search box or a category chip, and click a swatch to load it into the finder.
Pro Tips
- The HEX, RGB and HSL buttons copy the matched keyword's values, not the color you entered — if you want your own hex back, take it from the Enter color box.
- The box accepts three-digit shorthand: #f00 is expanded to #FF0000 and reported as Red, Exact match!
- Search in Browse All matches the hex text as well as the name, so typing 8b narrows the list to keywords such as DarkMagenta and DarkRed whose hex contains those characters.
- Clicking a swatch in Browse All returns you to the finder with Match Quality at Exact match! — the quickest way to read a keyword's RGB and HSL without leaving the page.
- Aqua and Cyan share #00FFFF, and Fuchsia and Magenta share #FF00FF; the finder keeps the first keyword it meets at the shortest distance, so those hexes always report as Aqua and Fuchsia.
Troubleshooting
The result cards disappear when I paste rgb(59, 130, 246) or type a color name.
Enter color reads hex only. Anything else fails to parse, no distance can be computed and the whole result panel hides. Convert to hex first, or use the search box in Browse All if what you have is a keyword rather than a number.
The HEX button copied a code I never entered.
The three copy buttons belong to the Closest Match card, so they copy the matched keyword: enter #3B82F6 and HEX gives #4169E1, RoyalBlue's value. To copy your own color, select it in the Enter color box instead.
The Copied line appears but nothing is on my clipboard.
The confirmation is shown as soon as the copy is requested, and the browser clipboard API can still refuse — it needs a secure page and a real click, and extensions can block it. Select the value in the card and press Ctrl+C, or Cmd+C on a Mac, to be sure.
Browse All shows an empty grid.
The search box and the category chips are applied together, so a filter such as Pink plus a search for blue leaves nothing. Clear the search box and set the category back to All; the counter under the grid should read 141 colors shown.
Every color I try comes back Approximate.
That label means the nearest keyword is more than 80 units away in RGB. With only 141 keywords, whole regions — muted browns, desaturated teals, most pastels — have no near neighbour. Treat the name as a rough label and keep the hex as the source of truth.
Frequently Asked Questions
Paste the hex into Enter color and read the Closest Match card. If your value is one of the 141 CSS keywords the card names it and Match Quality reads Exact match! — #FF7F50 returns Coral. If it is not, you get the nearest keyword with a Very close, Close or Approximate label, and the HEX, RGB and HSL buttons copy that keyword's values.
There is no single official figure to quote: MDN's named-color reference describes the 16 CSS Level 1 keywords plus orange, then says about 150 further colors have a keyword, and pairs such as aqua and cyan are aliases counted twice in some lists. What is exact here is this tool's own set — 141 keywords, all of them visible under Browse All, and that list is what your hex is compared against.
You get the nearest keyword and a quality label instead. #3B82F6 is not a CSS keyword, so the finder returns RoyalBlue (#4169E1) marked Close; the two are 33 units apart in RGB. Use the keyword where an approximation is fine — a comment, a ticket, a mood board — and keep your own hex in the stylesheet when the exact shade matters.
Not here. There is no image upload and no eyedropper: the only inputs are the hex box and the color swatch beside it. To name a color in a photo, sample the pixel with your operating system's color picker or a browser extension, copy the hex it reports, and paste that into Enter color.
No. Pantone, RAL and paint-brand ranges are proprietary catalogues and none of them ship with this tool. Everything it returns is a CSS color keyword — one of the 141 names under Browse All — which is what a browser understands when you write it in a stylesheet.
Not directly. The text box parses hex only, so pasting rgb(59, 130, 246) makes the result panel vanish because the parse fails. Convert the triple to hex first — 59, 130, 246 is #3B82F6 — and paste that. Once a match is found, the RGB button hands you the matched keyword back in rgb() notation.
Yes, in the Browse All tab. The search box filters the 141 swatches as you type and matches the keyword and the hex string, so typing green narrows the grid to the green keywords. Click a swatch and the finder reopens with that color loaded and Match Quality reading Exact match!
They are aliases: aqua and cyan are both #00FFFF, and fuchsia and magenta are both #FF00FF. MDN's named-color page lists both pairs as keywords for each other. Because the finder keeps the first keyword it meets at the shortest distance, #00FFFF always comes back as Aqua and #FF00FF as Fuchsia — the other name is equally valid CSS.
It measures a straight-line distance between the two colors' red, green and blue channels: each difference is squared, the three are added, and the square root is taken. The smallest distance wins. Zero means the hexes are identical, under 30 is labelled Very close, under 80 Close, anything larger Approximate. The measure is arithmetic, not perceptual.
The first 16 keywords were defined in CSS Level 1 and orange arrived in CSS Level 2; the long tail — DarkSlateGray, PapayaWhip, LemonChiffon and the rest — reached CSS from the X11 color list by way of SVG, as MDN's named-color reference explains. That history is why the set is uneven: several near-identical greys and greens sit beside regions with no close keyword at all.