Javascript-форум - Плавный градиент от цвета к цвету

Привет! Нужна помощь по доработке кода js. Сам не справлюсь...:help:
Снизу написан код. Он позволяет вывести средний цвет между двумя имеющимися color1 и color2.В конце скрипта вводится значение color1 и color2, а также percent, которое определяет, на сколько будет близок средний цвет к color1 или color2. Сейчас percent - это число от 1 до 100.

Задача: Сделать автоматическую и последовательную подстановку значений в percent, от 1 до 100 и обратно, чтобы получился плавный градиент от color1 к color2.

<div id="content" style="width:200px; height:100px; border-radius:10px;">
Thank you friend!
</div>

<script>
function makeGradientColor(color1, color2, percent) {
  var newColor = {};

  function makeChannel(a, b) {
      return(a + Math.round((b-a)*(percent/100)));
  }

  function makeColorPiece(num) {
      num = Math.min(num, 255);   // not more than 255
      num = Math.max(num, 0);     // not less than 0
      var str = num.toString(16);
      if (str.length < 2) {
          str = "0" + str;
      }
      return(str);
  }

  newColor.r = makeChannel(color1.r, color2.r);
  newColor.g = makeChannel(color1.g, color2.g);
  newColor.b = makeChannel(color1.b, color2.b);
  newColor.cssColor = "#" + makeColorPiece(newColor.r) + makeColorPiece(newColor.g) + makeColorPiece(newColor.b);
  return(newColor);
}

var yellow = {r:255, g:255, b:0};
var blue = {r:0, g:0, b:255};
var newColor = makeGradientColor(yellow, blue, 12);
document.getElementById('content').style.backgroundColor = newColor.cssColor;
</script>