Color Name Finder: Find the Closest Named CSS Color

CSS includes 148 named colors, from aliceblue to yellowgreen. But when you have a specific hex color, which named color is closest? Our free Color Name Finder answers that question instantly and lets you browse the full catalog of named CSS colors.

How to Use the Finder

1. Enter a hex color: Type a hex code (e.g., #6750A4) or use the color picker
2. Click Find (or press Enter): See the closest named CSS color
3. View details: The color preview shows your hex alongside the closest match, with the color name, hex values, and distance score
4. Browse all colors: Scroll through the grid of all 148 named CSS colors
5. Click any swatch: Click a color in the grid to see its details

What the Distance Score Means

The distance is calculated using Euclidean distance in RGB color space. A distance of 0 means an exact match. Lower numbers mean the named color is closer to your input. Distances above 50 mean the match is only approximate.

Common Use Cases

• CSS development: Find a human-readable name for a color close to your design
• Design systems: Map custom colors to their nearest CSS name equivalents
• Color exploration: Browse the named CSS palette for inspiration
• Documentation: Reference colors by name instead of hex codes for readability
• Learning: Discover the 148 named colors available in CSS

The 148 Named CSS Colors

Named CSS colors span the full spectrum:

• Reds: crimson, firebrick, indianred, tomato, coral, salmon
• Blues: navy, royalblue, dodgerblue, skyblue, steelblue
• Greens: forestgreen, limegreen, seagreen, springgreen
• Purples: indigo, rebeccapurple, mediumpurple, plum, orchid
• Neutrals: black, dimgray, gray, silver, gainsboro, white
• Browns: saddlebrown, sienna, chocolate, peru, tan

Tips

• Use the color picker for visual selection instead of typing hex codes
• The search box filters the color grid by name
• Named colors are convenient in CSS for quick prototyping
• For production, hex or HSL values give you more precise control
• rebeccapurple (#663399) was added to CSS in honor of Eric Meyer’s daughter

Frequently Asked Questions

Are named colors the same in all browsers? Yes. The 148 named CSS colors are standardized and render identically across all modern browsers.

Can I use named colors in CSS? Yes. Use them directly: color: rebeccapurple; or background: coral;. They’re valid CSS values.

What’s the difference between gray and grey? CSS accepts both spellings. gray and grey produce the same color (#808080), and the same applies to darkgray/darkgrey, etc.

---

Try our free Color Name Finder to find named colors for any hex value.