Hex to HSL Color Converter

What this tool does

A hex code is excellent for storing a colour and almost useless for changing one. If you have #3B82F6 and you want a slightly lighter version, or the same blue but a little less intense, the hex gives you nothing to grab onto. HSL does, which is why converting between them is so handy.

That is what this does. You give it a hex code, and it returns the same colour written as HSL, three numbers for hue, saturation, and lightness, that describe the colour in a way you can actually adjust. Below the tool there is a plain account of what those three numbers mean and why they make colour so much easier to work with.

How to use it

1. Enter your hex code. Type or paste it in, with or without the hash, or set a colour using the picker.
2. Read the HSL values. The tool returns the hue in degrees, and the saturation and lightness as percentages, straight away.
3. Take the numbers. Copy the HSL values into your stylesheet or design tool, and use them as a base you can adjust.

Both hex forms work and the hash is optional. If you would rather start from a colour, set it with the picker and read its HSL values directly.

How it works

The conversion runs through the colour's red, green, and blue amounts as a stepping stone. The hex code is first read back into those three values, since that is what a hex code stores, and then those values are re-expressed as a hue angle, a saturation, and a lightness. The calculation is done by TinyColor, which moves cleanly between the two ways of describing a colour.

It is worth saying that nothing about the colour changes. HSL and hex are two coordinate systems for the same point; the conversion just relocates the colour from one to the other. What changes is how easy it is to reason about, because the HSL numbers line up with the things you actually want to adjust.

What HSL actually is

HSL stands for hue, saturation, and lightness, and it describes a colour the way a person tends to think about one. Hue is the colour itself, given as an angle from 0 to 360 degrees around the colour wheel, where red sits near 0, green near 120, and blue near 240. Saturation, from zero to one hundred percent, is how vivid the colour is, running from a flat grey up to full intensity. Lightness, also zero to one hundred percent, is how light it is, from black through the pure colour to white.

That structure is the appeal. Instead of describing a colour by how much red, green, and blue light it contains, HSL describes it by its colour, its vividness, and its brightness, three qualities you can picture and change independently. It is the same colour a hex code would store, organised in a far more human way.

How a hex code becomes HSL

Hex and HSL describe a colour from different starting points. The hex code thinks in terms of the screen, three amounts of red, green, and blue light. HSL thinks in terms of perception, where a colour sits on the wheel, how strong it is, and how light it is. Both pin down the exact same colour, just with different coordinates.

Converting from one to the other means working out those perceptual coordinates from the light amounts. The hex is unpacked into red, green, and blue, and from the relationship between those three the conversion derives the hue angle, the saturation, and the lightness. The colour is untouched; only its description is rebuilt into a form you can adjust by hand.

Why convert hex to HSL

The real reason to reach for HSL is adjustment, and this is where it earns its place. Once a colour is in HSL, common changes become single, obvious moves. Want a lighter version for a background? Raise the lightness. Want it more muted? Lower the saturation. Want a related but different colour? Shift the hue. Each of those is a guessing game in hex and a one-number tweak in HSL.

That makes it the natural tool for building from a colour rather than just using it. Designers convert a base colour to HSL to create tints and shades for a palette, to generate the slightly darker tone a button needs on hover, or to keep a set of colours consistent by holding their saturation and lightness steady while varying the hue. If you are doing anything beyond using a colour exactly as it is, HSL is usually where you want to be.

Reading the three HSL numbers

Reading an HSL value is mostly a matter of knowing what each of the three numbers controls. The first, the hue, tells you which colour you are looking at by its position on the wheel, so a hue near 200 is a cyan-blue and a hue near 30 is an orange. The second, saturation, tells you how vivid it is, with low numbers meaning washed out and grey, and high numbers meaning rich and intense.

The third, lightness, tells you how bright it is, with 50 percent being the colour at full strength, lower values heading toward black, and higher values toward white. Once you have the habit, you can read the mood of a colour straight from its HSL: a low saturation and high lightness is a soft pastel, while a high saturation and middling lightness is a bold, pure colour. That readability is the quiet advantage HSL has over a hex code.

Questions people ask

What does HSL stand for?

Hue, saturation, and lightness. Hue is the colour as an angle on the wheel, saturation is how vivid it is, and lightness is how bright it is. Together they describe a colour in a way that is easy to picture and adjust.

Why use HSL instead of hex?

Because HSL is built for changing colours. Making a colour lighter, duller, or shifting it to a related hue is a single number change in HSL, where in hex it would be guesswork. Hex stores a colour well; HSL adjusts one well.

How do I make a colour lighter with HSL?

Raise its lightness value. Because lightness is its own number in HSL, increasing it gives you a lighter version of the same colour without changing its hue, which is ideal for tints and backgrounds.

Do I need the hash in the hex code?

No. The hash is optional, and both the full and short hex forms are accepted, so you can paste the code in whatever form you have it.

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