Colour / Names

Color Name Finder: Hex or RGB to the Nearest CSS Color Name

Enter a hex, RGB, or CSS colour and find the closest of the 148 CSS named colours, ranked by perceptual difference in CIELAB, with swatches to compare and the hex of each name.

Color Name Finder: Hex or RGB to the Nearest CSS Color Name: The colour and every CSS named colour are converted to the CIELAB colour space, where distance follows how different colours look. The closest names are listed with their colour difference ΔE: below about 2.3, most people cannot see a difference. #3a7bd5, for example, is nearest to cornflowerblue. Runs 100% locally in your browser with zero server file uploads.

Runs
In your browser
Cost
Free · no sign-up
Availability
Ready to use
Color name finderLocal processing

Runs entirely in your browser

Closest CSS namecornflowerblueΔE 10.7: only roughly similar
#3a7bd5Your colour
cornflowerblue#6495ed · ΔE 10.7
dodgerblue#1e90ff · ΔE 13.5
royalblue#4169e1 · ΔE 21.4
steelblue#4682b4 · ΔE 24.4
mediumpurple#9370db · ΔE 27.4
slateblue#6a5acd · ΔE 27.6

The colour is compared with all 148 CSS named colours in the CIELAB colour space, which is built so that equal distances look roughly equally different. The distance, ΔE, is under about 2.3 when most people cannot see a difference. Any CSS name can be used in a stylesheet in place of its hex code, such as color: steelblue.

Where the names come from

Most CSS colour names came from the X11 window system's colour list in the 1980s, which is why names like papayawhip and lightgoldenrodyellow exist. rebeccapurple, #663399, was added in 2014 in memory of Rebecca Meyer.

Converting colours

To turn a colour into HSL, RGB, or other notations, use the color converter.

How to use it

  1. Type a colour as hex, rgb(), or a name.
  2. Read the closest named colour and how close it is.
  3. Compare the swatches and copy the name you want.

Privacy & limitations

Everything runs in your browser.

Related tools

Frequently asked questions

Why CSS names?

They are a standard, widely recognised set that works directly in stylesheets, from aliceblue to yellowgreen.

What does ΔE mean?

It is the distance between two colours in CIELAB. Around 1 is the smallest difference most people notice side by side; above 10 the colours are clearly different.

Why are grey and gray not both shown?

They are the same colour with two spellings; the tool lists one of each pair.

Free tool · runs in your browser · no account required