# Edit in JSFiddle

```/*  ================================================

AUTHOR: JÉRÉMIE JACQUES (http://jeremiejacques.be — @jeremiejacques)
VERSION: 1.0

================================================ */

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++) {
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() {
console.log(bodyBG)
body.style.backgroundColor = bodyBG;
}, 300);
```
```<ul>
</ul>
```
```html,
body {
margin: 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;
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;
}
```