javascript 计算具有 2 种颜色和百分比/位置的颜色十六进制
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16360533/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Calculate color HEX having 2 colors and percent/position
提问by Kalamar Obliwy
Is it possible to calculate a color in a middle of a gradient?
是否可以计算渐变中间的颜色？
var color1 = 'FF0000';
var color2 = '00FF00';
// 50% between the two colors, should return '808000'
var middle = gradient(color1, color2, 0.5);
I only have two hex strings, and I want one in return.
我只有两个十六进制字符串，我想要一个作为回报。
回答by techfoobar
This should work:
这应该有效：
It basically involves converting them to decimal, finding the halves, converting the results back to hex and then concatenating them.
它基本上涉及将它们转换为十进制，找到一半，将结果转换回十六进制，然后将它们连接起来。
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);
回答by Nilz11
I can't comment on the answer above, so I write it here:
我无法对上面的答案发表评论，所以我写在这里：
I found out that in the Javascript substring method the to parameter index is not included in the returned string. That means:
我发现在 Javascript 子字符串方法中，返回的字符串中不包含 to 参数索引。这意味着：
var string = "test";
//index: 0123
alert(string.substring(1,3));
//will alert es and NOT est
Edit: So it should be:
编辑：所以它应该是：
parseInt(color1.substring(0,2), 16);
parseInt(color1.substring(2,4), 16);
and
和
parseInt(color1.substring(4,6), 16);
回答by Masih Jahangiri
You can use this ready function (ES6):
你可以使用这个就绪函数（ES6）：
const calculateMiddleColor = ({
color1 = 'FF0000',
color2 = '00FF00',
ratio,
}) => {
const hex = (color) => {
const colorString = color.toString(16);
return colorString.length === 1 ? `0${colorString}` : colorString;
};
const r = Math.ceil(
parseInt(color2.substring(0, 2), 16) * ratio
+ parseInt(color1.substring(0, 2), 16) * (1 - ratio),
);
const g = Math.ceil(
parseInt(color2.substring(2, 4), 16) * ratio
+ parseInt(color1.substring(2, 4), 16) * (1 - ratio),
);
const b = Math.ceil(
parseInt(color2.substring(4, 6), 16) * ratio
+ parseInt(color1.substring(4, 6), 16) * (1 - ratio),
);
return hex(r) + hex(g) + hex(b);
};
//////////////////////////////////////////////////////////////////////
console.log(calculateMiddleColor({ ratio: 0 / 5 })); // ff0000
console.log(calculateMiddleColor({ ratio: 5 / 5 })); // 00ff00
console.log(calculateMiddleColor({ ratio: 2.5 / 5 })); // 808000
console.log(calculateMiddleColor({ ratio: 4.2 / 5 })); // 29d700
