HSV to HSL Color Converter

What this tool does

You picked a colour in an editor, where the controls work in hue, saturation, and value, and now you want it for the web, where colours are often written in hue, saturation, and lightness. The two models are siblings, but their numbers do not line up, so you cannot just relabel HSV as HSL. The colour has to be converted.

That is what this does. You give it a colour as hue, saturation, and value, and it returns the same colour as hue, saturation, and lightness. It moves a colour from the model image editors favour to the one that appears throughout CSS, and the sections below explain how the two relate and why the figures shift.

How to use it

1. Enter your HSV values. Set the hue from 0 to 360 and the saturation and value as percentages, or pick a colour with the picker.
2. Read the HSL result. The tool returns the hue, saturation, and lightness, with the hue in degrees and the other two as percentages.
3. Carry it across. Take the HSL values into your stylesheet or wherever HSL is expected, knowing they describe the same colour.

Type the three HSV numbers in, or set a colour with the picker and read its HSL values from the result, whichever suits how you are working.

How it works

The conversion holds onto what the two models share and rebuilds what they do not. The hue is identical in both, so it passes across unchanged. The saturation and the third quality, value in HSV and lightness in HSL, are then recalculated so they point to the same colour in the second model's terms. The work is done by TinyColor.

So while the colour itself stays put, two of the three numbers usually change. That is the part that catches people out: because HSV and HSL scale saturation and brightness against different references, one colour carries different figures in each. The conversion takes care of that recalculation, so the HSL values you get genuinely match the HSV colour you began with.

What HSL actually is

HSL stands for hue, saturation, and lightness, and it is the hue-based model you meet most often on the web. The hue is which colour it is, an angle from 0 to 360 degrees around the wheel. The saturation, a percentage, is how vivid the colour is. The lightness, also a percentage, runs from black at zero, through the pure colour at fifty percent, up to white at one hundred.

That placement of the pure colour in the middle is the heart of HSL, and the reason CSS leans on it. With lightness as its own number from black to white, making a colour lighter or darker is a single, predictable move, which suits building tints and shades for a design. It is the same idea as HSV, but with its third number arranged for adjusting a colour rather than for picking one.

The same family, arranged differently

HSV and HSL grew from the same root and start in the same place. Both lay colour out around a wheel of hues and both add a saturation that measures purity, which is why the hue reads as one number in either model. Look only at the hue and the two are indistinguishable.

They diverge in the third quality and in how saturation is judged against it. HSV uses value, where the top of the scale is the pure colour and white appears only once saturation drops away. HSL uses lightness, where the top of the scale is white and the pure colour sits halfway up. Because the pure colour lands in a different spot on each model's scale, the saturation figures usually differ between them too. They map the very same colours, but their dials are set out differently.

How HSV becomes HSL

Converting from one to the other keeps the hue and reworks the rest. The hue passes straight through. Then, from the HSV saturation and value, the tool works out the saturation and lightness that would name the same colour in HSL, since the two models park that colour at different points on their scales.

A short example shows why the numbers move. A colour that is fully pure and at full brightness is value one hundred percent in HSV, because there the pure colour sits at the top of the scale. The identical colour is lightness fifty percent in HSL, because there the pure colour sits in the middle. The hue does not budge, but a value of one hundred and a lightness of fifty are two readings of one colour. The conversion handles that remapping so nothing is lost along the way.

Why convert HSV to HSL

The usual reason is that your colour was chosen in one model and your destination uses the other. Image editors and colour pickers are mostly built on HSV, so that is where colours often start, while HSL turns up throughout CSS and the web. Moving a colour from the editor into a stylesheet means converting it so it arrives correct rather than approximated.

It also matters wherever accuracy counts, because reusing the numbers is a trap. Since the saturation and the third value differ between the models, dropping HSV figures straight into an HSL value gives the wrong colour. Running a real conversion is what keeps the colour intact as it crosses from the model built for picking to the one built for adjusting.

Questions people ask

Does the hue stay the same from HSV to HSL?

Yes. The hue is the same in both models, an angle from 0 to 360 degrees, so it carries straight across. Only the saturation and the lightness are recalculated.

Can I reuse the HSV numbers as HSL?

No. The saturation differs between the two models, and HSV value is not the same as HSL lightness, so copying the numbers across gives the wrong colour. They have to be converted.

Why does CSS prefer HSL?

HSL maps neatly onto adjusting a colour for the web, since its lightness runs from black to white with the pure colour in the middle. That makes tints and shades easy, which is why CSS adopted HSL rather than HSV.

What ranges do these models use?

In both, the hue spans 0 to 360 degrees and the other two span 0 to 100 percent. Enter your HSV numbers, or use the picker, and the HSL equivalent appears either way.

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 two related hue-saturation colour models. Wikipedia. https://en.wikipedia.org/wiki/HSL_and_HSV
3. TinyColor (Brian Grinstead). Documentation. https://github.com/bgrins/TinyColor