从一种颜色到另一种颜色的百分比答案

【问题标题】：From one color to another with percentages从一种颜色到另一种颜色的百分比
【发布时间】：2017-05-27 00:12:06
【问题描述】：

在我的网站中，我有一个变量，我们称之为 x，它是一个百分比，我需要一种方法来定义 0% 是红色，100% 是蓝色，所以如果我从 x 得到 50%他们的颜色应该是这两种颜色的组合，如果我得到 70% 应该是红色强度更大的组合，依此类推，x 给我的任何百分比。

【问题讨论】：

显示努力。到目前为止你的代码是什么？

标签： javascript html css

【解决方案1】：

红色的十六进制代码为：ff0000（十进制代码为：16711680），蓝色的为0000ff（十进制代码为255）。您可以使用 parseInt(hexcode, 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>

【讨论】：