Color Name Finder

Find the CSS name for any color, or browse all 140 named CSS colors

Closest CSS Named Colors

Browse All 140 Named Colors

About the Colour Name Finder

This tool lists every CSS color name with its hex value and finds the nearest named colour for any hex code you paste. Useful for naming a shade in a design discussion or checking what a keyword in old CSS actually renders as.

CSS color names are the 140 or so keywords browsers understand directly — red, teal, rebeccapurple, papayawhip — and they turn up constantly in older stylesheets, quick prototypes and code examples. Working out what one actually looks like usually means rendering it.

This page works in both directions. Browse the full list with swatches and hex values, or paste a hex code to find the closest named colour, which is handy when you need to describe a shade in words rather than numbers.

The names are inconsistent by history rather than design: darkgray is lighter than gray, and there are four spellings around grey and gray. For production work hex or HSL values are clearer, but the names remain useful for prototyping and for reading someone else's CSS.

How to use the Colour Name Finder

  1. Browse the list. Scan the named colours with their swatches and hex values.
  2. Or paste a hex code. Enter a hex value to find the nearest named colour.
  3. Compare the swatches. Check the match visually before relying on the name.
  4. Copy what you need. Take either the keyword or the hex value.

Colour Name Finder features

  • All 140 CSS named colours with swatches and hex values
  • Paste a hex code to find the nearest named colours
  • Search the list by name
  • Swatches shown side by side so you can judge the match
  • Copy either the keyword or the hex value
  • Runs in your browser; nothing is uploaded

Frequently asked questions

How many CSS colour names are there?

140 keywords, all listed here with their hex values. They are recognised by every browser, which is why they still turn up in older stylesheets and quick prototypes.

Why is darkgray lighter than gray?

Because the names came from two different historical sources that were merged into the standard rather than designed as a set. darkgray is #A9A9A9 and gray is #808080, so the dark one really is lighter. It is a known wart, not a browser bug.

Is it grey or gray?

Both work for the base greys — gray, grey, darkgray, darkgrey and so on are all accepted. The exceptions are worth knowing: there is no lightgrey problem, but slategray and dimgray also have grey spellings, and getting one wrong silently drops the declaration.

Will the nearest match be exact?

Usually not. There are only 140 names covering the whole colour space, so an arbitrary hex value lands between them. The swatches are shown together so you can see how close the match actually is before describing your colour by that name.

Should I use colour names in production CSS?

Prefer hex or HSL. Names are handy for prototyping and for reading someone else's stylesheet, but they cannot be adjusted systematically and their inconsistencies invite mistakes. Reach for them when writing a quick example, not when building a palette.