Edit in JSFiddle

/*  ================================================
	
    AUTHOR: JÉRÉMIE JACQUES (http://jeremiejacques.be — @jeremiejacques)
    TITLE: GRADIENT GENERATOR
    VERSION: 1.0
    LAST MODIFIED: Tue 18th January 2016
	
	================================================ */

function HEXGradient(color, amount) {
  if (color.toString().indexOf('#') > -1) color = color.replace('#', '');


  // CONVERT HEX COLOR INTO RGB
  var r, g, b;
  r = '0x' + color >> 16;
  g = '0x' + color >> 8 & 0xFF;
  b = '0x' + color & 0xFF;


  // CONVERT RGB INTO HSV VALUE
  function rgbToHsv(r, g, b) {
    // algorythm :: http://stackoverflow.com/questions/2353211/hsl-to-rgb-color-conversion
    r /= 255, g /= 255, b /= 255;
    var min = Math.min(r, g, b),
      max = Math.max(r, g, b),
      delta = max - min,
      h = 0,
      s = 0,
      v = max;

    if (min != max) {
      s = (delta / max);
      switch (max) {
        case r:
          h = (g - b) / delta + (g < b ? 6 : 0);
          break;
        case g:
          h = (b - r) / delta + 2;
          break;
        case b:
          h = (r - g) / delta + 4;
          break;
      }
      h /= 6;
    }
    return [h * 360, s, v];
  }


  // UPDATE HUE VALUE WITH THE AMOUT
  var newColor = rgbToHsv(r, g, b);
  newColor[0] += amount;
  if (newColor[0] >= 360) newColor[0] = 0;


  // CONVERT BACK TO RGB
  function hsvToRgb(h, s, v) {
    // algorythm :: http://stackoverflow.com/questions/2353211/hsl-to-rgb-color-conversion
    var step = (h / 360) / (1 / 6),
      pos = step - Math.floor(step), // the hue position within the current step
      m = (Math.floor(step) % 2) ? (1 - pos) * v : pos * v, // mix color value adjusted to the brightness(v)
      max = 1 * v,
      min = (1 - s) * v,
      med = m + ((1 - s) * (v - m)),
      r, g, b;

    switch (Math.floor(step)) {
      case 0:
        r = max;
        g = med;
        b = min;
        break;
      case 1:
        r = med;
        g = max;
        b = min;
        break;
      case 2:
        r = min;
        g = max;
        b = med;
        break;
      case 3:
        r = min;
        g = med;
        b = max;
        break;
      case 4:
        r = med;
        g = min;
        b = max;
        break;
      case 5:
        r = max;
        g = min;
        b = med;
        break;
    }
    return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
  }
  var rgb = hsvToRgb(newColor[0], newColor[1], newColor[2]);


  // CONVERT RVG VALUE AND RETURN INTO HEX CODE
  var rHex = (rgb[0]).toString(16),
    gHex = (rgb[1]).toString(16),
    bHex = (rgb[2]).toString(16);
  return '#' + (rHex.length == 1 ? "0" + rHex : rHex) +
    (gHex.length == 1 ? "0" + gHex : gHex) +
    (bHex.length == 1 ? "0" + bHex : bHex);
}



// DEMO TO SEE IN LIVE COLOR UPDATE :
var demo = document.querySelector('ul');
var bg = '#ff0000';
var li = document.createElement('li');
li.style.backgroundColor = bg;
li.innerHTML = bg;
demo.appendChild(li);
for (var i = 0; i < 18; i++) {
  bg = HEXGradient(bg, 20);
  var li = document.createElement('li');
  li.style.backgroundColor = bg;
  li.innerHTML = bg;
  demo.appendChild(li);
};



var body = document.querySelector('body');
var bodyBG = '#ff0000';
setInterval(function() {
  bodyBG = HEXGradient(bodyBG, 20);
  console.log(bodyBG)
  body.style.backgroundColor = bodyBG;
}, 300);

<ul>
  <li class="title">Gradient color : </li>
</ul>

html,
body {
  margin: 0;
  padding: 0;
  position: relative;
  height: 100%;
  width: 100%;
  text-align: center;
  -webkit-transition: background-color .3s linear;
  -moz-transition: background-color .3s linear;
  -ms-transition: background-color .3s linear;
  -o-transition: background-color .3s linear;
  transition: background-color .3s linear;
}

.container {
  max-width: 600px;
  margin: 0 auto;
}

ul {
  font-family: 'helvetica', sans-serif;
  font-weight: 200;
  font-size: 15px;
  display: inline-block;
  width: 180px;
  background: white;
  padding: 20px;
  margin: 40px;
}

ul li {
  height: 40px;
  width: 80px;
  margin: 0 auto;
  list-style: none;
  text-align: center;
  line-height: 40px;
}

ul .title {
  width: 180px;
  font-size: 18px;
}