如果您想要创建一种介于其他两种颜色之间一定百分比 (0-100) 的颜色,您可以使用以下 javascript 来实现:
function makeGradientColor(color1, color2, percent) {
var newColor = {};
function makeChannel(a, b) {
return(a + Math.round((b-a)*(percent/100)));
}
function makeColorPiece(num) {
num = Math.min(num, 255); // not more than 255
num = Math.max(num, 0); // not less than 0
var str = num.toString(16);
if (str.length < 2) {
str = "0" + str;
}
return(str);
}
newColor.r = makeChannel(color1.r, color2.r);
newColor.g = makeChannel(color1.g, color2.g);
newColor.b = makeChannel(color1.b, color2.b);
newColor.cssColor = "#" +
makeColorPiece(newColor.r) +
makeColorPiece(newColor.g) +
makeColorPiece(newColor.b);
return(newColor);
}
该函数假设渐变是通过两个端点颜色的每个 r、g 和 b 通道值之间的线性插值实现的,这样 50% 渐变值就是每个 r、g、b 值的中点(所呈现的两种颜色之间的中间) 。一次也可以制作不同类型的渐变(使用不同的插值函数)。
要将此结果分配给背景,您可以使用我添加到返回结果中的 CSS 颜色值,如下所示:
// sample usage
var yellow = {r:255, g:255, b:0};
var blue = {r:0, g:0, b:255};
var newColor = makeGradientColor(yellow, blue, 79);
element.style.backgroundColor = newColor.cssColor;