Skip to content

Color Name Finder

Color Name Finder takes any hex, RGB or HSL colour and returns the closest of the 148 CSS named colours, such as royalblue or tomato, matched by how similar colours look rather than by raw numbers. You also get the HEX, RGB and HSL values, a side by side swatch and the next five closest names. Built for designers and front-end developers who document palettes, label design tokens or describe colours to clients.

Your colour

Hex (#4a6cf7 or #abc), rgb(), hsl() or a CSS colour name.

Values

HEX
#4a6cf7
RGB
rgb(74, 108, 247)
HSL
hsl(228.2, 91.5%, 62.9%)

Closest CSS named colour

Yours: #4a6cf7
Named: #4169e1

royalblue

Close, ΔE00 3.47. Under 1 is invisible to most people; above 5 is a clearly different colour.

Next closest

NameHexΔE00
#7b68ee7.48
#6a5acd9.66
#4682b410.99
#9370db12.78
#6495ed13.08

Matched against all 148 CSS named colours using CIEDE2000 in CIELAB, so distance follows how different colours look, not raw RGB numbers.

CSS
/* #4a6cf7 is closest to royalblue (ΔE00 3.47) */
color: royalblue;

How to use

  1. Type a hex code, an rgb() or hsl() value or a colour name, or use the colour picker.
  2. See the closest CSS named colour next to your colour, with its distance (ΔE00).
  3. Check the next five closest names; select one to load it.
  4. Copy the CSS, or the HEX, RGB and HSL values for your design tokens.

Why use this tool?

Naming colours by eye gives inconsistent results: one developer calls it dark blue, another navy, and your design tokens end up meaningless. This tool resolves names with CIEDE2000, the colour difference formula used in print and design, so the closest name is the one that looks closest. Because the names are standard CSS keywords, they work directly in stylesheets.

Frequently asked questions

What is the Color Name Finder?

A browser-based tool that matches any hex, RGB or HSL colour to the nearest of the 148 CSS named colours and shows its values, a comparison swatch and five close alternatives.

How accurate is the colour name matching?

Matching uses CIEDE2000 distance in the CIELAB colour space, the standard measure of perceptual colour difference. A ΔE00 under 1 is invisible to most people, 1 to 2 is a very close match and above 5 is a clearly different colour, so the distance tells you whether the name fairly describes your colour or is only the nearest one available.

Why only 148 names?

Those are the colour keywords CSS understands, so every name the tool returns works directly in a stylesheet (color: royalblue). A few share a value, like aqua and cyan or gray and grey; both names are shown.

Is it free?

Yes, the Color Name Finder is free with no signup required. It runs entirely in your browser, so nothing you paste is uploaded. Built by the Canvas Builder team.

Stop tweaking snippets. Build the whole site

This tool fixes one piece. Canvas Builder builds the entire page from a single prompt: sections, copy, styling, and responsive layout. You own the code.

Start building freeBuild a site from this