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

Question

这个问题在这里已经有了答案:




9年前关闭。

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

fiddle : http://jsfiddle.net/maniator/tKrM9/1/

我已经尝试了许多不同的 r,g,b 组合，但我似乎真的无法做到正确。

Answer 1

由于您在 RBG 空间中创建渐变的方式，您得到了困惑的绿色。要获得“更干净”的梯度，您可以使用提到的 HSV 模型 in the answer of the question you linked to .

RGB 渐变(顶部)与 HSV(底部)


通过在 0(红色)和 120(绿色)之间缩放 H(色调)值，您将获得一个非常干净的过渡。但是，在中间点 (60)，您最终会得到亮黄色，而不是您想要的白色。您可以通过修改 S(饱和度)值来解决此问题——饱和度为 0 时，您将得到白色(1 为您提供全色饱和度。

这是一个粗略的例子，当输入值从 0 到 50 再到 100 时，将饱和度从 1 缩放到 0 再回到 1 - 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

p.s.使用 jquery-colors 在颜色模型之间进行转换很容易，尽管自己动手并不难。