#vcent
#rgb.animated
  p RGB
#hsl.animated
  p HSL

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: red
  border-radius: 24px 0
  
  p
    position: absolute
    left: 0
    bottom: -36px
    font: 12px/36px sans-serif
    text-transform: uppercase
    color: #bbc0c0

;(function(id1, id2) {
  var
  step = 0,
  direction = 1,
  cycleTime = 4000, //cycles / second
  resolution = 180, //changes / cycle
  delta1 = 255 / resolution, // r 255 -> 0, g 0 -> 255
  delta2 = 120 / resolution, // hue 0 -> 120
  element1 = document.getElementById(id1), //rgb
  element2 = document.getElementById(id2), //hsl
  startTick = function ( fn ) {
    var tick = function () {
      setTimeout( function () {
        fn();
        requestAnimationFrame( tick );
      }, cycleTime / resolution );
    };
    requestAnimationFrame( tick );
  };

  startTick(function() {
    var d1, d2;
    
    //if step is at a bound, flip direction
    if (!(step += direction) || step === resolution) {
      direction = 0 - direction;
    }
    
    d1 = ~~(step * delta1); //hue
    d2 = ~~(step * delta2); //red, green
    
    element1.style.backgroundColor = 'rgb(' + (255 - d1) + ', ' + d1 + ', 0)';
    element2.style.backgroundColor = 'hsl(' + d2 + ', 100%, 50%)';
  });
})('rgb', 'hsl')