CSS supports 148 standard named colors — from aliceblue to yellowgreen — but matching an arbitrary hex value from a design file to the closest named color is a manual, eyeballing exercise without a reference. This tool does the color-distance math for you.
What Is the Color Name Finder?
Enter a hex color (or pick one with the native color swatch), and get the nearest standard CSS named color, ranked by Euclidean distance in RGB space, along with the next four closest matches. A full searchable reference grid of all 148 named colors sits below for browsing.
How to Use It
- Open the tool at /tools/color-name-finder.
- Type a hex value, or click the color swatch to use your browser’s native color picker.
- Read the nearest named color and its distance score.
- Browse or search the full 148-color reference grid below; click any swatch to load it into the finder.
Key Features
- Euclidean RGB distance matching against the full standard CSS named-color set.
- Native color picker integration, no manual hex typing required.
- Top-5 closest matches, not just the single nearest color, for context.
- Searchable 148-color reference grid, browsable by name.
When to Use This Tool
- Naming a design token or variable after the closest recognizable color name.
- Quickly checking if a hex value is an exact CSS named color (distance 0).
- Exploring the full CSS named-color palette when picking a quick placeholder color.
Try It Now
Open Color Name Finder directly, or press ⌘K and type the tool name from anywhere on the site.
Part of the Color Tools collection on WebdevToolbox — free, browser-based developer tools with no login required.