Linear Hex Interpolation fader

lerp.js

// props to @rosszurowski for this:
// https://gist.github.com/rosszurowski/67f04465c424a9bc0dae

function lerpColor(a, b, amount) { 
    let ah = parseInt(a.replace(/#/g, ''), 16),
        ar = ah >> 16, ag = ah >> 8 & 0xff, ab = ah & 0xff,
        bh = parseInt(b.replace(/#/g, ''), 16),
        br = bh >> 16, bg = bh >> 8 & 0xff, bb = bh & 0xff,
        rr = ar + amount * (br - ar),
        rg = ag + amount * (bg - ag),
        rb = ab + amount * (bb - ab);

    return '#' + ((1 << 24) + (rr << 16) + (rg << 8) + rb | 0).toString(16).slice(1);
}

function changeColor(start, end, increment, interval) {
  let startAmount = 0.1;
  
  console.log(`starting`);
  let iteration = 0;
  
  const boom = setInterval(() => {
    iteration++;
    console.log(`iteration: ${iteration}`);
    
    const color = lerpColor(start, end, startAmount);
    console.log(`color: ${color}`);
    
    document.querySelector('#main').style.backgroundColor = color;
    startAmount += increment;
    
    console.log(`start amount: ${startAmount}`);
    
    if (startAmount >= 1) {
      clearInterval(boom);
    }
  }, interval);
}

changeColor('#000000', '#ffffff', 0.1, 100);