如何生成與顏色成比例的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/