JSFiddle - React, Tailwind, and code Playground

by Lamik

HTML

<div id="label">push one button to start</div>

<button id="btn" onclick="run(0.5,0.5)">Run s=0.5 l=0.5</button>
<button id="btn" onclick="run(1, 0.5)">Run s=1 l=0.5</button>

<div class="test">
  sin:<div id="colA" class="col"></div>
  wiki:<div id="colB" class="col"></div>
</div>

CSS

.col {
  margin: 10px;
  width: 50px;
  height: 50px;

}

.color {
  width: 50px;
  height: 1px;
}

.test {
  display: flex;
}

#btn {
  display: block;
}

JavaScript

function hsl2rgb_Sin(h,s,l) {  
  h=Math.PI*2.0*h/360; // change 0-360 degree to 0-2pi rad which is used by JS Math.sin  
  let r1 = Math.sin(h)*l;
  let g1 = Math.sin(h + 2*Math.PI/3)*l; // 2pi/3 rad = 120  deg
  let b1 = Math.sin(h + 4*Math.PI/3)*l; // 4pi/3 rad = 240  deg

  let a = (r1+g1+b1)/3;

  let r2 = (r1 - a)*s + a;
  let g2 = (g1 - a)*s + a;
  let b2 = (b1 - a)*s + a;

  return [r2,g2,b2]
}

function hsl2rgb_Wiki(h,s,l) {            
  let c = (1-Math.abs(2*l-1))*s;
  let k = h/60;
  let x = c*(1 - Math.abs(k%2-1));
 
  let r1 = g1 = b1 = 0;
    
  if(k>=0 && k<=1) { r1=c; g1=x }
  if(k>1 && k<=2)  { r1=x; g1=c }
  if(k>2 && k<=3)  { g1=c; b1=x }
  if(k>3 && k<=4)  { g1=x; b1=c }
  if(k>4 && k<=5)  { r1=x; b1=c }
  if(k>5 && k<=6)  { r1=c; b1=x }
  
  let m = l - c/2; 
  return [r1+m,g1+m,b1+m]  
}

// TEST code

function rgbToStyle(c) {
	return `rgb(${c[0]*255},${c[1]*255},${c[2]*255})`
}

$ = x=>document.querySelector(x);

function setColors(h,s,l) {
    col = [h,s,l];

    $('#colA').innerHTML += `<div class="color" style="background: ${rgbToStyle(hsl2rgb_Sin(...col))}"</div>`;
    $('#colB').innerHTML += `<div class="color" style="background: ${rgbToStyle(hsl2rgb_Wiki(...col))}"</div>`;    
}

window.run = function (s,l) {  
  let h=0;
  $('#colA').innerHTML = "";
  $('#colB').innerHTML = "";
  let interval = setInterval(()=> {
     $('#label').innerHTML="running... hue="+h;
     
     if(h>360) { h=1; clearInterval(interval) };
     setColors(h,s,l);
     h++;		
  })
}