Transição suave da cor Javascript

Eu vi alguém que fez uma transição de cor de a para b, mas eles estavam usando RGB e calculando matematicamente. Já pensei sobre isso antes e fiz uma função que desenhou um gradiente linear em uma tela escondida e captura a cor de cada pixel. Não tenho certeza se isso é mais rápido do que qualquer outro método, mas sei que é preciso e você não precisa fazer nenhuma matemática extra.

Aqui está o código: (estou cansado de digitar isso e depois fechar e perder a janela sem postá-la)

(function () {
        var pixel = function pixel(arr) {
        var _pixel = Object.create(null);
        _pixel.r = arr[0];
        _pixel.g = arr[1];
        _pixel.b = arr[2];
        _pixel.a = arr[3];
        _pixel.toString = function () {
            return "RGBA(" + _pixel.r + "," + _pixel.g + "," + _pixel.b + "," + _pixel.a + ")";
        };
        return _pixel;
    };

    var colors = function colors(color1, color2, steps) {
        var canvas = document.createElement('canvas'),
            c = canvas.getContext('2d');
        canvas.width = parseInt(steps, 10);
        canvas.height = 1;
        var grd = c.createLinearGradient(0, 0, canvas.width, 0);
        grd.addColorStop(0, color1);
        grd.addColorStop(1, color2);
        c.fillStyle = grd;
        c.fillRect(0, 0, canvas.width, 1);
        var imgd = c.getImageData(0, 0, canvas.width, 1);
        var pix = [].slice.call(imgd.data);
        var pixels = [];
        while (pix.length) {
            pixels.push(Object.create(pixel(pix.splice(0, 4))));
        }
        console.log(pixels);
        return pixels;
    };



    //this is just extra to display it and an example of the 
    colors("gold", "maroon", 40).forEach(function (e, i, a) {
        var s = document.createElement('span');
        s.style.border = "black 1px solid";
        s.style.display = "inline-block";;
        s.style.width = "1em";
        s.style.height = "1em";
        s.style.background = e;
        document.body.appendChild(s);
    });
})();