JSFiddle - React, Tailwind, and code Playground

by Bacco

HTML

<div id="1">0</div>
<div id="2">25</div>
<div id="3">50</div>
<div id="4">75</div>
<div id="5">100</div>

JavaScript

function colorTween(c1,c2,p) {
  var r1 = parseInt(c1.substring(1,3),16);
  var g1 = parseInt(c1.substring(3,5),16);
  var b1 = parseInt(c1.substring(5,7),16);
  var r2 = parseInt(c2.substring(1,3),16);
  var g2 = parseInt(c2.substring(3,5),16);
  var b2 = parseInt(c2.substring(5,7),16);
  var r3 = (256+(r2-r1)*p/100+r1).toString(16);
  var g3 = (256+(g2-g1)*p/100+g1).toString(16);
  var b3 = (256+(b2-b1)*p/100+b1).toString(16);
  return '#'+r3.substring(1,3)+g3.substring(1,3)+b3.substring(1,3);
}


// TESTE DA FUNCAO:
var c1 = '#0099ff';
var c2 = '#ff3300';
document.getElementById('1').style.backgroundColor = colorTween( c1, c2,  0);
document.getElementById('2').style.backgroundColor = colorTween( c1, c2, 25);
document.getElementById('3').style.backgroundColor = colorTween( c1, c2, 50);
document.getElementById('4').style.backgroundColor = colorTween( c1, c2, 75);
document.getElementById('5').style.backgroundColor = colorTween( c1, c2,100);