如何从梯度映射数字特定颜色

Question

假设我有一个div，有一个平滑的线性梯度(从左到右)背景，从绿色到红色，给出一个介于0到1之间的数字，我想知道从左到右的特定颜色。

IE0将映射为绿色，1将映射为红色。.5将映射到带红色的绿色中间等，因此这样一个函数的返回将是颜色表示(例如十六进制，rgba)。

我不知道如何在div中得到特定背景点的颜色。如果我能搞清楚的话我想我会没事的。

Answer 1

如果你能把十六进制转换成整数，我想你应该可以得到2种颜色之间的平均数。假设你已经有了颜色代码绿色：#33FF33红色：# you 0000

function ConvertToInt(colorHex){
    if(colorHex.length != 6){return 0;}
    var R = colorHex.substring(0,2);
    var G = colorHex.substring(2,4);
    var B = colorHex.substring(4,6);

    return [parseInt(R,16),parseInt(G,16),parseInt(B,16)];
}

然后为您的两种颜色调用此函数，为您提供一个ints数组。

function GetColorAtPos(color1,color2,position){
    color1Multiplier = position;
    color2Multiplier = 1-position;
    finalRGB = [];
    for(i =0;i<=2;i++){ 
        finalRGB.push(parseInt((color1[i] * color1Multiplier) + (color2[i] * color2Multiplier)))
    }
     return finalRGB
}

这应该会返回平均颜色。

如果你可以张贴一个元素的背景值，我可以张贴颜色的选择。

这就是你所说的GetColorAtPos(ConvertToInt("FFFFFF"), ConvertToInt("000000"), .5)