JSFiddle - React, Tailwind, and code Playground

by Umair Rafiq

HTML

<div id="left" class="full">
LEFT
</div>
<div id="get" class="full">
INTERPOLATE
</div>
<div id="right" class="full">
RIGHT
</div>

CSS

.full{
  float:left;
  width:30%;
  height:20px;
}

JavaScript

// Returns a single rgb color interpolation between given rgb color
// based on the factor given; via https://codepen.io/njmcode/pen/axoyD?editors=0010
function interpolateColor(color1, color2, factor) {
    if (arguments.length < 3) { 
        factor = 0.5; 
    }
    var result = color1.slice();
    for (var i = 0; i < 3; i++) {
        result[i] = Math.round(result[i] + factor * (color2[i] - color1[i]));
    }
    return result;
};
// My function to interpolate between two colors completely, returning an array
function interpolateColors(color1, color2, steps) {
    var stepFactor = 1 / (steps - 1),
        interpolatedColorArray = [];

    color1 = color1.match(/\d+/g).map(Number);
    color2 = color2.match(/\d+/g).map(Number);

    for(var i = 0; i < steps; i++) {
        interpolatedColorArray.push(interpolateColor(color1, color2, stepFactor * i));
    }

    return interpolatedColorArray;
}

function getColor(color1, color2, steps, at) {
    var stepFactor = 1 / (steps - 1),
        interpolatedColorArray = [];

    color1 = color1.match(/\d+/g).map(Number);
    color2 = color2.match(/\d+/g).map(Number);

    for(var i = 0; i < steps; i++) {
        interpolatedColorArray.push(interpolateColor(color1, color2, stepFactor * i));
    }

    return "rgb("+interpolatedColorArray[at]+")";
}
var lcolor = "rgb(0, 233, 12)";
var rcolor = "rgb(0, 79, 222)";

document.getElementById('left').style.background = lcolor;
document.getElementById('right').style.background = rcolor; //"rgb(247, 148, 89)";

//document.body.innerText += getColor("rgb(94, 79, 162)", "rgb(247, 148, 89)", 10,2);
document.getElementById('get').style.background=getColor(lcolor,rcolor, 3,1);