Convert HSB/HSV color to HSL

NVI picture NVI · Aug 6, 2010 · Viewed 20k times · Source

Ho do I convert HSB color to HSL?

Photoshop shows HSB color in its color picker. HSL color can be used in CSS.

I tried this JS:

function hsb2hsl(h, s, b) {
  return {
    h: h,
    s: s,
    l: b-s/2
  }
}

But hsb2hsl(0, 100, 50).l == 0 instead of 25

Update: Can I do that without converting HSB → RGB → HSL?

Answer

Bob picture Bob · Aug 6, 2015

I think this is the most precise:

function hsv_to_hsl(h, s, v) {
    // both hsv and hsl values are in [0, 1]
    var l = (2 - s) * v / 2;

    if (l != 0) {
        if (l == 1) {
            s = 0
        } else if (l < 0.5) {
            s = s * v / (l * 2)
        } else {
            s = s * v / (2 - l * 2)
        }
    }

    return [h, s, l]
}