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

Posted 2023-02-16

【中文标题】为输入范围生成红色和绿色之间的颜色

【英文标题】：Generate colors between red and green for an input range [duplicate]

【发布时间】：2012-08-04 15:57:59

【问题描述】：

可能重复：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 组合，但我似乎真的无法做到。

【问题讨论】：

@Jean-FrançoisCorbett 你到底是什么意思？

【参考方案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

附言使用 jquery-colors 在颜色模型之间进行转换很容易，尽管您自己也不太难。

【参考方案2】：

我在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/

【讨论】：

+1 正是我要搜索的内容。很好的解决方案。

【参考方案3】：

以一种非常随意的方式，我想我会这样做：

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

【讨论】：

你有可以给我看的例子吗？ :-)

@Neal 添加了一个代码示例以放入您的小提琴中。 （我将这个示例的 var 引用更改为 global，但这很容易解决。）

您的解决方案有效 :-) 我添加了我自己的解决方案，我发现它可以让我灵活地使用我的颜色 :-)