计算具有2种颜色和百分比/位置的颜色HEX

是否可以计算渐变中间的颜色？

var color1 = 'FF0000'; var color2 = '00FF00'; // 50% between the two colors, should return '808000' var middle = gradient(color1, color2, 0.5); 

我只有两个hex字符串，我想要一个作为回报。

Answer 1

这应该工作：

它基本上涉及将它们转换为十进制，找到一半，将结果转换回hex，然后连接它们。

 var color1 = 'FF0000'; var color2 = '00FF00'; var ratio = 0.5; var hex = function(x) { x = x.toString(16); return (x.length == 1) ? '0' + x : x; }; var r = Math.ceil(parseInt(color1.substring(0,2), 16) * ratio + parseInt(color2.substring(0,2), 16) * (1-ratio)); var g = Math.ceil(parseInt(color1.substring(2,4), 16) * ratio + parseInt(color2.substring(2,4), 16) * (1-ratio)); var b = Math.ceil(parseInt(color1.substring(4,6), 16) * ratio + parseInt(color2.substring(4,6), 16) * (1-ratio)); var middle = hex(r) + hex(g) + hex(b); 

Answer 2

我不能评论上面的答案，所以我在这里写：

我发现在Javascript子字符串方法中，to参数索引不包含在返回的字符串中。 这意味着：

 var string = "test"; //index: 0123 alert(string.substring(1,3)); //will alert es and NOT est 

编辑：所以它应该是：

 parseInt(color1.substring(0,2), 16); parseInt(color1.substring(2,4), 16); 

和

 parseInt(color1.substring(4,6), 16);