HEX to Color Name Converter
Free, accurate, and instant conversion. Preview your color in real-time on digital and print mockups.
Source Input HEX
/* CSS Variable */ --color-primary: #000000; /* Standard */ color: #000000; background-color: #000000;
What Color Is This?
You've eyedropped a nice color from a photo. The code is #5F9EA0. But what do you call it? Is it Blue? Green? Teal? Cyan?
This tool uses mathematical proximity to identify your Hex code. It's like Shazam for colors. It tells you that #5F9EA0 is actually CadetBlue.
Identify
Stop calling everything "Dark Blue". Get the specific, descriptive name (e.g. "Midnight Blue").
Communicate
"Make the button more 'Coral' and less 'Salmon'". Names help teams talk about design.
Label
Perfect for Design Systems. When you define a color variable, you need a name for it.
How "Nearest Neighbor" Works
The 3D Color Space
Imagine a 3D room where Red, Green, and Blue are the X, Y, and Z axes. Every named color (like "Red" or "Burlywood") is a floating ball in that room. When you type a hex code, we place your dot in that room and measure the distance to every single named ball, returning the closest one.
Pro Tips for Color Naming
- • Design tokens: Use descriptive names like `ocean-blue` as base, then map to semantic names like `primary`.
- • Check distance %: If match is >90%, the name is reliable. Below 70%, it's a rough approximation.
- • Team communication: Share color names in design handoffs—"Coral" is clearer than "#FF7F50".
- • Accessibility: Use names in alt text and ARIA labels for colorblind users.
Why Names Matter for Design Systems
Using abstract names is better than using functional names.
- Bad:
$blue-button(What if you rebrand to red? The variable name is now a lie.) - Good:
$primary-color(Semantic, but vague.) - Best:
$royal-bluemapped to$primary-color. (This decouples the *value* from the *usage*. This tool helps you find those specific names.)
Who Needs Color Name Identification?
Design System Architects
Name color tokens consistently across your component library.
UX Writers
Describe colors in product copy and documentation.
Brand Managers
Identify and catalog competitor brand colors.
Frontend Developers
Create meaningful variable names for CSS/Sass/Tailwind config.
Frequently Asked Questions
How does it find the name?
We compare your Hex code against a database of named colors using a 'Color Distance' formula (usually Euclidean distance in RGB or CIELAB space). We return the name that is mathematically closest to your input.
Does every Hex code have a unique name?
No. There are over 16.7 million separate Hex codes. Even large dictionaries only have 1,000-2,000 names. Most results will be 'Approximate Matches'.
Why is my blue called 'Ziggurat'?
Color names come from many sources: X11 standards, crayon boxes, paint catalogs, and community lists. Some names are descriptive (Light Blue), while others are poetic or abstract (Ziggurat, Manatee, Atomic Tangerine).
Is this useful for Accessibility?
Yes! Telling a blind user that a button is '#FF0000' is useless. Telling them it is 'Red' allows them to understand the UI context (e.g., a danger button).
Can I use the output name in CSS?
Only if it is one of the 140 standard 'Web Safe' names. If the tool returns a fancy name like 'Alizarin Crimson', you cannot use that directly in CSS. You must stick to the Hex code.
What if I get 'Black' for a dark grey?
This means your color is so dark that it is mathematically closer to pure Black (#000000) than to any specific dark grey name in our list.
What is CIELAB and why does it matter?
CIELAB (Lab*) is a color space designed to be perceptually uniform—meaning equal distances represent equal perceived differences. We use it for more accurate 'human-like' color matching rather than raw RGB distance.
Can I find Pantone names with this tool?
We include some Pantone-like names, but official Pantone colors are trademarked. For exact Pantone matching, you'll need specialized tools or a Pantone license.
What if multiple names are equally close?
We return the first match from our prioritized database. CSS standard names are checked first, then extended dictionaries. You may get slightly different results from other tools.
Does this tool support other languages?
Currently, we return English color names only. Color naming conventions vary significantly across languages and cultures.
Can I use this programmatically via API?
Not yet, but we're working on it! For now, you can use libraries like 'ntc.js' (Name That Color) or 'color-namer' in Node.js for programmatic access.
How accurate is the matching?
Very accurate for common colors. For obscure shades, results depend on our dictionary coverage. We show the 'distance' percentage so you can judge how close the match is.