使用javascript从html中的线性渐变提供的范围中选择颜色

Question

I defined a linear gradient "linear-gradient(to top, red, yellow, green)". Let's say that red corresponds to 0 and green corresponds to 1, how can I pick a color by providing number in that range, for example 0.5 should correspond to yellow, 0.75 - light green, 0.25 - light red, etc. I would like to present it as javascript function.

Answer 1

Basically, you want f(0) to be R(255) G(0) B(0), f(1/2) to be R(255) G(255) B(0) and finally f(1) to be R(0) G(255) B(0). Here you have actually 2 gradients, a first from red to yellow and a second from yellow to green. A simple way to do that would be to say for instance :

if(inputValue < 0.5){
    red = 255; //On first part of the gradient, red is always 255
    green = (inputValue * 2) * 255; //Green increase from 0 to 255
    yellow = 0; //Yellow is always 0
}else{
    red = 255*(1-((inputValue - 0.5)*2)); //On that second part, red go from 255 to 0
    green = 255; //Green is always 255
    yellow = 0; //Yellow is always 0
}

Answer 2

var output.r = (inputValue * color1.r + (1 - inputValue) * color2.r) / 2;
var output.g = (inputValue * color1.g + (1 - inputValue) * color2.g) / 2;
var output.b = (inputValue * color1.b + (1 - inputValue) * color2.b) / 2;