Find the nearest CSS named color
Given any hex color, this tool finds the single closest CSS named color and tells you exactly how close it is. It is the reverse of a name-to-hex lookup: useful when a design hands you a raw hex and you want a readable keyword, or when you are debugging why a named color does not quite match a comp. The match uses perceptual distance, not naive RGB math, so the result actually looks right.
How it works
Both your input color and every CSS named color are converted from sRGB into CIE Lab. The path is sRGB to linear RGB (inverse gamma), linear RGB to CIE XYZ via the D65 matrix, XYZ normalized against the D65 white point, then the standard Lab transform with its cube-root and linear segments. The tool then computes the CIE76 Delta-E — the straight-line distance between the two Lab points — for every named color and returns the smallest. Lab is used because Euclidean distance in it tracks perceived difference, which raw RGB distance does not.
Example and tips
The hex #6a4f9e resolves to a nearest match near mediumpurple (#9370db) with a moderate Delta-E, telling you it is in the right family but not a clean match. Treat the Delta-E score as your confidence meter: under 2.3 is a genuinely close visual match, while a double-digit score means CSS simply has no name near your color and you should keep using the hex. For the exact reverse lookup, use the CSS Named Color to Hex tool.
Why RGB distance gives worse matches
If you compare colors by their raw RGB values — treating red, green and blue as three axes of a cube and measuring the Euclidean distance — you get results that look wrong to the eye. The green channel is perceptually louder than red, and red is louder than blue, so equal numeric steps look very different depending on the channel. Moving from #007700 to #0000ff is a much larger perceived jump than the numbers suggest. CIE Lab was designed by the International Commission on Illumination specifically so that equal numeric steps in Lab correspond to equal perceived differences, which is why Delta-E in Lab space is the standard in professional color work and why this tool uses it.
Understanding the Delta-E score
The CIE76 Delta-E formula is the straight-line distance in Lab space between two colors. Here is a rough guide to what the number means in practice:
| Delta-E range | Visual interpretation |
|---|---|
| 0 | Exact match |
| 0–1 | Imperceptible difference |
| 1–2.3 | Just-noticeable difference for most people |
| 2–10 | Noticeable but in the same color family |
| 10–50 | Clear difference; different hue or lightness |
| 50+ | Dramatically different colors |
A Delta-E below about 2.3 means the CSS named color is a reasonable stand-in for your hex in most contexts. A score above 20 means no CSS keyword is visually close and you are better off keeping the hex value in your code.
Practical uses for this tool
Design handoff — a designer delivers a comp with hex codes. Knowing the nearest CSS name helps you write more readable CSS comments and makes code reviews easier without changing the actual color.
Accessibility auditing — error states often use specific reds. Checking the nearest named color tells you whether the design is using a standard CSS color or a custom one.
Debugging color inconsistencies — when a component renders slightly wrong, pasting both hex values here and comparing their nearest names and Delta-E scores helps narrow down whether the difference is perceptible.
Learning color names — the 140-odd CSS named colors cover a wide spectrum but with uneven distribution. Running your palette through this tool reveals which regions of color space CSS names well and which it leaves as hex-only territory.