JSFiddle - React, Tailwind, and code Playground

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(p) {
  var r1 = 0x00;
  var g1 = 0x99;
  var b1 = 0xff;
  var r2 = 0xff;
  var g2 = 0x33;
  var b2 = 0x00;
  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);
  console.log(r3.toString());
  console.log(r3.substring(1,3));
  return '#'+r3.substring(1,3)+g3.substring(1,3)+b3.substring(1,3);
}

//TESTE DA FUNCAO:
document.getElementById('1').style.backgroundColor = colorTween(  0);
document.getElementById('2').style.backgroundColor = colorTween( 25);
document.getElementById('3').style.backgroundColor = colorTween( 80);
document.getElementById('4').style.backgroundColor = colorTween( 75);
document.getElementById('5').style.backgroundColor = colorTween(100);