如何生成与颜色成比例的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 = 'ABCDEF'; 

然后（在一个函数）我们直接捕获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/