Categories

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

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.

## By John Au-Yeung

Web developer specializing in React, Vue, and front end development.