Color Name Finder — What Is This Color Called?
You have a hex code — maybe #4682B4 from a design mockup, or rgb(72, 61, 139) from a colour picker — and you want to know what it is actually called. Is it teal? Steel blue? Something else entirely? Unless you have all 148 CSS named colours memorised, the fastest way to find out is to look it up programmatically.
Why Do CSS Named Colours Exist?
The CSS specification defines 148 named colours that browsers recognise as valid values. The list originated in early HTML (the original 16 VGA colours like red, lime, and navy) and grew over the years as CSS adopted the X11 colour set used by Unix windowing systems since the 1980s. The result is a curated palette that ranges from intuitive names like coral and gold to famously odd ones like lemonchiffon, papayawhip, and blanchedalmond.
Named colours are useful in several practical contexts. They make CSS more readable — color: steelblue communicates intent better than color: #4682B4. They are easier to remember during rapid prototyping. And they serve as quick reference points when discussing colours with teammates who are not staring at a hex chart.
How Colour Naming Works
Every named colour maps to a specific hex value. tomato is exactly #FF6347; darkslategray is exactly #2F4F4F. When you enter an arbitrary colour — one that does not match any named colour exactly — the tool needs to find the closest match.
The standard approach is to calculate the Euclidean distance between your colour and every named colour in the RGB colour space. Think of each colour as a point in a three-dimensional cube where the axes are red, green, and blue (each ranging from 0 to 255). The distance between two points in that cube tells you how perceptually similar the colours are. The named colour with the smallest distance to your input is the best match.
This method is fast and works well for most practical purposes. It is worth noting that the RGB colour space is not perfectly uniform — human eyes are more sensitive to differences in green than in blue, for example — but for the purpose of finding the nearest CSS name, Euclidean distance in RGB delivers reliable results.
When Is a Colour Name Useful?
Quick communication. Telling a colleague “that button is roughly coral” is faster and clearer than reading out a six-digit hex code, especially in conversation. Named colours give you a shared vocabulary.
Prototyping and sketching. When you are building a rough layout and do not need exact brand colours, named colours let you type meaningful values without opening a picker. background: lavender is immediately readable in a stylesheet.
Learning and teaching. If you are new to web development, named colours make CSS less abstract. Seeing that #F0E68C is called khaki connects the code to something tangible.
Accessibility descriptions. When documenting colour choices for accessibility reviews, a name like “dark olive green” is more descriptive than a raw hex value, especially for stakeholders who are not designers.
How to Find a Colour Name Online
Our free Color Name Finder runs entirely in your browser. Enter any hex code (like #8B0000) or RGB value (like rgb(139, 0, 0)) and the tool instantly shows the closest CSS named colour, along with its exact hex, RGB, and HSL values and the Euclidean distance from your input.
If the distance is zero, your colour matches a named colour exactly. If it is small (under 10–15), the match is very close. Larger distances mean the named colour is an approximation — still the nearest one, but visibly different from what you entered.
No data is uploaded. The entire 148-colour dataset and the matching algorithm run locally in your browser.
→ Open the free Color Name Finder
Paste a hex or RGB value, find the nearest CSS colour name instantly — no account, no upload, no tracking.