如何按比例生成CSS颜色？

Question

比如说有一堆值的范围从[80.8,92.1]我想让最低值80.8的颜色为纯红色＃FF0000而92.1的颜色为纯绿色＃00FF00。 对于中间的值，我希望它们的颜色与从红色到绿色的值成比例，如下图所示。

是否有任何函数给出它可以吐出CSS颜色值的值？ 或其他任何事情让这份工作失效？

Answer 1

这是我在JSFiddle上提出的解决方案：

要解释发生了什么：

var red    = "#FF0000";
var yellow = "#FFFF00";
var green  = "#00FF00";

这些是我们的最小值，中间值和最大值可供选择。 简而言之，红黄绿。 为了将这些值作为红色和绿色的颜色范围提供，我们需要使用一些数学：

首先，我们将可能的十六进制值存储在字符串中：

var hex = '0123456789ABCDEF';

然后（在函数中）我们直接捕获min-middle-max范围值。 至于其他情况，我们使用一些数学来根据范围中的现有值选择0-F之间的一些十六进制值。 以下是作为功能：

function update(val) {
    if(val == 0) {
        $('#color').css('background', red);        
    } else if(val == 50) {
        $('#color').css('background', yellow);
    } else if(val == 100) {
        $('#color').css('background', green);
    } else {
        if(val < 50) {
            // val < 50 is between red and yellow
            var perc = val/50;
            var hexVal = hex[Math.round(16*perc)];
            $('#color').css('background', "#FF"+hexVal+hexVal+"00");
        } else if(val > 50) {
            // val > 50 is between yellow and green
            var perc = val/100/0.5-1;
            var hexVal = hex[hex.length - Math.round(16*perc)];
            $('#color').css('background', "#"+hexVal+hexVal+"FF00");
        }
    }
}

#color是一个显示活动颜色的div容器。

在这里查看JSFiddle： http ： //jsfiddle.net/rhyx81u4/4/