Sometimes, we want to convert HSB/HSV color to HSL with JavaScript.

In this article, we’ll look at how to convert HSB/HSV color to HSL with JavaScript.

How to convert HSB/HSV color to HSL with JavaScript?

To convert HSB/HSV color to HSL with JavaScript, we can use the formula in this wiki page.

For instance, we write:

const hsl2hsv = (h, s, l, v = s * Math.min(l, 1 - l) + l) => [h, v ? 2 - 2 * l / v : 0, v];

const hsv2hsl = (h, s, v, l = v - v * s / 2, m = Math.min(l, 1 - l)) => [h, m ? (v - l) / m : 0, l];

console.log(hsl2hsv(1, 2, 3, 4))
console.log(hsv2hsl(1, 2, 3, 4, 5))

to define the hsl2hsv and hsv2hsl functions to do the calculations.

In each function, we return the calculated values in an array.

Therefore, the first console log logs [1, 0.5, 4].

And the first console log logs [1, -0.2, 4].

Conclusion

To convert HSB/HSV color to HSL with JavaScript, we can use the formula in this wiki page.