title: How can I make a JS function that can guadually change to a certain color from a similar origin color?
body: <p>eg. I've got a pink color, I want it to change it into red in 3 seconds, the time is the parameter I can alter, the origin and target color are as well.</p>
  
  <p>From this: <a href="https://stackoverflow.com/questions/9369365/how-to-make-background-gradually-change-colors">How to make background gradually change colors?</a></p>
  
  <pre><code>function animateBg(i) {
      document.body.style.backgroundColor = 'hsl(' + i + ', 100%, 50%)';
  
      setTimeout(function() {
          animateBg(++i)
      }, i);
  }
  animateBg(0);​
  </code></pre>
  
  <p>I can alter the color, but how can I make similar color and how can I control the time? </p>