Convert Percentages into Colors on a Gradient

by khamer

HTML

<input class="color" type="range" min="0" max="1" step=".01">

JavaScript

const GreatBayGradient = [
    {r: 128, g: 32, b: 0},
    {r: 175, g: 65, b: 31},
    {r: 244, g: 124, b: 42},
    {r: 253, g: 184, b: 19},
    {r: 255, g: 255, b: 255},
];

let colorFromGradient = function(percentage, gradient) {
    if (percentage > 1) {
        pecentage = 1;
    } else if (percentage < 0) {
        perecentage = 0;
    }
    let index = percentage * (gradient.length - 1);
    let color1 = gradient[Math.floor(index)];
    let color2 = gradient[Math.ceil(index)];
    let mix = Math.ceil(index) - index;

    console.log(index, color1, color2);

    let r = Math.round(mix * color1.r + (1 - mix) * color2.r),
        g = Math.round(mix * color1.g + (1 - mix) * color2.g),
        b = Math.round(mix * color1.b + (1 - mix) * color2.b);

    return `rgb(${r}, ${g}, ${b})`;
};

$(function() {
    let setBackground = function() {
        let rgb = colorFromGradient(
            $('input.color').val(),
            GreatBayGradient
        );

        console.log(rgb);

        $('html').css('background-color', rgb);
    };
    setBackground();

    $('input.color').change(setBackground);
});