Perché questo codice da Javascript RGB a HSL non funziona?

Question

Ho trovato questo script da RGB a HSL a http://www.mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript. Non riesco a trovare altri piccoli decenti. Il problema è che questo codice non funziona davvero. Qualcuno saprebbe perché? (Non so un po 'di matematica di colore, ma forse è la restituzione del complementare?)

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: quando corro rgbToHsl(126,210,22) mi sta dando [.24, .81, .45], che è l'HSL per un colore arancione.

Answer 1

L'array HSV risultante deve essere interpretato come tre frazioni. Per alcuni programmi, se si desidera esprimere HSV come numeri interi, moltiplicare il valore "H" di 360 e i valori "S" e "V" di 100. Il valore HSV che si cita per la tonalità verde RGB [126, 210, 22] è HSV [87, 81, 45] in numeri interi. Si potrebbe modificare la funzione di restituire tali interi, se si vuole:

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

[modifica] che ha detto, è ancora darmi qualcosa con una luminosità ("L" o "V") che è notevolmente troppo scuro; Gimp dice che il valore HSV dovrebbe essere [90, 80, 82], o in termini frazionari [.20, .80, .82].

[altro edit] bene un problema potrebbe essere che HSL e HSV sono schemi diversi ... ancora guardandosi attorno.

OK nel caso in cui qualcuno vuole RGB per HSV (come ci si vede in Gimp per esempio) ecco una versione di che:

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

Answer 2

Funzione di seguito converte RGB colore nel colore Tonalità Saturazione Luminosità come Photoshop color picker , i risultati sono nelle gamme:

• Hue 0-360 (gradi)
• Saturazione: 0-100 (%)
• Luminosità: 0-100 (%)

io ancora non capisco perché la gente usa il termine HSV (Tonalità Saturazione Valore) invece di HSB (Tonalità Saturazione Luminosità), in ogni caso è una questione fo terminologia, i risultati sono gli stessi

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

esempio

Usage:

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