JSFiddle - React, Tailwind, and code Playground

by fxi

HTML

<div id=colors></div>
<input id=input type=range step=0.1 min=1 max=359>

CSS

body,html{
  height:100%;
  width:100%;
  padding:10px;
}


#colors {
  width:100px;
  height:100px;
  outline:1px solid #000;
}
#input {
  width:calc(100% - 120px);

}

JavaScript

input.addEventListener('input', update)


function update(e) {
  const t = parseInt(e.target.value)
  with(Math) {
    a = x => (x + t / 30) % 12
    n = t => floor(255 * (.5 - .5 * max(-1, min(a(t) - 3, min(9 - a(t), 1))))).toString(16).padStart(2, 0);
    colors.style.backgroundColor = "#" + n(0) + n(8) + n(4)
  }
}


//works
const colOrig = (h) => {


  s = 1;
  l = 0.5;
  const k = n => (n + h / 30) % 12;
  const a = s * Math.min(l, 1 - l);
  const f = n => Math.floor(255 *
    (l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1))))).toString(16).padStart(2, 0);


  const out = '#' + f(0) + f(8) + f(4);

  console.log(out);
  return out;
};