JSFiddle - React, Tailwind, and code Playground

CSS

div{
  width:32px;
  height:32px;
  float:left;
}

JavaScript

//gradient

var A=[20,'20%','100%'];
var B=[100,'100%','50%'];
var minS=parseFloat(A[1]);
var maxS=parseFloat(B[1]);
var rangeS=maxS-minS;

var minH=parseFloat(A[0]);
var maxH=parseFloat(B[0]);
var rangeH=maxH-minH;

var minL=parseFloat(A[2]);
var maxL=parseFloat(B[2]);
var rangeL=maxL-minL;

var bx=new Array(16).join('<div></div>');
document.body.appendChild(document.createElement('div')).innerHTML=bx;
console.log(minS,maxS);
console.log(document.body);
for(var a=0,b=16,rH=1/(b-1)*rangeH,rS=1/(b-1)*rangeS,rL=1/(b-1)*rangeL;a<b;a++){
 console.log(
  (minH+(a*rH))|0,
  ((minS+(a*rS))|0)+"%",
  ((minL+(a*rL))|0)+"%"
 );
 var bgc='hsla('+((minH+(a*rH))|0)+','+((minS+(a*rS))|0)+'%,'+((minL+(a*rL))|0)+'%,1)';
 console.log(bgc)
 document.body.childNodes[1].childNodes[a].style.background=bgc;
 
}