Color Name Finder

What it does

Find the closest CSS-named colors to any hex value. Drop in a hex code like #6495ED and the tool returns the 5 nearest CSS-140 named colors ranked by Euclidean RGB distance — in this case cornflowerblue (which is exactly #6495ED), steelblue, cadetblue, etc. Useful for cross-referencing custom brand colors to known names, finding a memorable name for a color in your design system, writing CSS that’s readable without color-picker tooling, and educational use (learning what colors like “papayawhip” or “rebeccapurple” actually look like).

CSS supports 140 named colors out of the box, ranging from obvious (red, blue, green) to obscure (papayawhip, mistyrose, blanchedalmond). The list dates back to the original CSS 1 specification (1996) and was inherited from X11’s color names — many of the unusual entries (peachpuff, gainsboro) come from a 1980s decision to map common interior-design / print color names to RGB triples. Most are still rendered identically across all modern browsers.

The matching uses Euclidean distance in RGB space: √((r₁-r₂)² + (g₁-g₂)² + (b₁-b₂)²). Simple, fast, and produces intuitive results for most colors. Note: RGB Euclidean distance doesn’t perfectly match human perception — perceptually-uniform color spaces (Lab, OKLab) handle that better — but for finding “close enough” named colors, RGB distance works fine.

How to use it

1. Pick a color from the color picker, or paste a hex code (#6495ED, #ff5733, etc.) directly.
2. The 5 closest CSS-140 named colors appear, ranked by RGB distance with the exact distance shown.
3. If the top match has distance 0, your input is exactly that named color (e.g. #6495ED is exactly cornflowerblue).
4. Click 'Copy name' to grab the named color for use in CSS — readable shorthand without color-picker tooling.
5. For brand-color planning, run your brand hex through and pick the closest evocative-sounding named match for your design-system docs.

When to use this tool

• Documenting brand colors with memorable references ('our blue is closest to cornflowerblue').
• Writing legacy CSS where hex codes are less readable than names.
• Educational / curiosity — learning what “papayawhip” or “mintcream” actually look like.
• Color-picker debugging — comparing a designer's mockup color to the closest standard named color.

When not to use it

• Production CSS where exact color matters — use the actual hex; don't substitute named colors that are visually different.
• Modern design systems with their own color tokens — those are documented as design-system variables (e.g. `--blue-500`), not CSS-named colors.
• Outside the web — print, paint, fabric, etc. have their own color naming systems (Pantone, Sherwin-Williams, RAL); CSS names don't translate.

Common use cases

• Verifying a number or output before passing it on
• Quick use during a typical workday
• Pre-decision sanity-check on inputs and outputs
• Educational use — demonstrating the underlying concept