Generar colores entre rojo y verde para un rango de entrada

Question

Duplicar posible:
Color coding based on number

que quiero para que un usuario sea capaz de seleccionar entre una amplia gama 1-100, donde a medida que los números llegan a ser menos de 50, el color del área se vuelve más oscuro y, a medida que el color se acerca a 100, el color se vuelve más rojo.

Estoy tratando de hacerlo de modo que como el rango en más hacia el centro, el color debe estar cerca del blanco (donde 50 = blanco completo).

Probé la respuesta desde aquí: Generate colors between red and green for a power meter? en vano .... 50 termina siendo una confusa verde ...

tengo el código HTML siguiente:

<span><span class="value">50</span><input type="range" /></span>​ 

Y el siguiente JavaScript :

$(document).on({ 
    change: function(e) { 

     var self = this, 
      span = $(self).parent("span"), 
      val = parseInt(self.value); 
     if (val > 100) { 
      val = 100; 
     } 
     else if (val < 0) { 
      val = 0; 
     } 
     $(".value", span).text(val); 
     var r = Math.floor((255 * val)/100), 
      g = Math.floor((255 * (100 - val))/100), 
      b = 0; 
     span.css({ 
      backgroundColor: "rgb(" + r + "," + g + "," + b + ")" 
     }); 
    } 
}, "input[type='range']");​ 

violín: http://jsfiddle.net/maniator/tKrM9/1/

He probado muchas combinaciones diferentes de r, g, b pero realmente no puedo hacerlo bien.

Answer 1

me ocurrió. con esta respuesta con un poco de ayuda de here, que usa un Interpolate función en la que puedo establecer los colores de inicio y final fácilmente.

function Interpolate(start, end, steps, count) { 
    var s = start, 
     e = end, 
     final = s + (((e - s)/steps) * count); 
    return Math.floor(final); 
} 

function Color(_r, _g, _b) { 
    var r, g, b; 
    var setColors = function(_r, _g, _b) { 
     r = _r; 
     g = _g; 
     b = _b; 
    }; 

    setColors(_r, _g, _b); 
    this.getColors = function() { 
     var colors = { 
      r: r, 
      g: g, 
      b: b 
     }; 
     return colors; 
    }; 
} 

$(document).on({ 
    change: function(e) { 

     var self = this, 
      span = $(self).parent("span"), 
      val = parseInt(self.value), 
      red = new Color(232, 9, 26), 
      white = new Color(255, 255, 255), 
      green = new Color(6, 170, 60), 
      start = green, 
      end = white; 

     $(".value", span).text(val); 

     if (val > 50) { 
      start = white, 
       end = red; 
      val = val % 51; 
     } 
     var startColors = start.getColors(), 
      endColors = end.getColors(); 
     var r = Interpolate(startColors.r, endColors.r, 50, val); 
     var g = Interpolate(startColors.g, endColors.g, 50, val); 
     var b = Interpolate(startColors.b, endColors.b, 50, val); 

     span.css({ 
      backgroundColor: "rgb(" + r + "," + g + "," + b + ")" 
     }); 
    } 
}, "input[type='range']");​ 

violín: http://jsfiddle.net/maniator/tKrM9/53/

Answer 2

En una forma ondulada mano muy, creo que me gustaría hacerlo de esta manera:

Hacer que el rango de 1-50 tienen máxima verde (FF), y un valor reducido para ambos rojo y azul que van desde 00 para el rojo y el azul en 1, todo el camino hasta FF para el rojo y el azul en 50.

(valores de muestra: 1 -> 00FF00, 25 -> 7FFF7F, 50 -> FFFFFF)

Luego de 51 -100, manténgase rojo en FF, mientras se reduce el azul y el verde para que el azul y el verde se acerquen a 0 cuando llegue a 100.

(valores de muestra: 51 -> FFFFFF, 75 -> FF7F7F, 100 -> FF0000)

Esto está garantizado para darle verde brillante a 0, blanco en 50, y rojo a 100.

Las áreas en el medio puede no ser exactamente perfecto, simplemente porque el ojo interpreta diferentes intensidades de color de manera diferente (somos mejores en algunos colores que otros), pero debe acercarnos bastante.

he modificado el código en su violín a la siguiente, y lo hace lo que describo:

$(document).on({ 
    change: function(e) { 

     var self = this, 
      span = $(self).parent("span"), 
      val = parseInt(self.value); 
     if (val > 100) { 
      val = 100; 
     } 
     else if (val < 0) { 
      val = 0; 
     } 
     $(".value", span).text(val); 
     if (val <= 50) 
     { 
      r = Math.floor((255 * (val/50))), 
      g = 255, 
      b = Math.floor((255 * (val/50))); 
     } 
     else 
     { 
      r = 255, 
      g = Math.floor((100 - val)/50 * 255), 
      b = Math.floor((100 - val)/50 * 255); 
     } 
     span.css({ 
      backgroundColor: "rgb(" + r + "," + g + "," + b + ")" 
     }); 
    } 
}, "input[type='range']"); 

Answer 3

que está recibiendo el verde confusa debido a la forma en que está la creación de su gradiente en el espacio RGB. Para obtener un degradado "más limpio", puede usar el modelo HSV como se menciona in the answer of the question you linked to.

^{RGB gradiente (parte superior) vs VHS (abajo)}

Escalando el valor H (tono) entre 0 (rojo) y 120 (verde) que obtendrá una buena transición limpia .Sin embargo, en el punto medio (60) terminará con un amarillo brillante en lugar de su blanco deseado. Puede solucionar esto modificando el valor S (saturación): a 0 saturación, terminará en blanco (1 le da saturación a todo color.

Aquí hay un ejemplo crudo que escala la saturación de 1 a 0 y de nuevo a 1 como valor de entrada va de 0 a 50 y 100 - http://jsfiddle.net/xgJ2e/2/

var hue = Math.floor((100 - val) * 120/100); // go from green to red 
var saturation = Math.abs(val - 50)/50; // fade to white as it approaches 50 

ps la conversión entre los modelos de color es fácil de usar jquery-colors, aunque no es demasiado difícil de rodar su propia