JSFiddle - React, Tailwind, and code Playground

JavaScript

function getContrast (hexcolor){
	if (hexcolor.slice(0, 1) === '#') {
		hexcolor = hexcolor.slice(1);
	}
	if (hexcolor.length === 3) {
		hexcolor = hexcolor.split('').map(function (hex) {
			return hex + hex;
		}).join('');
	}
	let r = parseInt(hexcolor.substr(0,2),16);
	let g = parseInt(hexcolor.substr(2,2),16);
	let b = parseInt(hexcolor.substr(4,2),16);
	let yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
	return (yiq >= 128) ? 'black' : 'white';
}

var colors = [];
for(i=0;i<=255;i++){colors.push(parseInt("00" + i.toString(16).padStart(2,"0") + "ff",16))}
for(i=0;i<=255;i++){colors.push(parseInt("00ff" + (255-i).toString(16).padStart(2,"0"),16))}
for(i=0;i<=255;i++){colors.push(parseInt("" + i.toString(16).padStart(2,"0") + "ff00",16))}
for(i=0;i<=255;i++){colors.push(parseInt("ff" + (255-i).toString(16).padStart(2,"0") + "00",16))}

var tempMax = 50;

for (i=0;i<50;i++){
  for (y=0;y<10;y++){
    var temp = i + parseFloat("0."+y);
    var color = colors[Math.round((colors.length / 100) * ((temp/tempMax)*100))];
    var el = document.createElement("div");
    el.style.backgroundColor = "#" + color.toString(16).padStart(6,"0");
    el.style.color = getContrast(color.toString(16).padStart(6,"0"));
    el.innerText = temp.toFixed(1) + "°C";
    el.style.float = "left";
    el.style.minWidth = "50px";
    el.clientHeight = "10px";
    el.style.margin = "2px";
    el.style.padding = "2px";
    el.style.textAlign = "center";
    document.body.appendChild(el);
  }
}