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

【问题标题】：How to map number specific color from gradient如何从渐变映射数字特定颜色
【发布时间】：2014-11-10 21:44:11
【问题描述】：

假设我有一个从绿色到红色的平滑线性渐变（从左到右）背景的 div，并给定一个介于 0 和 1 之间的数字，我想知道从左边算起该百分比的特定颜色。

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

我不确定如何获取 div 中特定背景点的颜色。如果我能弄清楚，我想我会没事的。

【问题讨论】：

不确定我是否理解您要构建的内容？这像 javascript 颜色选择器吗？
是的。除了你基本上是从一个特定的元素中挑选

标签： javascript jquery css linear-gradients

【解决方案1】：

如果您可以将十六进制转换为整数，我认为您应该能够获得两种颜色之间的平均数。假设您已经有了颜色代码绿色：#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)

【讨论】：