Convert HSB/HSV color to HSL

Question

How do I convert HSB color to HSL?

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

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?

Wesley

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

Cook

WARNING!!! the code in the link above is buggy, it has zero division problem, see ericsoco answer for how to solve it – Fructification

Agree; that page is one of the top Google hits, but does not deserve to be. Mary's answer below is the best. – Mangum

Answer 2

Short but precise

Try this (s,v,l in [0,1], more: hsv2rgb rgb2hsv and hsl2rgb rgb2hsl)

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

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

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

console.log("hsv:["+ hsl2hsv(30,1,0.6) +"] hsl:["+ hsv2hsl(30,0.8,1) +"]");


// -------------------
// UI code
// -------------------

let $ = x => document.querySelector(x);
let c = (x,s) => $(x).style.backgroundColor=s;
let hsl=[0,1,0.5];
let hsv=hsl2hsv(...hsl);

let refreshHSV =(i,e) => {
   hsv[i]= e.target.value/(i?100:1);
   hsl=hsv2hsl(...hsv);
   refreshView();
}

let refreshHSL =(i,e) => {
   hsl[i]= e.target.value/(i?100:1);
   hsv=hsl2hsv(...hsl);  
   refreshView();
}

let hsv2rgb = (h,s,v) => {                              
  let f= (n,k=(n+h/60)%6) => v - v*s*Math.max( Math.min(k,4-k,1), 0);     
  return [f(5),f(3),f(1)];       
}

let refreshView = () => {
   let a= [hsl[0], (hsl[1]*100).toFixed(2), (hsl[2]*100).toFixed(2)]; 
   let b= [hsv[0], (hsv[1]*100).toFixed(2), (hsv[2]*100).toFixed(2)]; 
   
   let r= hsv2rgb(...hsv).map(x=>x*255|0);
   let ta= `hsl(${a[0]},${a[1]}%,${a[2]}%)`
   let tb= `hsv(${b[0]},${b[1]}%,${b[2]}%)`
   let tr= `rgb(${r[0]},${r[1]},${r[2]})`
   
   c('.hsl', tr);   
   $('#sv').value=hsv[1]*100;
   $('#v').value =hsv[2]*100;
   $('#sl').value=hsl[1]*100;
   $('#l').value =hsl[2]*100;
   $('.info').innerHTML=`${tr}\n${tb}\n${ta.padEnd(25)}`;   
}



refreshView();

.box {
  width: 50px;
  height: 50px;
  margin: 20px;
}

body {
    display: flex;
    background: white;
}

<div>
<input id="h" type="range" min="0" max="360" value="0" oninput="refreshHSV(0,event)">Hue<br>
<div class="box hsl"></div>
<pre class="info"></pre>
</div> 

<div>
<input id="sv" type="range" min="0" max="100" value="0" oninput="refreshHSV(1,event)">HSV Saturation<br>
<input id="v" type="range" min="0" max="100" value="100" oninput="refreshHSV(2,event)">HSV Value<br><br><br>
<input id="sl" type="range" min="0" max="100" value="0" oninput="refreshHSL(1,event)">HSL Saturation<br>
<input id="l" type="range" min="0" max="100" value="100" oninput="refreshHSL(2,event)">HSL Lightness<br>
</div>

This code based on formulas which I discover and write on wiki

Cipango

Answer 3

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];
}

Fructification

Answer 4

Stephen Morley seems to have nailed it here.

Specifically:

/* Calculates and stores the HSL components of this HSVColour so that they can
 * be returned be the getHSL function.
 */
function calculateHSL(){
  // determine the lightness in the range [0,100]
  var l = (2 - hsv.s / 100) * hsv.v / 2;

  // store the HSL components
  hsl =
    {
      'h' : hsv.h,
      's' : hsv.s * hsv.v / (l < 50 ? l * 2 : 200 - l * 2),
      'l' : l
    };

  // correct a division-by-zero error
  if (isNaN(hsl.s)) hsl.s = 0;
}

He uses [0-360] for hue and [0-100] for the other values.

Embus

shouldn't hsl.s be equal to hsv.s if hsv.v and therefore hsl.l are equal to zero ? (your function returns 0) en.wikipedia.org/wiki/… en.wikipedia.org/wiki/… – Fructification

The isNaN() check destroys information about s, and is unnecessary. If L < .5, hsl.s = hsv.s / (2 - hsv.s). This gets around the NaN and preserves s. See Mary's answer below. – Mangum

Answer 5

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.

Herb

Answer 6

Wikipedia no longer shows the formulas shown by Kamil Kiełczewski. They now look like this:

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

Lysin

Answer 7

You can try using Tinycolor library. To convert from HSV to HSL you could do this

tinycolor("hsv(34, 56%, 100%)").toHslString()

you should get result somethng like this : "hsl(34, 100%, 72%)"

Leucas

Answer 8

I got wrong results with the functions in other answers. Now got these that seem to work well:

function hsb_to_hsl(h, s, b) {
    const x = (200 - s) * b / 100;
    return {
        h,
        s: x === 0 || x === 200 ? 0 : Math.round(s * b / (x <= 100 ? x : 200 - x)),
        l: Math.round(x / 2)
    };
}

function hsl_to_hsb(h, s, l) {
    const x = s * (l < 50 ? l : 100 - l);
    const b = l + (x / 100);
    return {
        h,
        s: l === 0 ? s : 2 * x / b,
        b
    };
}

Rauwolfia

Answer 9

There are a lot of conversion formulas between different color spaces: http://www.easyrgb.com/?X=MATH

Plaza