Выбрать цвет из диапазона, обеспечиваемого линейным градиентом в HTML, используя JavaScript

Question

Я определил линейный градиент "линейный градиент (сверху, красный, желтый, зеленый)". Скажем, красный соответствует 0, а зеленый соответствует 1, как я могу выбрать цвет, указав число в этом диапазоне, например, 0,5 должно соответствовать желтому, 0,75 - светло-зеленому, 0,25 - светло-красному и т. Д. Я хотел бы представить его как функцию JavaScript.

Answer 1

По сути, вы хотите, чтобы f (0) было R(255) G(0) B(0), f(1/2) было R(255) G(255) B(0) и, наконец, f (1) до быть R (0) G (255) B (0). Здесь у вас есть 2 градиента: первый от красного до желтого, а второй от желтого до зеленого. Простой способ сделать это - сказать, например:

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;