HSL to Color Name

What this tool does

HSL values such as 174, 72 percent, 56 percent describe a colour clearly enough for a screen, but they are not something you can say to a person and expect them to picture. A name like "Turquoise" does that work instantly. People reach for words when they discuss colour, while tools keep it in numbers, and bridging that divide is what this is for.

That is what this does. You give it hue, saturation, and lightness values, and it returns the closest colour name, shown beside the colour itself. A precise but wordless set of figures becomes a name you can speak, write down, and remember, which is usually far more useful when a person is on the other end.

How to use it

1. Enter your HSL values. Set the hue from 0 to 360 and the saturation and lightness as percentages, or pick a colour using the picker.
2. Read the name. The tool returns the closest matching colour name for your values, beside the colour they produce.
3. Put it to use. Use the name to describe or label the colour, with the swatch beside it as a quick visual check.

Type the three numbers in, or set a colour with the picker and read the matching name from the result, whichever suits the way you are working.

How it works

The naming is the work of Name That Color, a library written for exactly this job. It keeps a long catalogue of named colours, each tied to a fixed value, and when you give it a colour it measures how far yours sits from every entry, then reports the one that comes closest. Your HSL values are read into the colour first, so the comparison happens on the colour itself.

The word that matters is closest. Your exact HSL values will only occasionally land precisely on a catalogued colour, so most of the time the tool is finding the nearest neighbour rather than a perfect hit. The result is the best name available for your colour, which is almost always what you actually want, even when it is not an exact match.

Why colours have names

Names exist because numbers are clumsy to pass around and quick to slip the mind. Long before colour was ever written as a set of values, people described it in words, and terms like coral, sage, and burgundy still summon an immediate, shared picture that a row of figures never will. A name is something you can say in conversation, note in a brief, or recall days later.

Screens keep this tradition in their own fashion. The CSS standard sets out a list of colours you can call by name rather than by number, words such as turquoise, salmon, and plum that each stand for a fixed value. That official list is short, though, so the names a tool like this can return come from far larger collections gathered over the years, which between them put names on thousands of points across the spectrum.

Finding the nearest name

It is worth being clear about what the answer is. The full range of colours runs into the millions, while named colours number only a few thousand, so the names sit across the colour space like scattered markers, with broad regions between them carrying no name at all. When you look up a value, the tool returns the marker nearest to where your colour falls.

A result of this is that a band of slightly different HSL values can all come back with the same name, because they all sit closest to the same marker. That is not the tool being imprecise; it is the simple fact that small colour differences are real but mostly go unnamed. The name marks the region your colour belongs to, which is usually exactly the description a person is after.

Why name an HSL value

The usual reason is communication. When you are talking a colour over with a client or a teammate, or jotting a note to yourself for later, a name carries a meaning that three numbers do not. Saying "use Turquoise for the accent" lands at once, where reading out a set of HSL figures does not.

It also helps you make sense of colours you have not chosen. A name gives you a fast grip on an unfamiliar HSL value, a quick read on roughly what it is without rendering it. Designers use it to put brand colours into plain language, to write documentation people can follow, and simply to attach words to values that would otherwise sit on the page as bare numbers.

How close the match really is

It helps to know how exact the result is, because it varies. Some HSL values land squarely on a named colour: a value that works out to 174, 72 percent, 56 percent is essentially Turquoise, not merely near it. For those, the name is a true identity, and you can lean on it with full confidence.

Most values are not so tidy. A colour a little off from Turquoise is not Turquoise, yet the tool will still offer that as the closest name, because it is the best fit available. So read the result in that light: now and then the name is exact, and more often it is the nearest marker to a colour that has no name of its own. In both cases it is the most useful word on hand, which is the reason for asking.

Questions people ask

How do I find the name of an HSL colour?

Enter the hue, saturation, and lightness values and the tool returns the closest matching colour name from a large catalogue, shown next to the colour itself.

Is the name exact?

Sometimes. A handful of HSL values land exactly on a named colour, but most return the closest name, because the possible colours number in the millions while the names number only a few thousand. You get the best fit available.

How many named colours are there?

Only a small fixed set is built into the CSS standard, but this kind of tool relies on much larger collections that name thousands of colours, so almost any value finds a reasonable match.

Why do different HSL values share a name?

Because names are scattered across the colour space and most colours fall between them. Several nearby HSL values can sit closest to the same named colour, so they come back with the same name.

References

1. Name That Color (Chirag Mehta). Documentation. http://chir.ag/projects/ntc/
2. World Wide Web Consortium (W3C), CSS Color Module Level 4, named colors. https://www.w3.org/TR/css-color-4/
3. Color term, how colours are named across languages. Wikipedia. https://en.wikipedia.org/wiki/Color_term