从一种颜色到另一种颜色到百分比

Question

在我的网站中，我有一个变量，我们称之为x，它是一个百分比，我需要的是一种定义0％是红色和100％是蓝色的方式，所以如果我得到了50％的X他们的颜色应该是这两种颜色的组合，如果我得到70％应该是红色intesity更大的组合，以及任何百分比x给我。

Answer 1

红色的六色代码是：ff0000（十进制代码是：16711680），蓝色是0000ff（十进制代码是255）。您可以使用parseInt（十六进制，16）将十六进制转换为十进制。你的算法是：最大值16711680是100％;最小值255是0％。那么x％将会是255+（16711680-255）* x/100。你需要使用toString（16）将这个值转换为十六进制。 这里例如：

$('#control').change(function(e){ 
 
    var vl = $(this).val(); 
 
    var min = 255; //blue color -> 0000ff 
 
    var max = 16711680; //red color -> ff0000 
 
    var current = 255+Math.round(vl*(max-min)/100); 
 
    var hex = current.toString(16); 
 
    var currentHex = '#'+'0'.repeat(6-hex.length)+hex; 
 
    $('#colorcode').html(currentHex); 
 
    $('#box').css('backgroundColor', currentHex); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type='range' value='0' min='0' max='100' id='control' style='width:200px;'> 
 
<div id='colorcode'>Color code</div> 
 
<div style='width:200px;height:200px;background-color:#0000ff;' id='box'></div>