¿Por qué no funciona este código Javascript RGB a HSL?

Encontré este script RGB a HSL en http://www.mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript . No puedo encontrar otros pequeños decentes. El problema es que este código ni siquiera funciona realmente. ¿Alguien sabría por qué? (No sé un poco de color matemático, pero tal vez es devolver el complemento?)

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

Editar: cuando ejecuto rgbToHsl(126,210,22) me da [.24, .81, .45], que es el HSL para un color naranja.

2 Solutions collect form web for “¿Por qué no funciona este código Javascript RGB a HSL?”

La matriz de HSV resultante debe interpretarse como tres fracciones. Para algunos progtwigs, si desea express HSV como integers, multiplica el valor "H" por 360 y los valores "S" y "V" por 100. El valor HSV que cita para su sombra verde RGB [126, 210, 22] es HSV [87, 81, 45] en numbers integers. Puede cambiar la function para devolver dichos integers si lo desea:

 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] que dijo, todavía me está dando algo con un brillo ("L" o "V") que es considerablemente demasiado oscuro; Gimp dice que el valor de HSV debe ser [90, 80, 82] o en términos fraccionarios [.20, .80, .82].

[Otra edición] bueno, un problema podría ser que HSL y HSV son diferentes esquemas … todavía mirando a su alnetworkingedor.

OK en caso de que alguien quiera RGB a HSV (como lo vería en Gimp por ejemplo) aquí hay una versión de eso:

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

La function a continuación convierte el color RGB en el color de Brillo de Saturación Hue como el selector de color de Photoshop, los resultados están en los ranges:

  • Hue 0-360 (grados)
  • Saturación: 0-100 (%)
  • Brillo: 0-100 (%)

Todavía no entiendo por qué las personas usan el término HSV (Valor de saturación de tono) en lugar de HSB (Brillo de saturación de tono), de todos modos es una cuestión de terminología, los resultados son los mismos

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

Ejemplo de uso:

 var hsb = rgb2hsb(126,210,22); alert("hue = " + hsb.hue + "saturation = " + hsb.sat + "brightness = " + hsb.bri); 
  • Color de background hex a variable de JavaScript
  • Convierte cadenas rgb a hexadecimal en Javascript
  • Javascript convierte el color HSB / HSV a RGB con precisión
  • Expresión regular de Javascript para valores de rgb
  • Todas las combinaciones de colors RGB en Javascript
  • ¿Cómo puedo generar un círculo arcoiris con canvas HTML5?
  • Profundidad del pixel vs. Profundidad del color
  • Colores aleatorios con preference
  • RGB a Hex y Hex a RGB
  • regex javascript para unir RGB y RGBA
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.