JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box"></div>
<input type="range" min="1" max="100" value="50" id="fadeFraction">

JavaScript

function colorGradient(fadeFraction, rgbColor1, rgbColor2, rgbColor3) {
  var color1 = rgbColor1;
  var color2 = rgbColor2;
  var fade = fadeFraction;

  // Do we have 3 colors for the gradient? Need to adjust the params.
  if (rgbColor3) {
    fade = fade * 2;

    // Find which interval to use and adjust the fade percentage
    if (fade >= 1) {
      fade -= 1;
      color1 = rgbColor2;
      color2 = rgbColor3;
    }
  }

  var diffRed = color2.red - color1.red;
  var diffGreen = color2.green - color1.green;
  var diffBlue = color2.blue - color1.blue;

  var gradient = {
    red: parseInt(Math.floor(color1.red + (diffRed * fade)), 10),
    green: parseInt(Math.floor(color1.green + (diffGreen * fade)), 10),
    blue: parseInt(Math.floor(color1.blue + (diffBlue * fade)), 10),
  };

  return 'rgb(' + gradient.red + ',' + gradient.green + ',' + gradient.blue + ')';
}

document.getElementById('fadeFraction').addEventListener('input', function(e) {
  update(parseInt(e.target.value, 10) / 100);
});

function update(fadeFraction) {
  let lowColor = {
    red: 217,
    green: 83,
    blue: 79
  };
  let mediumColor = {
    red: 240,
    green: 173,
    blue: 78
  };
  let highColor = {
    red: 92,
    green: 184,
    blue: 91
  };

  document.getElementById('box').style.backgroundColor = colorGradient(fadeFraction, lowColor, mediumColor, highColor);
  document.getElementById('box').innerHTML = fadeFraction;
}

update(0.5); // first time init