JSFiddle - React, Tailwind, and code Playground

HTML

<div id="colors"></div>

CSS

td{height:1px; width:1px;} 
table{margin:0px auto 0px auto;} 
h3{text-align:center; margin:0px;}

JavaScript

var colors = '<h3>Saturation Locked at 100%, Hue from 0 => 360 and Lightness from 0% => 100%</h3>';
  
  colors += '<table cellspacing="0" cellpadding="0"><tbody>';
  
  var ss = 100;
  
  for(l = 0; l <= 360; l++){ var ls = l/3.6;
    
    colors += '<tr>';
    
    for(h = 0; h <= 360; h++){
      
      colors += '<td style="background-color: hsl('+h+','+ss+'%,'+ls+'%);"></td>';
      
    }
    
    colors += '</tr>';
    
  }
  
  colors += '</tbody></table>';
  
  colors += '<h3>Lightness Locked at 50%, Hue from 0 => 360 and Saturation from 0% => 100%</h3>';
  
  colors += '<table cellspacing="0" cellpadding="0"><tbody>';
  
  var ls = 50;
  
  for(s = 0; s <= 360; s++){ var ss = s/3.6;
  
    colors += '<tr>';
    
    for(h = 0; h <= 360; h++){
      
      colors += '<td style="background-color: hsl('+h+','+ss+'%,'+ls+'%);"></td>';
      
    }
    
    colors += '</tr>';
  
  }

  colors += '</tbody></table>';
  
  document.getElementById('colors').innerHTML = colors;