Named Color Finder
Find the nearest CSS named color.
Overview
The Named Color Finder takes any hex code and returns the closest CSS named colour keyword — tomato, mediumseagreen, cornflowerblue and the rest of the 147 X11 / SVG names. It also reports the perceptual distance, so you can see whether the name is a confident match or merely the nearest of a bad bunch.
It is useful when writing readable CSS demos, dropping a colour into a quick design note where a name is friendlier than a hex, or finding a memorable alias for a brand colour. Code reviewers also use it to sanity-check whether a hex code in a PR is "basically just dodgerblue".
How it works
The full set of CSS named colours is precomputed in OKLab. Your input hex is converted to OKLab and compared against every named entry by Euclidean distance — the equivalent of Delta-E in OKLab. The closest match wins and is returned along with its exact hex and the distance value.
OKLab is used rather than naive RGB distance because it is perceptually uniform, so the "closest name" actually looks like the input rather than just being numerically near it. The tool also surfaces the top three matches, which is handy when the gap between candidates is small.
Examples
#fa8072 → salmon (exact)
#ff6347 → tomato (exact)
#3366cc → royalblue (#4169e1, ΔE 4.1) or steelblue (#4682b4, ΔE 5.0)
#664433 → saddlebrown (#8b4513, ΔE 7.8)
FAQ
How close is "close enough" to use the name?
A Delta-E below 2 is usually indistinguishable in casual viewing. Above 5 the named colour is clearly different — use it only when the loose meaning of the name is more valuable than precision.
Why does pure red not always return "red"?
Pure #ff0000 matches red exactly. But near-reds like #ff1100 are equidistant between red and other warm names; the tool surfaces both so you can pick.
Does the finder include CSS transparent or currentColor?
No. Those keywords are not colours; they are computed values. The finder works on actual swatches only.
Can I extend the list with my brand palette?
The default list is the CSS specification. For custom palettes, use the Tailwind or Material finders, which operate on their respective design-system swatches.