How to map number specific color from gradient

Question

Let's say I have a div with a smooth linear gradient (left to right) background from green to red and given a number between 0 and 1 I want to know the specific color that percentage from the left.

Ie 0 would map to green and 1 would map to red. .5 would map to the reddish greenish middle etc. so the return of such a function would be the color representation (e.g hex, rgba).

I'm not sure how to get the color of a specific spot of the background within a div. if I could figure that out I think I'd be ok.

Answer 1

If you could convert Hex into integers for the number I think you should be able to get the average number between 2 colors. Assuming you already have the color codes Green: #33FF33 Red: #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)];
}

Then call this function for both of your colors giving you an array of 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
}

This should return the average color.

If you could post the background value you have for an element, I can post the selecting of colors.

This is how you would call it GetColorAtPos(ConvertToInt("FFFFFF"), ConvertToInt("000000"), .5)