How to use the Color Name Finder
- Enter a HEX code (e.g.
#55AAEE) or any CSS colour, or use the picker. - Read the closest name and how close the match is (ΔE — lower is closer).
- Copy a ready-made variable name for CSS, SCSS, JavaScript or Tailwind.
- To name a whole palette, paste several colours in the bulk box and copy the generated
:rootblock.
Why name colours?
A HEX code like #55AAEE means nothing in a code review, but --cerulean does. Descriptive colour names make design tokens readable, help designers and developers talk about the same colour, and stop variables like --blue-2-new-final from creeping into a codebase.
How the matching works
The tool compares your colour against about 5,000 hand-picked names from the open-source color-names project (MIT licence). Distances are measured in the perceptually uniform OKLab colour space, so the “closest” name is the one that genuinely looks most similar, not just the one with the nearest numbers. The ΔEOK value tells you how close it is: under about 2 is practically indistinguishable, 2–5 is close, and above 5 the name is a rough description.
You also see the nearest of the 148 official CSS colour keywords (like royalblue or tomato), which you can use directly in CSS.
Naming conventions for tokens
| Context | Convention | Example |
|---|---|---|
| CSS custom property | kebab-case | --ocean-blue |
| SCSS variable | kebab-case with prefix | $color-ocean-blue |
| JavaScript / TypeScript | camelCase | oceanBlue |
| Tailwind theme key | kebab-case | bg-ocean-blue |
Descriptive vs semantic names
Descriptive names (ocean blue) are great for a raw palette. Components should usually reference semantic tokens (--color-primary, --color-danger) that point at the descriptive ones, so you can re-brand without renaming everything. Generate a full shade scale for each base colour with the Tailwind Color Generator.
Tools that pair well with the Color Name Finder
- CSS Variables to Tailwind — Turn your :root colour variables into a Tailwind theme in one paste — Tailwind v3 tailwind.config.js or v4 @theme, with literal values or var() references.
- Color Mixer — Pick two colours and a number of steps to get evenly blended transition colours — perfect for gradients, borders, charts and hover states.
- HEX to RGBA Converter — Paste a HEX code, drag the opacity slider and copy the exact CSS you need — legacy rgba(), modern rgb( / alpha) or 8-digit HEX.
- OKLCH Color Converter — Explore the perceptually uniform OKLCH colour space with live sliders, see whether a colour fits in sRGB, and copy matching HEX, RGB and HSL fallbacks.
Frequently asked questions
What colour is #008080?
#008080 is Teal — it is also one of the official CSS colour keywords. Paste any code above to identify it.Are these official colour names?
tomato) are official in CSS. The other names come from a curated community list and are descriptive labels, not standards.How accurate is the match?
Can I name many colours at once?
:root block. Duplicate names get a numeric suffix.