Paste any hex, drag the HSL sliders, or click a swatch in the browse grid to set your target color. The tool sorts all 148 CSS named colors by perceptual distance and shows the eight closest matches with their hex, RGB, and ΔE score. A ΔE under 2.3 is the threshold most humans stop perceiving a difference — anything below that is safe to swap in your stylesheet as the named keyword.

The reverse-lookup field goes the other way: type a CSS keyword like rebeccapurple, papayawhip, or darkslategray and the tool resolves it to its exact hex. Handy when you see an unfamiliar name in legacy CSS and want to know what it actually paints, or when you are double-checking whether lightgray and lightgrey really are the same color (they are — both spellings map to #d3d3d3).

Distances are computed in CIE Lab with a CIE76 ΔE metric. Lab is perceptually uniform, so a distance of 5 between two colors looks the same whether you compare two blues or two yellows — RGB distance would favor green-heavy colors because human eyes are most sensitive to green. The “exact” / “imperceptible” / “close” labels are derived from the classic ΔE thresholds photographers and printers use when matching Pantone swatches.

Use this tool when your designer hands you a raw hex and you want to know if there is a shorter, more readable CSS keyword available, or when you are writing documentation and want to name a color you have been using. The copy button on the CSS block exports your input color plus the top five closest named colors as CSS custom properties, ready to paste into any stylesheet.