CSS recognises 148 keyword colour names, from common ones like red and navy through to specific entries like rebeccapurple and papayawhip, each tied to one exact hex value defined in the specification. Almost no arbitrary colour you type in will land on one of those exact values, which is why a useful color name finder has to rank every named colour by closeness rather than looking for an exact match that will usually not exist.
The comparison runs entirely in your browser. Your input colour is checked against the full built in list using plain arithmetic, with nothing sent to a server at any point.
How this color name finder measures distance in RGB space
Every CSS named colour is stored as its red, green and blue channel values, each from 0 to 255. For your input colour, the tool calculates the Euclidean distance to every one of those 148 entries: the square root of the sum of the squared differences between matching channels. The name with the smallest resulting distance is reported as the closest match.
A distance of 0 means an exact match, which happens whenever your input is itself one of the standard names' precise hex values. Larger distances indicate a looser match, and the tool reports that number alongside the name so you can judge for yourself whether the closest available name is actually close enough for what you need.
When you need the nearest named colour instead of an exact hex
Named colours are useful whenever a human readable label communicates more than a hex code would, even though a hex value remains more precise. A design conversation, a bug report, or a quick verbal description all benefit from being able to say a colour's actual name rather than reading out six hexadecimal digits.
- Describing a brand or UI colour in writing, where a name reads far more naturally than a hex string.
- Quickly labelling swatches during a design review without inventing your own naming scheme.
- Checking whether a colour picked from an image happens to already be a standard CSS keyword.
- Choosing legacy CSS that favours named keywords over hex values for readability in a style guide.
- Reach for the exact hex value instead whenever pixel perfect colour accuracy matters more than a label.
Why 'closest' is a distance calculation, not a perfect match
Euclidean distance in RGB space is simple to compute but does not perfectly track how humans actually perceive colour differences. Two colours can sit at the same numeric distance from a reference colour while one looks clearly closer to the eye than the other, because human colour perception weighs the three channels unevenly and is more sensitive to some hue shifts than others.
In practice this rarely changes which named colour wins the comparison by a meaningful margin, since most colours a person actually enters are already reasonably close to one clear best match among 148 candidates. It matters most for colours that sit roughly equidistant between two very different named colours, where the reported closest match can feel slightly arbitrary.
Reading the match, its distance and alternates
Alongside the winning name, this tool shows the next closest few candidates so you can see how decisively the top match won and what the runner up options look like. A very small distance between the top result and the next one down is worth noticing, since it means two named colours are almost equally close and either could reasonably describe your input.
A single pass, not a lookup table
Input parsing accepts both hex strings and rgb() style values, normalising either into a red, green and blue triple. That triple is compared in a single pass against a bundled table of every CSS named colour and its official hex value, computing the squared channel differences, summing them, and tracking the smallest running total as the search proceeds through the list.
Because the comparison table has under 150 entries and the distance formula is simple arithmetic, the entire search completes long before a person could notice any delay, so results appear to update instantly as you type.
Where CSS named colors list entries come from
Most of the modern CSS named colours list entries trace back to the X11 colour names originally defined for Unix graphical systems decades before CSS existed, later adopted into SVG and then folded into the CSS Color specification itself. rebeccapurple is the one modern addition, added in memory of a member of the CSS working group's family, making it the newest name on an otherwise historically inherited list.
Because the list is fixed by specification rather than curated for even coverage of colour space, some regions, particularly muted, low saturation colours, have far fewer nearby named options than vivid, primary feeling colours do, which is part of why the reported distance for a match can vary so much depending on what you type in.
| Name | Hex |
|---|---|
| cornflowerblue | #6495ed |
| rebeccapurple | #663399 |
| tomato | #ff6347 |
| papayawhip | #ffefd5 |
| darkslategray | #2f4f4f |
How to find the closest CSS color name
- 1
Enter a hex or RGB colour
Type or paste the colour value you want to match against the standard named colours.
- 2
Review the closest match
The nearest CSS named colour appears with its own hex value and the calculated distance.
- 3
Check the runner up options
Compare the next closest names to see how decisive the top match actually is.
- 4
Copy the name or hex
Copy either the matched keyword or its exact hex value for use in your project.
Related tools worth bookmarking
Sources and further reading
Frequently asked questions
Common questions about the color name finder.
There are 148 standard CSS named colours defined in the specification, ranging from common names like red, blue and black to more specific ones like cornflowerblue, papayawhip and the modern addition rebeccapurple. This color name finder checks your input against every one of them.
It calculates the Euclidean distance between your input colour and every named colour's red, green and blue values, then reports whichever name has the smallest distance. A distance of exactly 0 means your input is precisely one of the standard named colours already.
Not exactly. Straight line distance in RGB space is simple and fast to compute but does not weight the three channels the way human vision does, so it can occasionally rank two candidates slightly differently than a person's eye would. For the vast majority of inputs, though, it selects the name most people would agree looks closest.
Yes, hex to color name matching is a common way to give design tokens a memorable label alongside their precise hex value, particularly useful in changelogs, style guides and conversations where reading out a hex string is less natural than saying a name.
Some regions of colour space, particularly muted, desaturated or unusually dark tones, simply have fewer nearby entries in the fixed list of 148 named colours, so even the best available match can sit fairly far away numerically. A large reported distance is a useful signal that no named colour describes your input especially well.
Yes, both rgb() and rgba() strings are accepted alongside plain hex codes, since all three are parsed down to the same red, green and blue triple before the distance calculation runs. The alpha channel in rgba() is ignored for the purposes of finding a nearest color name, since none of the standard CSS keywords carry transparency information.