CSS Color Name Finder

Maps an arbitrary hex color to the closest entry in the 147 named CSS colors specified in CSS Color Module Level 4. Distance is computed in a perceptual color space rather than raw RGB to avoid mismatches near greens and blues.

Useful when reverse-engineering a hex code into a memorable name for documentation or design system tokens. Returns the named color, its canonical hex, and the distance score.

The 147 named colors are a historical accumulation. The original CSS1 specification listed 16 (the VGA palette plus a few additions). CSS2 added "orange". CSS3 incorporated the X11 color list shipped with the X Window System, expanding to 147 entries with names like "darkslategray", "papayawhip", and "rebeccapurple". The last addition, rebeccapurple, was added in 2014 in memory of Eric Meyer's daughter and is the only named color introduced for personal rather than technical reasons.

The matching algorithm converts both the input hex and each named color into CIELAB color space, then computes CIEDE2000 distance. CIEDE2000 weights lightness, chroma, and hue separately and applies corrections for known perceptual irregularities. The result is a number where 1.0 represents the smallest difference a trained observer can reliably detect; below 2.3 is generally indistinguishable in casual viewing.

A worked example: input #5C4033. Raw Euclidean distance in RGB picks "saddlebrown" (#8B4513) as closest by ~52 units, but CIEDE2000 picks "darkolivegreen" (#556B2F) at distance 8.1 versus saddlebrown at 11.4. Visually, the input is a desaturated brown, and saddlebrown is the better match. CIEDE2000 still gets it wrong here because perceptual matching prioritizes hue rotation over saturation when both are off. This is a known weakness of the algorithm; on browns and grays, multiple candidates often score within rounding error.

Limitations: named colors are sparse in some regions of the gamut. Pure cyans and teals have many neighbors; muted earth tones have few. A "closest" match for a moss-green input may still differ noticeably from the input. The named-color set was not designed as a perceptually uniform palette; it accumulated. For design-system work, treat the named match as a hint and verify visually before adopting.