How to use Color Name Generator
Browse, search, and generate color names from the complete web color database — 140+ CSS named colors, 1,500+ X11/SVG color names, and common paint/design color names. Enter a HEX or RGB value to find the nearest named color with distance score. Perfect for designers naming custom palette entries, developers picking readable CSS class names, or anyone building a color system who needs standardized, human-readable color names.
- Browse the full list of named colors by category (red, blue, green, neutral, etc.).
- Search by name (e.g., "coral") to see all variations and their HEX/RGB values.
- Enter a HEX value to find the nearest named color by perceptual distance (ΔE).
- Click any color to copy its HEX code, CSS name, or RGB value.
- Use the palette builder to collect multiple named colors into a set.
Your data never leaves your device — 100% private processing.
CSS named colors reference
CSS defines 140 named colors directly usable in stylesheets without HEX codes — from basic names like red and blue to specific hues like rebeccapurple, cornflowerblue, and papayawhip. These names are defined in the CSS Color Level 4 specification and supported in all modern browsers. Named colors are useful for quick prototyping, readable code in design tokens, and accessibility audits where color names communicate intent more clearly than hex values.
| Category | Example names | Count |
|---|---|---|
| Reds | red, crimson, tomato, indianred, firebrick | 9 |
| Greens | green, lime, forestgreen, seagreen, olivedrab | 12 |
| Blues | blue, navy, royalblue, cornflowerblue, steelblue | 16 |
| Purples | purple, violet, rebeccapurple, plum, orchid | 10 |
| Neutrals | white, black, gray, silver, gainsboro, snow | 14 |
Perceptual color distance (ΔE)
Color distance is measured in ΔE (delta-E), a perceptual metric calculated in the CIELAB color space where distances correspond to human-perceived color differences. ΔE < 1 is imperceptible to most people; ΔE 1–2 is just noticeable; ΔE 2–10 is a small but visible difference; ΔE > 10 is clearly different colors. When you enter a custom hex value, the tool finds the named color with the smallest ΔE distance — meaning the perceptually closest match, not necessarily the closest in RGB channel values.
Worked examples
Exact CSS keyword
Inputs: #ff6347
Result: nearest name "Tomato" (exact CSS keyword, ΔE ≈ 0)
rebeccapurple
Inputs: #663399
Result: nearest name "RebeccaPurple" (exact CSS keyword)
Glossary
- CSS Color Level 4
- The W3C specification defining extended CSS color syntax including named colors, oklch(), color-mix(), and the wide color gamut.
- ΔE (delta-E)
- A perceptual color difference metric calculated in CIELAB color space — smaller values mean the colors are more similar to human vision.
- CIELAB
- A device-independent color space that models human color perception, used as a basis for perceptual color calculations.
- rebeccapurple
- A CSS named color (#663399) added to honor Rebecca Meyer, daughter of CSS specification author Eric Meyer, who died in 2014.
Related reading
Frequently Asked Questions
Why use Color Name Generator?
- Find the nearest CSS named color for any hex value using perceptual ΔE distance
- Browse all 140+ CSS Color Level 4 names organized by color family category
- Human-readable names document design intent more clearly than raw hex codes
- Confirm a hex code matches an expected named color when auditing a design system
Common use cases
- Find a semantic CSS name for a custom brand color in utility class documentation
- Look up the human-readable name for a hex value during a design token rename
- Browse all CSS names in the blue family when choosing a link-color convention
- Verify a generated palette entry matches an expected named reference color
- Label a custom Figma library color with a meaningful, searchable identifier
Get weekly tool tips & updates
New tools, power-user tips, and productivity hacks — delivered free every Friday.
No spam, ever. Unsubscribe with one click.
Related Generators
Color Converter
Convert colors between HEX, RGB, HSL, HSV, and CMYK formats instantly. Paste any color format and get all others with one click.
CSS Gradient Generator
Create linear, radial, and conic CSS gradients with live preview controls. Copy production-ready gradient code instantly online.
Color Palette Generator
Generate beautiful harmonious color palettes online. Choose from complementary, analogous, triadic, and monochromatic schemes. Free color scheme creator.
Color Name Finder
Find the name of any color by hex code or color picker. Get the closest CSS color name, Tailwind color name, and nearby alternatives.
Password Generator
Generate strong, secure, random passwords instantly. Uses the Web Crypto API — nothing is sent to any server, so your passwords stay private.
Random Number Generator
Generate random numbers between any range instantly. Choose count, allow duplicates, and use dice shortcuts (d6, d20). Free online random number generator.
Explore all Generators.