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

by

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

More Related Contents:

  1. RGB to hex and hex to RGB
  2. How to get hex color value rather than RGB value?
  3. JS function to calculate complementary colour?
  4. Javascript color gradient
  5. Convert HSB/HSV color to HSL
  6. How to read with JavaScript [closed]
  7. jQuery animate backgroundColor
  8. Random color generator
  9. HSL to RGB color conversion
  10. Programmatically Lighten or Darken a hex color (or rgb, and blend colors)
  11. Javascript function to convert color names to hex codes
  12. Javascript convert HSB/HSV color to RGB accurately
  13. JavaScript eyedropper (tell color of pixel under mouse cursor)
  14. How do you get the hue of a #xxxxxx colour?
  15. convert Hsl to rgb and hex
  16. Background-color hex to JavaScript variable
  17. How can I generate the opposite color according to current color?
  18. How to check if a string is a valid hex color representation?
  19. Convert Hex to RGBA
  20. Mixing two colors “naturally” in javascript
  21. RGB to HSV color in javascript? [closed]
  22. Is canvas getImageData method machine/browser dependent?
  23. regex javascript to match both RGB and RGBA
  24. Generate colors between red and green for an input range [duplicate]
  25. Browsers automatically evaluate hex or hsl colors to rgb when setting via element.style.background?
  26. RGB to HSL conversion
  27. Javascript Regular Expression for rgb values
  28. Chart.js Line, different fill color for negative point
  29. Change text color with Javascript?
  30. How to check if hex color is “too black”?

Leave a Comment