A color name finder for any HEX, RGB or HSL code
Ever wondered what a colour is called? The Color Name Finder takes any colour code — HEX, RGB, HSL, OKLCH or even a CSS name — and tells you the closest named colour from three well-known lists: the 148 CSS named colours, Tailwind CSS’s default palette and Google’s Material Design palette.
Matches are ranked by perceptual distance (ΔE in OKLab), so “closest” means closest to the eye, not just closest in numbers. You see the top five with large swatches, the source list and the exact HEX, and each one copies with a click. Switch to “Name → colour” to search the other way: type “slate”, “amber 400” or “deep orange” and get the codes.
How to use the Color Name Finder
- Paste a colour into “Colour code” or pick one with the colour square. The best-matching name appears instantly.
- Read the ΔE value: 0 means an exact match, under 2 is practically identical, under 10 is clearly similar.
- Untick CSS, Tailwind or Material to search only the list you care about — for example Tailwind names when writing utility classes.
- Click any of the five results to copy its HEX code.
- Choose “Name → colour” and type a name to find its HEX and HSL values.
Color Name Finder features
Three authoritative name lists
CSS Color Module Level 4 named colours (148), Tailwind CSS v3 default colours (22 hues × 11 steps, plus black and white) and the Material Design 2014 palette (19 hues with up to 14 shades each).
Perceptual matching
Distances are measured in OKLab, Björn Ottosson’s perceptual colour space, so matches are ranked the way people see them.
Top five with swatches
Every result shows a large swatch, the name, the source and the HEX, with a badge giving ΔE or “exact”.
Reverse search
Find a colour by name, including partial words and multi-word names such as “light green a200”.
Copy with one click
Each result is a button that copies its HEX code.
Any input format
HEX (3, 4, 6 or 8 digits), rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch() and CSS keywords all work.
Where the colour names come from
The CSS named colours are defined in the CSS Color Module Level 4 specification; they descend from the X11 colour list used by Unix workstations, which is why names like “papayawhip” and “burlywood” exist. CSS has 148 keywords, but a few are aliases — “aqua” and “cyan”, “fuchsia” and “magenta”, and every “gray” / “grey” pair — so there are 141 distinct colours.
The Tailwind CSS list is the framework’s default palette (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink and rose, each from 50 to 950) as published in Tailwind v3.4. The Material Design list is Google’s 2014 palette with shades 50–900 and the A100–A700 accents for each of its 19 hues, plus brown, grey and blue-grey without accents.
How closeness is measured
Each colour is converted to OKLab, a colour space designed so that equal distances look equally different. The distance ΔE is simply the straight-line distance between the two points, scaled by 100. Roughly: ΔE below 1 is invisible, 1–2 is only visible side by side, 2–10 is a clearly related colour and above 10 is a different colour. Comparing in RGB would be misleading, because the eye is far more sensitive to some differences — in greens and greys, for example — than to others.
If you need the exact numbers behind a match, paste both colours into the Color Converter to compare their OKLab and OKLCH values.
Commonly looked-up colours
| HEX | Nearest CSS name | Also known as |
|---|---|---|
| #FF7F50 | coral | — |
| #1E90FF | dodgerblue | — |
| #663399 | rebeccapurple | added to CSS in 2014 in memory of Rebecca Meyer |
| #FFD700 | gold | — |
| #2563EB | royalblue (ΔE ≈ 3) | Tailwind blue-600 |
| #F44336 | orangered (ΔE ≈ 3) | Material red 500 |
| #808080 | gray / grey | Material grey 600 is #757575 |
More colour tools
- Pick a colour visually and read its name live in the Color Picker.
- Grab the exact colour of a logo or photo with the Color Picker from Image, then name it here.
- Build lighter and darker versions of a named colour with the Color Shades Generator.
Color Name Finder FAQ
How do I find the name of a HEX colour?
Paste the HEX code into the colour code box. The closest named colour from CSS, Tailwind and Material is shown immediately, together with four runners-up and how far each one is from your colour.
What does the ΔE number mean?
ΔE (delta E) is the perceptual distance between your colour and the named colour, measured in OKLab and scaled by 100. 0 is an exact match; anything under about 2 looks the same unless the colours are placed side by side.
Why is the closest name sometimes a different colour family?
Named-colour lists are sparse — CSS has only 141 distinct colours — so an unusual shade may be far from everything. Check the ΔE: a value above 10 means no list has a true match, and the Tailwind and Material lists, with hundreds of entries, usually offer something closer.
Are the CSS colour names case-sensitive?
No. CSS keywords are case-insensitive, so Coral, CORAL and coral all work in stylesheets. Both British “grey” and American “gray” spellings are valid for every grey keyword.
Can I search Tailwind or Material colours by name?
Yes. Choose “Name → colour” and type names such as “emerald 500”, “blue grey 700” or “deep purple a200”. Results show the HEX and HSL values and copy with a click.
Does the tool send my colours anywhere?
No. The name lists are embedded in the page and every comparison runs in your browser.