Color to CSS Named Color

Find the closest CSS named color for any HEX or RGB value with a perceptual distance score and ranked alternatives.

Paste a HEX or RGB value (or use the color picker) and the tool instantly returns the closest CSS named color, a distance score, and ranked alternatives you can copy straight into your stylesheet.

Match any HEX or RGB to its closest CSS named color

This CSS named color finder turns any HEX, RGB, or HSL input into the closest keyword from the official CSS color list — complete with a perceptual distance score so you know exactly how faithful the match is. Drop in #1B6B45 and you instantly see whether forestgreen, seagreen, or darkgreen is the nearest neighbor, along with ranked alternatives and copy-ready values.

CSS named colors are the keyword set browsers recognize natively — words like tomato, cornflowerblue, and papayawhip. MDN documents the full keyword list, and the CSS Color Module Level 4 spec defines 147 valid keywords (with a handful of gray/grey aliases sharing hex values).

Why use a closest CSS color name?

  • Readable stylesheets. color: tomato communicates intent better than color: #ff6347 in prototypes and demos.
  • Design conversations. "It's a forestgreen, slightly darker" is more memorable than reciting six hex digits in a review.
  • Documentation. Audit reports, changelogs, and design tokens read more naturally when anchored to a known name.
  • Quick verification. A distance score of 0 confirms an exact keyword exists; anything above tells you the gap.

How the closest match is calculated

The tool compares your input against every CSS keyword using a perceptual color distance (closer to ΔE than naive RGB), so two colors that look alike — but have very different RGB coordinates — still match correctly. The lower the score, the closer the match. A score of zero means your HEX is already a named color.

If you need the inverse workflow — turning a vague color into a named family — pair this page with the Color Name Finder for broader naming dictionaries, or run a precision conversion through the Color Converter when exact HEX, HSL, and OKLCH values matter more than the keyword.

When a CSS named color is the wrong tool

Named keywords are convenient but coarse. Brand palettes and design systems should stay anchored to precise HEX or OKLCH values — use the closest CSS keyword for prose and prototyping, not as the source of truth. For production palettes, build proper tokens with the CSS Theme Builder, and when print or screen accuracy matters, fall back to a dedicated converter such as the HEX to RGB Converter.

Quick example

/* Closest CSS named color to #1B6B45 is forestgreen (#228B22) */
.cta {
  background: forestgreen; /* memorable */
  background: #1B6B45;     /* exact brand value */
}

Keep the keyword for readability, keep the HEX for accuracy — and let the distance score tell you when the two are too far apart to swap.

Frequently Asked Questions