JSFiddle - React, Tailwind, and code Playground

HTML

<div id="result">

</div>

JavaScript

function GreenYellowRed(value) {
  value--;
  
  var r,g,b;

  if (value < 4) {
    // green to yellow
    r = Math.floor(255 * (value / 4));
    g = 255;

  } else {
    // yellow to red
    r = 255;
    g = Math.floor(255 * ((4-value%4) / 4));
  }
 b = 0;

  return r + "," + g + "," + b;
}

var output = "";
for (var i = 1; i <= 8; i++) {
  var rgb = GreenYellowRed(i);
  output += "<div style='display:inline-block;width:50px;height:50px;background-color: rgb(" + rgb + ")'>" + i + "</div>";
}

document.getElementById("result").innerHTML = output;