HSL to Color Converter

What this tool does

HSL values are friendlier than most colour codes, but they still are not the colour itself. Given something like 210, 70 percent, 50 percent, you can make a fair guess at a medium blue, yet a guess is all it is until you actually see it. The numbers point toward a colour without quite showing you one.

That is what this does. You give it hue, saturation, and lightness values, and it shows you the colour they make, rendered as a swatch you can look at. It turns a reasonable guess into a certainty, which is exactly what you want when you need to know what a particular HSL value really looks like.

How to use it

1. Enter your HSL values. Put in the hue from 0 to 360 and the saturation and lightness as percentages, or set a colour with the picker.
2. See the colour. The colour those three values produce appears straight away, shown as a swatch at full size.
3. Use what you see. Read the colour to identify or check it, and pick up its other values from the result if you want them.

Type the numbers in directly, or move the picker and watch the values follow, depending on whether you are starting from figures or from a colour.

How it works

To show the colour, the tool first turns the HSL values into the red, green, and blue amounts a screen actually emits, since that is what a display works in. It then paints that colour for you. The translation is handled by TinyColor, which reads the HSL values and works out the light the screen should produce.

There is a small conversion here, unlike showing a hex or RGB value, which a screen can display almost as given. HSL has to be translated into the screen's own red, green, and blue terms before it can be drawn. That step is quick and exact, and the result is the true colour your HSL values describe, ready to look at rather than guess at.

What HSL actually is

HSL stands for hue, saturation, and lightness, and it is built to match how people picture colour. The hue is which colour it is, given as an angle from 0 to 360 degrees around the wheel, so roughly 0 is red, 120 is green, and 240 is blue. The saturation, from zero to one hundred percent, is how vivid it is, from a dull grey up to a pure, intense colour.

The lightness, also from zero to one hundred percent, is how light or dark it is, from black at the bottom through the full colour in the middle to white at the top. Because the three values map onto qualities you can imagine, hue, vividness, and brightness, HSL is among the most human-readable ways to write a colour, which is why you can often half-picture an HSL value before you ever render it.

Why seeing the colour helps

Readable as HSL is, a guess from the numbers is not the same as seeing the colour. You might read 30, 90 percent, 50 percent and expect a strong orange, but the exact shade, how warm, how deep, how close to the orange in your head, only becomes clear when it is in front of you. The values narrow it down; the swatch settles it.

Rendering the colour turns that estimate into something you can actually judge, compare, and trust. It lets you confirm a value is the colour you intended, hold it up against another, or simply recognise it for what it is. When the aim is to know a colour rather than describe it, seeing beats reading, even with a format as approachable as HSL.

Why turn HSL values into a colour

Often it is for a quick check. While you are adjusting a colour in HSL, nudging the lightness or easing off the saturation, seeing the result confirms each change is heading the way you meant, rather than trusting the numbers alone. The swatch is the feedback that keeps the tuning honest.

It also helps with identification and confidence. If you have come across HSL values somewhere and need to know the colour before using them, rendering answers it at once. And the more you compare HSL values with the colours they produce, the sharper your sense of the format grows, until reading an HSL value and picturing the colour becomes close to second nature.

Reading HSL values by eye

HSL rewards a little practice more than most formats, because its numbers line up so neatly with what you see. Start with the hue, which tells you the basic colour by its place on the wheel: near 0 or 360 is red, around 60 is yellow, 120 is green, 240 is blue. That alone gets you into the right family before the other two numbers refine it.

Then read the saturation and lightness together. A low saturation means the colour is muted and greyish however bright it is, while a high saturation means it is pure and vivid. Lightness sets how light it is, with values near 50 percent giving the colour at full strength, lower numbers darkening toward black, and higher numbers fading toward white. So 200, 20 percent, 80 percent reads as a pale, soft blue, and the swatch is there for the moment you want to be sure instead of close.

Questions people ask

How do I know what colour an HSL value is?

Enter the hue, saturation, and lightness into the tool and it renders the colour as a swatch. HSL is converted into the screen's red, green, and blue light, then displayed for you to see.

What ranges do the HSL values use?

Hue runs from 0 to 360 degrees around the colour wheel, while saturation and lightness each run from 0 to 100 percent. The three numbers together define one exact colour.

Can I picture an HSL value without rendering it?

Often roughly, since HSL is unusually readable: the hue gives the colour, the saturation its vividness, and the lightness its brightness. Seeing the swatch is still the way to be certain of the exact shade.

Can I get the colour's name too?

Seeing the swatch tells you the colour, and if you want a word for it, an HSL-to-colour-name tool will give you the nearest named match, since most exact HSL values have no official name of their own.

References

1. World Wide Web Consortium (W3C), CSS Color Module Level 4. https://www.w3.org/TR/css-color-4/
2. HSL and HSV, the hue-saturation colour models. Wikipedia. https://en.wikipedia.org/wiki/HSL_and_HSV
3. TinyColor (Brian Grinstead). Documentation. https://github.com/bgrins/TinyColor