🖍️
design

Color Name Finder

Match any hex value to the closest named CSS color and browse all 148 standard CSS color names.

color name findercss color namesclosest named color

Closest named CSS color

Distance is measured in RGB space.

Distance: —

Enter a hex value to find the closest CSS named color, or browse the grid below.

Named CSS color browser

All 148 standard names are searchable and clickable.

148 colors

How to use

How to match a hex value to the closest named CSS color and explore the full color list

  1. 1 Enter a three-digit or six-digit hex color when you want to compare it against the standard CSS named colors.
  2. 2 Review the closest named match and the RGB distance score to see how near the entered color is to the official name.
  3. 3 Use the search box to filter the full grid by color name or hex value when you are browsing the list manually.
  4. 4 Click any swatch in the grid to copy its hex value and use it in your design or stylesheet right away.
  5. 5 Compare several nearby names if you need a human-friendly label for documentation, demos, or UI tokens.

Finding the closest named CSS color is helpful when you want something more memorable than a raw hex code. Designers, developers, and content teams often need to describe colors in a human-readable way for design reviews, style guides, demos, or educational material. This tool calculates the nearest named CSS match for any entered hex value and also lets you browse every standard name in one searchable grid.

The distance score gives useful context because the closest named color is not always a perfect match. Sometimes a custom brand color falls near two or three official names, and the number helps you judge whether the match is extremely close or only roughly similar. That makes the tool practical for both exact lookups and approximate naming decisions.

The searchable browser section is also useful on its own. If you already know a name such as SlateGray, RebeccaPurple, or LightGoldenRodYellow, you can locate it quickly and copy the hex value with one click. That saves time when you are building UI themes, writing CSS, or teaching named color basics without jumping between multiple references.

More Design tools

Related tools

You might also like