ある色から別の色へ百分率

Question

私のウェブサイトには変数があり、それをパーセンテージと呼んで、0％が赤、100％が青であることを定義する方法が必要です私は70％が赤のintesityがより大きい、そしてどんなパーセンテージxでも私を与えるコンビネーションでなければなりません、私はそれらからxの50％を得る色がこの2つの色の組み合わせでなければなりません。

Answer 1

赤色は、ヘキサコード：ff0000（10進コード：16711680）、青は0000ff（10進コードは255）です。 parseInt（16進コード、16）を使用して16進数から12進数に変換できます。あなたのアルゴリズム：最大値16711680は100％です。最小値255は0％です。次に、x％は255+（16711680-255）* x/100になります。また、toString（16）を使用してこの値を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>