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

How to map number specific color from gradient

本文关键字：颜色 数字 映射 渐变      更新时间：2023-09-26

假设我有一个div，背景是从绿色到红色的平滑线性梯度（从左到右），给定一个介于0和1之间的数字，我想知道从左边开始的百分比。

Ie 0将映射到绿色，1将映射到红色。5将映射到红绿色的中间等等，所以这样的函数的返回将是颜色表示（例如十六进制、rgba）。

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

如果您可以将十六进制转换为整数，我认为您应该能够获得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)];
}

然后对两种颜色调用此函数，得到一个int数组。

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) 的方式

相关文章：