JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">

</div>

CSS

.colorBlock {
  width: 50px;
  height: 50px;
  display: inline-block;
}

JavaScript

function HSLColor(hue, sat, light) {
	this.hue = hue;
  this.saturation = sat;
  this.lightness = light;
  this.getCSS = function(){
     return "hsl("+this.hue+","+this.saturation+"%,"+this.lightness+"%)";
  }
}

function linearInterpolateColor(startColor, endColor, percentage)
{
	
	var hueDiff = (endColor.hue - startColor.hue) * percentage;
  var satDiff = (endColor.saturation - startColor.saturation) * percentage;
  var lightDiff = (endColor.lightness - startColor.lightness) * percentage;
  return new HSLColor(startColor.hue + hueDiff,
  										startColor.saturation + satDiff,
                      startColor.lightness + lightDiff);
}

function getInterpolationArray(startColor, endColor, steps)
{
	var interpolArray = [];
	for(var i = 0; i < steps; i++)
  {
  	interpolArray.push(linearInterpolateColor(startColor, endColor, i/(steps-1)));
  }
  return interpolArray;
}

/**
 Container should be a jquery object
*/
function generateSteps(startColor, endColor, steps, container)
{
	var interpolArray = getInterpolationArray(startColor, endColor, steps)
	
  interpolArray.forEach(function(color){
  	var colorBlock = $("<div>").addClass("colorBlock").css('background-color',color.getCSS());
    container.append(colorBlock);
  });
  
}

var start = new HSLColor(0, 100, 50);
var end = new HSLColor(40, 25, 100);
generateSteps(start, end, 10, $("#container"));