colour tool

Colour name finder

Type a hex or RGB value, pick a colour, or sample one from the screen, and this colour name finder returns the nearest name from the CSS colour keywords and from a list of 1,566 named colours. Each match shows how far it is from your colour.

Loading the tool…

How it works

  1. 1

    Enter the colour

    Type a hex, an rgb() or any CSS colour, open the swatch picker, or press Pick from screen and click anywhere on your display.

  2. 2

    Read the two matches

    The left card gives the nearest of the 1,566 names, the right card the nearest CSS keyword. Each puts your colour beside the named one.

  3. 3

    Check the distance

    Under each name the distance says in plain words how visible the difference is.

  4. 4

    Browse the runners up

    The next six names are listed underneath. Click one to look it up in turn, or copy a name or its hex.

Two lists, two kinds of name

The CSS keywords are the 148 names a browser understands, such as steelblue and rebeccapurple, so a match there can go straight into a stylesheet. The longer list is the Name that Color list compiled by Chirag Mehta, 1,566 names gathered from Wikipedia, Crayola, colour name dictionaries and the Resene paint range, such as Cerulean, Burnt Sienna and Persian Green. It is the better source for a palette description, a mood board or a theme name.

How the nearest name is chosen

Your colour and every listed colour are converted to CIELAB, and the difference is measured with CIEDE2000, the formula the print and paint industries use because it tracks what people actually see better than the straight line distance in RGB. The entry with the smallest difference wins. A difference under 1 cannot be seen; up to 2 shows only side by side; anything up to 10 is clearly the same family of colour.

Why tools disagree

There is no official name for most colours. Each naming tool carries its own list, and lists differ in length, in taste and in which colours they cover densely. A tool with 30,000 names will find something closer than one with 1,566, but its names get stranger. A colour that sits between two entries can flip to a different name with a one unit change in its hex. Treat a name as a description, and the hex as the specification.

Naming colours in a theme

Names make palettes easier to discuss: Harbour Blue and Sand read better in a brief than two hex codes. In the flyer builder, text can take any custom hex, and the brand kit in Settings stores Primary, Secondary and Accent colours under a brand name for slides, flyers, forms, documents and videos. Keep the hex as the record and the name as the label people remember.

Limits worth knowing

Names are nearest matches, not a standard, so another tool may call the same hex something else, and a large distance means no list entry is close. Pick from screen works only in browsers with the EyeDropper feature. Nothing leaves this page: the lists ship inside it and the search runs in your browser, nothing is uploaded and nothing is stored, ever.

Limits

  • Names are nearest matches, not a standard: two tools with two lists can name the same hex differently.
  • Distance is CIEDE2000; under 1 is invisible, 2 to 10 shows at a glance, over 10 means nothing on the list is close.
  • Pick from screen needs the EyeDropper browser feature, which Chrome and Edge on desktop have and Safari and Firefox do not.

What it does not do

  • It does not invent a name for a colour that sits between list entries.
  • It does not translate names into other languages; the lists are in English.
  • It does not read a colour from an image file. The colour picker from image tool does that.

Questions people ask

Can I use the long list names in CSS?

No. Only the 148 CSS keywords, the names in the right hand card, work in a stylesheet. Names from the 1,566 list, such as Persian Green, are descriptions for people. Use the hex value shown under the name in your CSS, or define a custom property such as --persian-green with that hex if you want the name in your code.

Why does a tiny hex change give a different name?

Because your colour sits roughly halfway between two list entries, so the nearest one switches as you cross the middle. The distance figure shows it: if both candidates are about the same distance away, either name is fair. Pick the one that suits the context, and keep the hex as the precise value.

Is grey or gray the CSS spelling?

Both. CSS accepts gray and grey in every keyword that contains it, such as darkslategray and darkslategrey, and the two spellings give exactly the same colour. This tool lists the gray spelling for its CSS matches, so type gray, or the hex value, into the field when you want to look one of those keywords up.

How do I name a colour for a client presentation?

Find the nearest list name here, then adjust it to the brand voice, so Persian Green might become Lagoon. Give each palette colour a name, a hex value and its role, such as headings or buttons. A one line rationale per colour, like warm and trustworthy, helps a client remember why it was chosen.

Does the screen picker see colours outside the browser?

Yes. Where the EyeDropper feature exists, the picker can sample any pixel on your display, including other apps, and returns its value to this page only after you click. The browser shows its own magnifier and asks nothing else of you. Press Escape to cancel and the colour stays as it was.

Use this colour on a flyer

Take what you made here into flyers.

Create a flyer with OneCraft

More tools like this

Background reading: the question page on this.

Built with Name that Color list by Chirag Mehta (CC BY 2.5).

Sources

Written and checked by the OneCraft team. Last checked .