Como usar: Color Name Finder
- Enter a HEX code (e.g.
#55AAEE) or any CSS color, 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 colors in the bulk box and copy the generated
:rootblock.
Why name colors?
A HEX code like #55AAEE means nothing in a code review, but --cerulean does. Descriptive color names make design tokens readable, help designers and developers talk about the same color, and stop variables like --blue-2-new-final from creeping into a codebase.
How the matching works
The tool compares your color against about 5,000 hand-picked names from the open-source color-names project (MIT license). Distances are measured in the perceptually uniform OKLab color 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 color 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 color with the Tailwind Color Generator.
Também pesquisado como: name that color, color name, hex color name, what color is this, css variable names, design tokens.
Ferramentas que combinam com: Color Name Finder
- Image Color Palette Extractor — Find the color palette of any image — a photo, logo, screenshot or design.
- Color Converter — Paste any CSS color — HEX, rgb(), hsl(), hwb(), oklch() or a name like tomato — and get every other format instantly, plus a ready-to-use 50–950 palette.
- CSS Variables to Tailwind — Turn your :root color 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 colors and a number of steps to get evenly blended transition colors — perfect for gradients, borders, charts and hover states.
Perguntas frequentes
What color is #008080?
#008080 is Teal — it is also one of the official CSS color keywords. Paste any code above to identify it.Are these official color 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 colors at once?
:root block. Duplicate names get a numeric suffix.