CS Color Palette

Named Color Finder

Paste any color and get the closest of the 148 CSS named colors — matched by CIELAB perceptual distance, with the top five candidates listed.

Three-step start

  1. 1
    Enter a color: paste HEX / RGB / HSL or use the color well — results update live.
  2. 2
    Read the match: see the closest keyword with its ΔE distance, plus a top-5 shortlist.
  3. 3
    Copy: one click copies color: tomato; or the keyword’s own HEX value.

Closest CSS named color

Matching runs in the CIELAB perceptual space by ΔE distance, so ranking follows how colors look, not how they are stored.

royalblue

color: royalblue;

Why CIELAB instead of comparing RGB numbers?

RGB distance and human vision disagree: yellow sits 'midway' in RGB yet looks extremely bright, and a 30-step difference on the blue channel is far more visible than 30 on red. CIELAB is constructed from human color response, so Euclidean distance inside it (ΔE) tracks 'how different does this look' — the only sane basis for ranking candidates.

Where do the 148 names come from?

The extended color keywords defined by the W3C CSS Color specification, including rebeccapurple. This site also generates a landing page for every single keyword — browse them in the named color index or open one keyword page to see its shades and pairings.

The ΔE of my best match is uncomfortably large — now what?

Then your color is far from every keyword, which is normal: the named set is sparse. Use the close keyword as a starting point and nudge back toward your original in the picker, and for real projects keep your own exact HEX — keywords are shorthand for communication, not a color system.

Frequently asked questions

What does “closest named color” mean and how is it computed?

CSS defines 148 color keywords you can write directly. The tool converts your color and every keyword into the CIELAB perceptual space and picks the one with the smallest Euclidean distance (ΔE). “Perceptual” means the distance tracks how different things look, not how different the raw RGB numbers are — much more accurate than comparing channels.

Should production code use keywords or HEX?

Keywords read beautifully in prototypes, teaching material and demos (tomato, navy, rebeccapurple). For a real design system prefer numeric values managed through CSS variables: some keyword names mislead (darkgray is darker than gray) and the fixed set cannot express brand colors exactly.

What ΔE counts as “basically the same”?

Rules of thumb: under 2 the difference is invisible; 2–5 you can spot it side by side on a close look; above 10 they are clearly two colors. The candidate list shows ΔE for each keyword so you can judge whether a swap is safe.