CSS Color Name Finder (Nearest Named Color)

You picked a custom color (#3a7bd5) and now want to know "what would I call this?" Or you're working in a CSS-named-colors-only context (some email clients, brand guidelines) and need to find the closest match. This tool maps any color to the nearest of the 147 standardized CSS color names — using perceptual color distance (CIE76 ΔE), not naive RGB distance.

How to use the CSS Color Name Finder (Nearest Named Color)

Use the color picker or type any CSS color value (#abc, rgb(58, 123, 213), hsl(214, 64%, 53%)). The output shows the closest named color, the next 4 closest alternatives, and the perceptual distance (ΔE) — values under 2.3 are imperceptible to the human eye; over 10 is a noticeable difference.

About CSS Color Name Finder (Nearest Named Color)

The CSS specification standardized 147 named colors (some sources count 140 / 148 / 149 depending on how aliases are counted). These come from the original X11 color names ported to HTML 4 in 1998, with some additions in CSS Color Level 4. Examples: aliceblue, cornflowerblue, tomato, rebeccapurple (added 2014 in honor of Rebecca Meyer).

"Nearest" color comparison can be done several ways:

  • Euclidean RGB distance — simple but perceptually inaccurate (a small change in green looks larger than the same change in blue).
  • HSL distance — better but still naive.
  • CIE Lab distance (ΔE) — perceptually uniform; the gold standard. The 1976 formula (ΔE*ab) is simple Euclidean in Lab space; 2000 (ΔE*00) is more accurate but heavier math.

This tool converts both query and named colors to CIE Lab (via XYZ), then computes ΔE*ab. The reported distance is interpretable: ΔE < 1 is invisible to the eye; 1-2 requires close inspection; 2-10 visible; > 10 obviously different.

Common use cases

  • Naming custom colors — design system docs, brand color references.
  • Working in named-color-only contexts — some email HTML renderers strip non-named colors.
  • Color education — "what color is this really?" with a familiar name attached.
  • Quick palette substitution — replace a custom color with the standard equivalent.
  • Accessibility / consistency — flag when a custom color is essentially the same as a named one to encourage reuse.

Frequently asked questions

Why CIE Lab instead of RGB?
Lab is designed to be perceptually uniform — equal Euclidean distance in Lab equals equal perceived color difference. RGB distance is not perceptually uniform.

What's a "good" ΔE?
Under 2.3 (the "just-noticeable-difference" threshold) means the colors are essentially indistinguishable. Under 5 is close. Over 10 is clearly different.

Does this use Pantone or Crayola names?
Only the 147 standard CSS named colors. Pantone is a proprietary system requiring licensing.

Why does my color match something unexpected?
CSS named colors are not evenly distributed in color space — there are 30+ blues and grays, fewer oranges and pure browns. Your color might match the nearest available name even if it isn't a perfect fit.