Why doesn't this Javascript RGB to HSL code work?

Question

I found this RGB to HSL script over at http://www.mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript. I can't find any other small decent ones. The issue is that this code doesn't even really work. Would anybody know why? (I don't know a bit of color math, but maybe it's returning the complementary?)

function rgbToHsl(r, g, b){
    r /= 255, g /= 255, b /= 255;
    var max = Math.max(r, g, b), min = Math.min(r, g, b);
    var h, s, l = (max + min) / 2;

    if(max == min){
        h = s = 0; // achromatic
    }else{
        var d = max - min;
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
        switch(max){
            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
            case g: h = (b - r) / d + 2; break;
            case b: h = (r - g) / d + 4; break;
        }
        h /= 6;
    }

    return [h, s, l];
}

Edit: when I run rgbToHsl(126,210,22) it's giving me [ .24, .81, .45 ], which is the HSL for an orange color.

Question title and function name mis-match, what exactly are you looking for rgb to hsl or hsl to rgb? Also please show code where you are using that function. — Sarfraz
– Sarfraz, Commented Feb 27, 2010 at 19:19
It looks like it works to me, and when I try it it certainly returns a good HSL array. What is it that makes you think it doesn't work? You have to invoke it with RGB values expressed as decimal integers between 0 and 255, if that's not clear. — Pointy
– Pointy, Commented Feb 27, 2010 at 19:20
Do you mean to say that .24 needs to be multiplied by 360? I didn't exactly realize that - I expected it to come out like that. — Kyle Hotchkiss
– Kyle Hotchkiss, Commented Feb 27, 2010 at 19:32
.24 is the ratio 24/100. It naturally follows that if you want it to be out of 360, you'll need to make that conversion yourself. — Matchu
– Matchu, Commented Feb 27, 2010 at 19:33

Pointy · Accepted Answer · 2022-10-03 13:37:29Z

32

The resulting HSV array has to be interpreted as three fractions. For some programs, if you want to express HSV as integers, you multiply the "H" value by 360 and the "S" and "V" values by 100. The HSV value you quote for your green shade RGB[126, 210, 22] is HSV [87, 81, 45] in integers. You could change the function to return such integers if you want to:

function rgbToHsl(r, g, b){
    r /= 255, g /= 255, b /= 255;
    var max = Math.max(r, g, b), min = Math.min(r, g, b);
    var h, s, l = (max + min) / 2;

    if(max == min){
        h = s = 0; // achromatic
    }else{
        var d = max - min;
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
        switch(max){
            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
            case g: h = (b - r) / d + 2; break;
            case b: h = (r - g) / d + 4; break;
        }
        h /= 6;
    }

    return [Math.floor(h * 360), Math.floor(s * 100), Math.floor(l * 100)];
}

[edit] that said, it's still giving me something with a brightness ("L" or "V") that's considerably too dark; Gimp says that the HSV value should be [90, 80, 82], or in fractional terms [.20, .80, .82].

[another edit] well one problem could be that HSL and HSV are different schemes ... still looking around.

OK in case anybody wants RGB to HSV (like you'd see in Gimp for example) here's a version of that:

function rgbToHsv(r, g, b) {
    var
        min = Math.min(r, g, b),
        max = Math.max(r, g, b),
        delta = max - min,
        h, s, v = max;

    v = Math.floor(max / 255 * 100);
    if ( max != 0 )
        s = Math.floor(delta / max * 100);
    else {
        // black
        return [0, 0, 0];
    }

    if( r == max )
        h = ( g - b ) / delta;         // between yellow & magenta
    else if( g == max )
        h = 2 + ( b - r ) / delta;     // between cyan & yellow
    else
        h = 4 + ( r - g ) / delta;     // between magenta & cyan

    h = Math.floor(h * 60);            // degrees
    if( h < 0 ) h += 360;

    return [h, s, v];
}

edit note that a couple comments suggest that Math.round() might give better answers than Math.floor(), if anybody wants to experiment.

edited Oct 3, 2022 at 13:37

answered Feb 27, 2010 at 19:35

Pointy

415k62 gold badges600 silver badges636 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

BrunoLM Over a year ago

rgbToHsv(210, 210, 210) division by 0 at h = ( g - b ) / delta;

BrunoLM Over a year ago

Here is your code with a fix for this case and also HsvToRgb that I found on another website: stackoverflow.com/questions/5833624/…

Pointy Over a year ago

@BrunoLM whoa thanks!! Personally I have no present use for code like this (on my current website), but your attention to detail and completeness will certainly improve the experience of future Stackoverflow customers :-)

Mr Mystery Guest Over a year ago

@Pointy The HSV conversion works well, but I think the values need to be rounded rather than floored to match Photoshop values exactly. ( Extensive testing needed)

tomasdev Over a year ago

pretty sure it's round and not floor

|

Kamil Kiełczewski · Accepted Answer · 2020-10-28 18:07:24Z

Short but precise

It looks that your code is ok (but it returns hue=0.24 - multiply this by 360 degree to get angle integer value) - however Try this shorter one ( more: hsl2rgb, rgb2hsv, hsv2rgb and sl22sv):

// in: r,g,b in [0,1], out: h in [0,360) and s,l in [0,1]
function rgb2hsl(r,g,b) {
  let v=Math.max(r,g,b), c=v-Math.min(r,g,b), f=(1-Math.abs(v+v-c-1)); 
  let h= c && ((v==r) ? (g-b)/c : ((v==g) ? 2+(b-r)/c : 4+(r-g)/c)); 
  return [60*(h<0?h+6:h), f ? c/f : 0, (v+v-c)/2];
}

function rgb2hsl(r,g,b) {
  let v=Math.max(r,g,b), c=v-Math.min(r,g,b), f=(1-Math.abs(v+v-c-1)); 
  let h= c && ((v==r) ? (g-b)/c : ((v==g) ? 2+(b-r)/c : 4+(r-g)/c)); 
  return [60*(h<0?h+6:h), f ? c/f : 0, (v+v-c)/2];
}

console.log(`rgb: (0.36,0.3,0.24) --> hsl: (${rgb2hsl(0.36,0.3,0.24)})`);


// ---------------
// UX
// ---------------

rgb= [0,0,0];
hs= [0,0,0];

let $ = x => document.querySelector(x);

let hsl2rgb = (h,s,l, a=s*Math.min(l,1-l), f= (n,k=(n+h/30)%12) => l - a*Math.max(Math.min(k-3,9-k,1),-1)) => [f(0),f(8),f(4)];

function changeRGB(i,e) {
  rgb[i]=e.target.value/255;
  hs = rgb2hsl(...rgb);
  refresh();
}

function changeHS(i,e) {
  hs[i]=e.target.value/(i?255:1);
  rgb= hsl2rgb(...hs);
  refresh();
}

function refresh() {
  rr = rgb.map(x=>x*255|0).join(', ')
  tr = `RGB: ${rr}`
  th = `HSL: ${hs.map((x,i)=>i? (x*100).toFixed(2)+'%':x|0).join(', ')}`
  $('.box').style.backgroundColor=`rgb(${rr})`;  
  $('.infoRGB').innerHTML=`${tr}`;  
  $('.infoHS').innerHTML =`${th}`;  
  
  $('#r').value=rgb[0]*255;
  $('#g').value=rgb[1]*255;
  $('#b').value=rgb[2]*255;
  
  $('#h').value=hs[0];
  $('#s').value=hs[1]*255;
  $('#l').value=hs[2]*255;  
}

refresh();

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

body {
    display: flex;
}

<div>
<input id="r" type="range" min="0" max="255" oninput="changeRGB(0,event)">R<br>
<input id="g" type="range" min="0" max="255" oninput="changeRGB(1,event)">G<br>
<input id="b" type="range" min="0" max="255" oninput="changeRGB(2,event)">B<br>
<pre class="infoRGB"></pre>
</div> 

<div>
<div class="box hsl"></div>

</div>

<div>
<input id="h" type="range" min="0" max="360" oninput="changeHS(0,event)">H<br>
<input id="s" type="range" min="0" max="255" oninput="changeHS(1,event)">S<br>
<input id="l" type="range" min="0" max="255" oninput="changeHS(2,event)">L<br>
<pre class="infoHS"></pre><br>
</div>

I develop S_HSL wiki formulas (marked by green border) - where MAX=max(r,g,b) and MIN=min(r,g,b) - and in above code I make some improvements and make analysis which shows that results are correct. This allows me to get quite short code at the end

Marco Demaio · Accepted Answer · 2011-05-30 18:14:15Z

Function below converts RGB color into Hue Saturation Brightness color like Photoshop color picker, results are in the ranges:

Hue 0-360 (degrees)
Saturation: 0-100 (%)
Brightness: 0-100 (%)

I still don't understand why people use the term HSV (Hue Saturation Value) instead of HSB (Hue Saturation Brightness), anyway it's a matter fo terminology, the results are the same

   //Converts to color HSB object (code from here http://www.csgnetwork.com/csgcolorsel4.html with some improvements)
   function rgb2hsb(r, g, b)
   {    
    r /= 255; g /= 255; b /= 255; // Scale to unity.   
    var minVal = Math.min(r, g, b),
    maxVal = Math.max(r, g, b),
    delta = maxVal - minVal,
    HSB = {hue:0, sat:0, bri:maxVal},
    del_R, del_G, del_B;

    if( delta !== 0 )
    {
        HSB.sat = delta / maxVal;
        del_R = (((maxVal - r) / 6) + (delta / 2)) / delta;
        del_G = (((maxVal - g) / 6) + (delta / 2)) / delta;
        del_B = (((maxVal - b) / 6) + (delta / 2)) / delta;

        if (r === maxVal) {HSB.hue = del_B - del_G;}
        else if (g === maxVal) {HSB.hue = (1 / 3) + del_R - del_B;}
        else if (b === maxVal) {HSB.hue = (2 / 3) + del_G - del_R;}

        if (HSB.hue < 0) {HSB.hue += 1;}
        if (HSB.hue > 1) {HSB.hue -= 1;}
    }

    HSB.hue *= 360;
    HSB.sat *= 100;
    HSB.bri *= 100;

    return HSB;
   }

Usage example:

var hsb = rgb2hsb(126,210,22);
alert("hue = " + hsb.hue + "saturation = " + hsb.sat + "brightness = " + hsb.bri);

Henfs · Accepted Answer · 2020-05-06 12:05:38Z

0

You have to change to the hsl format just like hsl(155,100%,30%), that can be use in HTML.

//this change hsl to :  "hsl(155,100%,30%)"
function hsl2str({h,s,l,a=1}) {
    return "hsl("+h+","+s*100+"%,"+l*100+"%,"+a+")";
}
//for html, the h is 0-360, so you need this function
function rgb2hsl({r,g,b,a=1}) {
    r/=255,g/=255,b/=255;
    var max=Math.max(r,g,b),min=Math.min(r,g,b);
    var h,s,l=(max+min)/2;

    if(max==min) {
        h=s=0; // achromatic
    } else {
        var d=max-min;
        s=l>0.5? d/(2-max-min):d/(max+min);
        switch(max) {
            case r: h=(g-b)/d+(g<b? 6:0); break;
            case g: h=(b-r)/d+2; break;
            case b: h=(r-g)/d+4; break;
        }
    }

    return {h: h*60,s,l,a};
}

edited May 6, 2020 at 12:05

Henfs

5,49912 gold badges33 silver badges48 bronze badges

answered May 6, 2020 at 11:37

defend orca

7439 silver badges20 bronze badges

Collectives™ on Stack Overflow

Why doesn't this Javascript RGB to HSL code work?

4 Answers 4

9 Comments

Short but precise

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

9 Comments

Short but precise

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related