Question

让我说我有一个div，从绿色到红色的平滑线性渐变（从左到右）背景，给出0到1之间的数字我想知道左边百分比的特定颜色。

即0将映射为绿色，1将映射为红色。 .5将映射到带红色的绿色中间等，因此这种函数的返回将是颜色表示（例如hex，rgba）。

我不确定如何在div中获取背景特定位置的颜色。如果我能搞清楚，我想我还可以。

Answer 1

如果您可以将Hex转换为整数，我认为您应该能够获得2种颜色之间的平均数。假设您已经有颜色代码格林：＃33FF33 红色：＃FF0000

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)];
}

然后为这两种颜色调用此函数，为您提供一组整数。

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)

如何从渐变中映射数字特定颜色

1 个答案: