Color Name Finder
GeneratorsFind the nearest named color for any hex, RGB, or HSL value from CSS web colors, X11 standard colors, and Pantone approximations.. Free, private — all processing in your browser.
Exact CSS color name match:
Paste a hex color and this tells you the CSS color name closest to it. If it's an exact match — say #ff0000 is "red" — you'll see that. If it's not, you get the six nearest named colors ranked by how close they are, each with a swatch, its hex, and a distance figure so you can judge the fit yourself.
This is handy when you've got a hex value and want a human-readable name for it: writing a comment, naming a variable, describing a color in a design note, or just satisfying the "what would you even call this?" curiosity. CSS has 148 named colors, and most people can only name a dozen, so seeing that #6495ed is "cornflowerblue" is genuinely useful.
Keep in mind that named colors are a fixed, limited set. Your color usually won't have an exact name — the closest match is an approximation, not a substitute. For actual styling, the hex value is what you should use; the name is for readability and reference.
Features at a glance
Three naming collections
CSS named colors (147), X11 standard set, and extended database (~1500 cultural and design names).
Perceptual distance match
OKLCH-based nearest match, not RGB Euclidean, for perceptually accurate results.
Top 5 alternatives
Shows the closest plus four next-closest names so you can pick the most fitting one.
Exact match detection
If the input is one of the named colors, the tool confirms with distance 0.
Multiple input formats
Hex, RGB, HSL, or RGBA — parsed automatically.
Canonical value shown
Each named color shows its canonical hex value so you can verify match quality.
Distance warning
Flags when the best match is still distant, suggesting you describe the color differently.
Client-side only
Color data stays in your browser — no upload.
Step by step
- 1
Enter your color
Type a hex (#FF6B35), RGB, HSL, or paste from a color picker.
- 2
Pick collection
CSS-only for web standards, X11 for Linux/Unix compatibility, or extended for broader design names.
- 3
See matches
Top 5 named colors appear ranked by perceptual distance with their canonical hex values.
- 4
Pick the name that fits
Choose the one that best matches your communication context (formal CSS name vs evocative design name).
- 5
Copy or share
Copy the name or hex value with one click.
Common use cases for the Color Name Finder
Design and communication
- →Design review descriptions: Refer to colors by name in design critiques or specifications rather than hex codes for quicker understanding.
- →Brand color naming: Pick a memorable name for your brand’s primary color based on its nearest recognized name.
- →Marketing copy: Describe product colors in copy using evocative named colors ("rose gold", "emerald", "slate blue") rather than technical codes.
Development
- →CSS with named colors: Use CSS-compliant color names for readability in stylesheets where appropriate (color: cornflowerblue).
- →Debugging: Quickly identify an unknown color in a screenshot by matching against named database.
- →Accessibility: Provide meaningful color names in alt text or ARIA labels rather than hex codes for screen reader users.
Writing and education
- →Art and design writing: Reference colors by evocative names in art criticism, design blogging, or educational material.
- →Creative writing: Use specific color names in fiction and poetry for vivid imagery ("the sky was the color of lapis lazuli").
- →Educational materials: Teach color theory with named examples that learners can look up easily.
Color Name Finder in practice
Exact CSS match
Input matches a CSS named color exactly.
#4682B4
exact match: steelblue distance: 0
Near CSS match
Close to a named color but not exact.
#FF6B35
nearest: tomato (distance 6.2) alternatives: coral, darkorange, salmon
Extended database
A specific color matches a cultural name.
#F5B2B0
nearest: millennial pink (extended database) CSS nearest: lightpink (distance 5.3)
Gray range
Gray color identification.
#5A6878
CSS nearest: slategray (distance 3.1) extended: charcoal, steel, basalt
Poor match warning
An unusual color far from any named standard.
#B0FF00
nearest: greenyellow (distance 14.2) warning: significant visual difference; consider describing directly
Under the hood
It parses your hex (3- or 6-digit, with or without the leading #) into RGB, then compares it against the full CSS Color Module Level 4 named-color set. Distance is straight Euclidean distance in RGB space — the square root of the summed squared differences of the red, green, and blue channels. The six smallest distances are shown, sorted nearest-first, and a distance of exactly 0 is labelled an exact match.
RGB Euclidean distance is simple and fast but not perceptually uniform: it treats all channels equally, while the human eye is more sensitive to green and to differences in darker colors. So the "closest" name is a reasonable pick, not a guarantee of the closest color your eye would choose. For naming and reference that's fine; for perceptual color matching, a Lab/CIEDE2000-based tool would be more accurate.
Everything runs in your browser as you type — no network calls, nothing stored.
Pitfalls and fixes
⚠Named colors are a fixed set
CSS has 148 named colors. Your hex usually won't match one exactly, so the result is the closest name, not an equivalent. Use the hex value for styling; the name is for readability.
⚠RGB distance isn't perceptual
The match uses straight RGB distance, which doesn't weight for how the eye perceives color. The top result is a good pick but occasionally a lower-ranked name may look closer to you.
⚠Some names are near-duplicates
aqua and cyan are the same color (#00ffff), as are fuchsia and magenta. You may see a 'tie' where an exact match could go by more than one name.
⚠This finds CSS names, not Tailwind classes
The set is CSS named colors. If you need blue-500 or slate-700, use a Tailwind color finder — Tailwind's palette is different from CSS's named colors.
⚠Invalid hex returns nothing
Input must be a valid 3- or 6-digit hex. Formats like rgb() or hsl() aren't parsed here; convert to hex first.
Alternatives and comparisons
This goes hex → name. If you want the reverse (type a name, get the hex) any CSS reference table covers that, and browsers accept named colors directly in CSS. The value here is the nearest-match search: for an arbitrary hex that isn't a named color, it finds the closest ones instead of just saying "no match".
If you're specifically after Tailwind class names rather than CSS names, use a Tailwind color finder instead — that maps to Tailwind's palette (blue-500, slate-700, etc.), which is a different set from CSS's 148 named colors.
Frequently asked questions about the Color Name Finder
▶How does it decide the closest color?
It converts your hex to RGB and measures the Euclidean distance to every CSS named color, then shows the six nearest. A distance of zero means an exact name match.
▶How many CSS named colors are there?
148 in the CSS Color Module Level 4 specification, including familiar ones like red and blue and obscure ones like gainsboro, papayawhip, and rebeccapurple. This tool searches the full set.
▶Why isn't the closest name a perfect match?
Because named colors are a limited fixed palette — most hex values fall between them. The nearest name is an approximation. For exact color, always use the hex value in your CSS.
▶Can I search by color name to get the hex?
This tool goes from hex to the nearest name. For name-to-hex, a CSS color reference table works, and browsers accept named colors like 'coral' directly in CSS.
▶What's the difference between this and a Tailwind color finder?
This matches against CSS's 148 named colors. A Tailwind color finder matches against Tailwind's utility palette (like blue-500) and returns class names, which is a different set entirely.
Additional resources
- CSS Color Module Level 4 — Official CSS specification for named colors.
- X11 color names — Historical X11 color list, the basis for much of CSS named colors.
- Pantone trend colors — Pantone Color Institute trend colors, often adopted into design language.
- Name That Color — A classic reference tool with a broad color name database.
- Crayola color list — Cultural reference of Crayola crayon color names, included in extended database.
Related tools
All GeneratorsColor Blindness Simulator
Simulate how colors and images appear to users with protanopia, deuteranopia, tritanopia, achromatopsia, and other color vision deficiencies.
Color Contrast Checker
Check color contrast ratios between foreground and background for WCAG 2.1 AA and AAA compliance with live preview.
Color Converter
Convert between HEX, RGB, HSL, HSV, CMYK, Lab, LCH color formats
Color Palette Generator
Generate harmonious color palettes from any base color with complementary, analogous, triadic, and monochromatic schemes.
Color Picker
Pick colors interactively and get HEX, RGB, HSL, HSV, and CMYK values with alpha, plus save swatches to build palettes you can copy straight into CSS, Figma, or code.
Color Shades Generator
Generate tints (lighter), shades (darker), and tones (desaturated) from any base color for design systems and UI states.
Learn more
Explore more tools
200+ free tools that run in your browser.
Browse all tools →