HSL to HSV Color Converter

What this tool does

HSL and HSV look like the same idea, and in many ways they are, two ways of describing a colour by its hue plus a couple of other qualities. But they are not identical, and the numbers do not carry over unchanged. If you have a colour in HSL and a tool that wants HSV, you cannot simply copy the values across; they have to be converted.

That is what this does. You give it a colour as hue, saturation, and lightness, and it returns the same colour as hue, saturation, and value. It is the bridge between two closely related models, and the sections below explain exactly where they agree and where they quietly part ways.

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 with the picker.
2. Read the HSV result. The tool returns the hue, saturation, and value, with the hue in degrees and the other two as percentages.
3. Carry it across. Take the HSV numbers into whatever tool or picker expects them, knowing they describe the same colour.

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

How it works

The conversion keeps what the two models share and rebuilds what they do not. The hue is the same in both systems, so it carries straight across untouched. The saturation and the third quality, lightness in HSL and value in HSV, are then recalculated so they describe the identical colour in the second model's terms. The work is done by TinyColor.

So although the colour does not change at all, two of the three numbers usually do. That is the part people find surprising: because HSL and HSV measure saturation and brightness against different references, the same colour ends up with different figures in each. The conversion handles that recalculation for you, so the HSV values you get genuinely match the HSL colour you started from.

What HSV actually is

HSV stands for hue, saturation, and value, and it sometimes appears as HSB, with brightness meaning the same as value. The hue identifies the colour, given as an angle from 0 to 360 degrees on the wheel. The saturation, a percentage, is how pure the colour is. The value, also a percentage, is how bright it is, running from black at zero up to the colour at full strength.

What sets value apart is where its top end lands. In HSV, pushing the value to one hundred percent gives you the pure, fully lit colour, not white. To reach white in HSV you also have to drop the saturation to zero. This is the detail that makes HSV behave differently from HSL, and it is why colour pickers, which are mostly built on HSV, lay out a square where one corner is the vivid colour and another is white.

HSL and HSV, close cousins

The two models come from the same family and share the same starting point. Both arrange colour around a wheel of hues, and both add saturation as a measure of purity, which is why a colour's hue is the same number in either one. If you only ever looked at the hue, you would never notice a difference between them.

The split is in the third quality and in how saturation is scaled against it. HSL uses lightness, where fifty percent is the pure colour, zero is black, and one hundred is white, so the pure colour sits in the middle. HSV uses value, where one hundred is the pure colour and white only appears when saturation also falls away. Because of that, the saturation figures rarely match between the two either. They are describing the same colours, but with their dials arranged differently.

How HSL becomes HSV

Converting from one to the other is a matter of keeping the hue and remapping the rest. The hue passes through as it is. Then, from the HSL saturation and lightness, the tool works out what saturation and value would point to the same colour in HSV, since the two models place that colour at different spots on their respective dials.

A quick example shows why the numbers shift. A colour that is fully pure and at its brightest is lightness fifty percent in HSL, because in that model the pure colour sits halfway up. The very same colour is value one hundred percent in HSV, because there the pure colour sits at the top. The hue stays put, but the lightness of fifty and the value of one hundred are two readings of one colour. The conversion sorts out that remapping so nothing is lost.

Why convert HSL to HSV

The usual reason is that your colour lives in one model and your tool speaks the other. HSL turns up a lot in CSS and on the web, so colours are often written that way, while image editors and colour pickers are mostly built around HSV. When a colour defined in HSL needs to go into one of those tools, converting it lets you enter it exactly rather than nudging sliders to chase it.

It also matters whenever precision counts, because the temptation to just reuse the numbers leads to mistakes. Since the saturation and the third value differ between the models, copying HSL figures straight into an HSV field gives you the wrong colour. Running a proper conversion is what keeps the colour intact as it moves from one model to the other.

Questions people ask

Do HSL and HSV share the same hue?

Yes. The hue is identical in both, the same angle from 0 to 360 degrees. Only the saturation and the third value, lightness versus value, are figured differently between them.

Why are the saturation numbers different?

Because the two models measure saturation against different references. The same colour can read as one saturation in HSL and another in HSV, so the figures are not interchangeable even though the colour is the same.

Is HSV better than HSL?

Neither is better; they suit different tools. HSV matches image editors and colour pickers, while HSL appears more often in CSS. The right one depends on where the colour is going.

What ranges do the values use?

In both models the hue spans 0 to 360 degrees, and the other two span 0 to 100 percent. Enter your HSL numbers, or use the picker, and the HSV 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