JSFiddle - React, Tailwind, and code Playground

HTML

from red (0) to green (120) clockwise in 100 steps
<ul class="list" data-hue0='0' data-hue1='120' data-steps='100'></ul>

<hr>

from green (120) to red(0) counter clockwise in 30 steps
<ul class="list" data-hue0='120' data-hue1='0' data-steps='30'></ul>

<hr>

from blue (225) to yellow (360 + 60) clockwise in 50 steps
<ul class="list" data-hue0='225' data-hue1='420' data-steps='50'></ul>

<hr>

from blue (225) to yellow (60) counter clockwise in 50 steps
<ul class="list" data-hue0='225' data-hue1='60' data-steps='50'></ul>

<hr>

from blue (225) to blue (225 - 360 - 360) counter clockwise twice round in 200 steps
<ul class="list" data-hue0='225' data-hue1='-495' data-steps='200'></ul>

CSS

li {
    display: block;
    float: left;
    width: 30px;
    height: 30px;
    margin: 1px;
}
hr {
    clear: both;
}

JavaScript

function percentageToHsl(percentage, hue0, hue1) {
    var hue = (percentage * (hue1 - hue0)) + hue0;
    return 'hsl(' + hue + ', 100%, 50%)';
}


$('.list').each(function() {
   var $list = $(this);
   var hue0 = parseInt($list.data('hue0'));
   var hue1 = parseInt($list.data('hue1'));
   var steps = parseInt($list.data('steps'));
   
   for (var i = 1; i <= steps; i++) {
      $list.append($('<li style="background-color:'+ percentageToHsl(i/steps, hue0, hue1) + '">' + i + '</li>'));
   }
  
})