Convert HSB color to HSL

Question

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 1

I'm afraid my Javascript knowledge is lacking, but you should be able to infer the conversion from http://ariya.blogspot.com/2008/07/converting-between-hsl-and-hsv.html

Answer 2

First of all, your order of operations will result in:

b - s / 2 =
50 - 100 / 2 =
50 - 50 = 0

because the division operator has higher precedence than subtraction. If you're expecting 25, you need to do (b - s) / 2 instead.

I'm not exactly sure that this result is what you want, however. Since the definitions of both B (V) and L are based on the RGB colorspace, you need at least a way to recover the values of M and m to calculate the conversion.

See the Wikipedia article for more information.