可能的重复：
基于数字的颜色编码 https://stackoverflow.com/questions/5533297/color-coding-based-on-number
我希望用户能够从 1-100 的范围内进行选择，其中当数字小于 50 时，该区域的颜色变得更深绿色，当颜色变得接近 100 时，颜色变得更红色。
我试图使其范围更接近中心，颜色应该接近白色（其中 50 = 全白色）。
我尝试了这里的答案：为功率计生成红色和绿色之间的颜色？ https://stackoverflow.com/q/340209/561731无济于事....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']");
Fiddle: http://jsfiddle.net/maniator/tKrM9/1/ http://jsfiddle.net/maniator/tKrM9/1/
我尝试了许多不同的 r、g、b 组合，但我似乎真的无法做到正确。
由于在 RBG 空间中创建渐变的方式，您会得到混乱的绿色。要获得“更干净”的梯度，您可以使用提到的 HSV 模型在您链接到的问题的答案中 https://stackoverflow.com/questions/340209/generate-colors-between-red-and-green-for-a-power-meter/340214#340214.
RGB gradient (top) vs HSV (bottom)
通过在 0（红色）和 120（绿色）之间缩放 H（色调）值，您将获得漂亮干净的过渡。然而，在中间点 (60)，您最终会得到亮黄色，而不是您想要的白色。您可以通过修改 S（饱和度）值来解决这个问题 - 在 0 饱和度时，您最终会得到白色（1 给您全色饱和度。
下面是一个粗略的示例，当输入值从 0 到 50 再到 100 时，饱和度从 1 缩放到 0，然后又回到 1 -http://jsfiddle.net/xgJ2e/2/ 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
附注颜色模型之间的转换很容易使用jquery 颜色 https://github.com/Enideo/jquery-colors，尽管自己推出并不难。