#vcent
#hsl.animated
  p HSL
#husl.animated
  p HUSL

html, body
  height: 100%
  
body
  text-align: center
  background: #333

div
  display: inline-block
  vertical-align: middle
    
#vcent
  height: 100%
  
.animated
  position: relative
  height: 144px
  width: 144px
  margin: -18px 48px 0
  background-color: green
  border-radius: 24px 0
  
  p
    position: absolute
    left: 0
    bottom: -36px
    font: 12px/36px sans-serif
    text-transform: uppercase
    color: #bbc0c0

import husl from "https://esm.sh/husl";

(function(id1, id2) {
  var
  linStep = 0,
  direction = 1,
  cycleTime = 4000, //ms / cycle
  resolution = 180, //changes / cycle
  delta = 360 / resolution, // hue 0 -> 360
  element1 = document.getElementById(id1), //hsl
  element2 = document.getElementById(id2), //husl
  startTick = function ( fn ) {
    var tick = function () {
      setTimeout( function () {
        fn();
        requestAnimationFrame( tick );
      }, cycleTime / resolution );
    };
    requestAnimationFrame( tick );
  };

  startTick(function() {
    var
    floor = Math.floor,
    d1;
    
    d1 = floor(linStep * delta);

    if ((linStep += 1) % resolution === 0) {
      linStep = 0;
    }
    
    element1.style.backgroundColor = 'hsl(' + d1 + ', 100%, 70%)';
    element2.style.backgroundColor = husl.toHex(d1, 100, 70);
  });
})('hsl', 'husl');