How do if I want to make a randomize colors but with a couple set I've made with onload methode while randomizing of an occcur?

Hy, I want to make different colors every single time the page has called or opened and with the couple set I've made at the table with the different personalisation of rows color. How do I make it true ??? This line of the CSS code I've try to achieves to make some goals :

-------------------------------------- CSS ------------------------------------------

.gridview tr {
    background: #F4F9FD;
}

.gridview tr:nth-child(odd) {
    background-color: #EDF5FC;
}

.gridview tr:nth-child(even) {
    background-color: #F4F9FD;
}

I do try with the Math methode to get random some colors but I'd stuck with it. because it won't personalisation of couple set of colors. See the code I've made with javascript at the below this :

---------------------------------- JAVASCRIPT ----------------------------------

function colorOnLoad() {
var text = "",
    color = new Array();
    color[0] = "#ccff99";
    color[1] = "#e6ffb3";
    color[2] = "#dfff80";
    color[3] = "#ffffcc";
    color[4] = "#ffff99";
    color[5] = "#ffe6ff";
    color[6] = "#ffcccc";
    color[7] = "#ffcc99";
    color[8] = "#ffe6b3";
    color[9] = "#fff0b3";

        text += color[Math.floor(Math.random() * color.length)];

    return text;
}

What I want is if the table have reloaded always shows the different colors of rows everytime the page has opened and it must be set with my personalisation I've set. In this case I would like such as color[0] just for nth-child(odd) and color[1] for nth-child(even) at the first load or open and color[2] for nth-child(odd) and color[3] for nth-child(even) at the second load or open and so on ... so on ... and on again always like that !!!