Color Name Finder

What this tool does

Color Name Finder tells you which CSS named colour is closest to your colour and how close it really is. It ranks the nearest names by the CIEDE2000 colour difference, describes the colour in plain words and lets you search and sort the complete list of CSS named colours.

Hex codes are precise but meaningless in conversation. When you document a palette, name a design token or describe a product variant, a name like steelblue or darkslategray communicates far better than #4682b4. CSS also lets you write those names directly in stylesheets.

This finder compares your colour with every named colour defined in CSS Color Module Level 4 and ranks them by ΔE00, the CIEDE2000 colour difference formula used in industry to approximate how different two colours look to the human eye. As a rule of thumb, a ΔE00 below 1 is invisible, 1-2 is noticeable only side by side, and above 10 the colours clearly differ. Alongside the nearest names you get a plain description based on OKLCH lightness, chroma and hue, such as "dark, muted blue".

How to use Color Name Finder

1. Enter a colour in any format, or pick it with the colour picker.
2. Read the Closest CSS name, its Difference (ΔE00) and whether it is an exact match.
3. Compare your colour and the named colour side by side in the split swatch.
4. Scan the Nearest named colours list and press Use or copy a name.
5. Search or sort the full list of CSS named colours by hue, lightness or A-Z.

Tips for better results

• Names with ΔE00 under 2 can usually replace the hex value without anyone noticing.
• gray and grey are interchangeable in CSS for every grey name, such as darkgray and darkgrey.
• aqua and cyan, and fuchsia and magenta, are identical colours with two names.
• For design tokens, combine the description with a role, for example "primary, muted blue".

Common use cases

• Naming colours in a style guide, design token file or variable list.
• Describing product colour variants in listings and alt text.
• Finding a CSS keyword for quick prototypes and code examples.
• Learning the CSS named colours and how they relate to each other.

Common mistakes to avoid

• Assuming a name means the exact colour; check the ΔE00 value before replacing a brand colour.
• Relying on names whose CSS values surprise people: darkgray (#a9a9a9) is lighter than gray (#808080).
• Using colour names alone to convey meaning in an interface; pair them with text or icons for accessibility.