What Is the Color Name Finder?
Enter any hex, RGB, or HSL color and find its closest named CSS color, Pantone match, and common English name.
Why Use This Tool?
With over 16 million possible hex colors, most don't have proper names. This tool finds the closest named match from CSS named colors, extended color databases, and common design terminology.
How to Use This Color Name Finder
- Enter a hex color — Type or paste any hex color code (e.g., #FF6B6B) into the input field.
- See the nearest named color — The tool instantly finds the closest CSS named color from the 148 standard named colors.
- Compare the match — View both your input color and the matched named color side by side to judge how close the match is.
- Copy the color name — Click to copy the CSS color name for use in your stylesheets where named colors improve readability.
Tips and Best Practices
- → Use named colors for readability. In code reviews and design tokens,
color: coral communicates intent better than color: #FF7F50.
- → Know the 148 standard CSS colors. CSS supports 148 named colors from
aliceblue to yellowgreen. These are consistent across all browsers and have been standardized since CSS3.
- → Named colors don't support alpha. If you need transparency, switch to rgba(), hsla(), or the newer CSS color functions. Named colors are always fully opaque.
- → Use named colors in prototyping. During rapid prototyping, named colors like
tomato, steelblue, and seagreen are faster to type and easier to adjust than hex codes.
Frequently Asked Questions
How many CSS named colors are there?
CSS defines 148 named colors, from 'aliceblue' to 'yellowgreen'. This tool matches against all of them and shows the closest match by color distance.
How is the closest color determined?
The tool calculates the Delta-E distance in the CIELAB color space, which measures perceptual difference. The named color with the smallest Delta-E value is the closest match.
Can I search by color name?
Yes. Type a color name like 'coral' or 'teal' to see its exact hex value and compare it to similar named colors.
How many CSS named colors are there?+
CSS defines 148 named colors. These include 17 original HTML colors (like red, blue, green) plus 131 extended colors (like coral, teal, tomato). The keyword 'transparent' and 'currentColor' are also valid CSS color values but aren't traditional named colors.
What is the difference between named colors and hex codes?+
Named colors are human-readable keywords (like 'coral' or 'steelblue') that map to specific hex values. They're easier to read and remember but limited to 148 options. Hex codes give you access to all 16.7 million RGB colors. Use named colors for readability and hex codes for precision.
Are CSS named colors consistent across browsers?+
Yes, all 148 CSS named colors render identically across every modern browser. They've been standardized since CSS3 and are part of the CSS Color Module specification.
Which color naming system does the lookup use?+
The default is the CSS4 named-color list (140 named colors that browsers recognize) plus the X11 color names and Pantone bridge approximations. Pantone matches are perceptual approximations using Delta E 2000 distance, not exact licensed swatches; for print production verify against an official Pantone fan deck. The Crayola palette and the Material Design color names are also available as alternative naming systems through the dropdown selector.
Why do similar hex values return different names?+
Color naming uses nearest-neighbor matching in a perceptual color space (LAB or OKLCH depending on the system). Two hex values that look similar to the eye can fall on opposite sides of the boundary between two named regions. The tool reports the distance score next to each candidate name so you can see how confident the match is; a distance under 5 is essentially identical, 5-15 is close, above 15 means the named color is only approximate.
Built by Derek Giordano · Part of Ultimate Design Tools
Privacy Policy · Terms of Service