生成红色和绿色之间的颜色的输入范围

Question

可能重复：
Color coding based on number生成红色和绿色之间的颜色的输入范围

我希望用户能够从一系列选择1-100，其中用于当数字小于50时，该区域的颜色变为深绿色，并且随着颜色变得接近100，颜色变得更红。

我想让它的范围更接近中心，颜色应该接近白色（其中50 =全白）。

我试图从这里的答案：Generate colors between red and green for a power meter?无济于事.... 50结束是一个混乱的绿色......

我有以下的html：

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

而下面的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']");​ 

小提琴：http://jsfiddle.net/maniator/tKrM9/1/

我已经尝试了很多不同的r，g，b组合，但我真的无法把它做好。

Answer 1

我走了过来。这个答案在here的帮助下使用了Interpolate功能，我可以轻松设置开始和结束颜色。

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']");​ 

小提琴：http://jsfiddle.net/maniator/tKrM9/53/

Answer 2

在一个非常手波浪的方式，我想我会做这种方式：

使其应用范围从1-50有最大的绿色（FF），并为红色和蓝色，从00缩放值用于红色和蓝色在1，所有一直到FF为红色和蓝色在50

（样品值：1 - > 00FF00，25 - > 7FFF7F，50 - > FFFFFF）

然后从51 -100，在FF处保持红色，同时缩小蓝色和绿色，以便在达到100时蓝色和绿色接近0。（样品值：51 - > FFFFFF，75 - > FF7F7F，100 - > FF0000）

这保证给你在0亮绿，白在50，并且在红色100

的面积在两者之间可能并不完全完美，只是因为眼睛不同地解释不同的颜色强度（我们比其他颜色更好），但它应该让你非常接近。

我修改了代码在你的小提琴以下，和它做什么，我形容：

$(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

你得到的，因为你创造了RBG空间的梯度方式的混乱绿。要获得“更清洁”的渐变，您可以使用如提到的in the answer of the question you linked to所述的HSV模型。

^{RGB梯度（上）与HSV（底部）}

通过缩放0（红色）的H（色调）值和120（绿色），你会得到一个干净的转变。然而，在中点（60），你会以明亮的黄色而不是你想要的白色结束。你可以通过修改S（饱和度）值来解决这个问题 - 在0饱和度时，你会以白色结束（1给你全色饱和度）

下面是一个简单的例子，它将饱和度从1调整到0，回到1作为输入值从0到50至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转换是很容易使用jquery-colors，虽然它不是太难推出自己的