Problemas ao randomizar cores

Vendo uma ideia nesse fórum, resolvi tentar fazer uma função que gerasse uma cor em hex para cada quadrado.

<canvas width="600" height="400"></canvas>

<script>

    function quadrado(x, y, width, height, color) {

        pincel.fillStyle = color;
        pincel.fillRect(x, y, width, height);
        pincel.fillStroke = 'black';
        pincel.strokeRect(x, y, width, height);
    }

    function corAleatoria() {

        var cor = '#';
        var hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F'];

        for (var i = 0; i < 6; i++) {

            cor = cor + hex[Math.round(Math.random() * hex.length)];
            console.log(cor);
        }
        return cor;
    }

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    for(var x = 0; x < 600; x = x + 50) {

        quadrado(x, 0, 50, 50, corAleatoria());
    }

</script>

Antes eu havia feito um erro, e no lugar do hex.length havia colocado 6 (pensando no tamanho de um código hexadecimal), e as cores haviam ficado todas num tom escuro. Acabei inserindo um console.log() pra verificar se as cores estavam sendo geradas de forma certa, e percebi que não estava percorrendo meu array por completo, daí mudei de 6 para 16, e depois pro código atual. Atualizei a página, tudo parece normal, mas no console log percebo que muitas cores estão sendo geradas com um ou vários 'undefined' compondo o hexcode. Qual seria o problema do código acima?