Ciao,
come indicato da vic53 userei un vettore di colori e successivamente assegnerei il nuovo background.
Forse non ho ben compreso le problematiche ma ti posto un esempio di riferimento.

Saluti


codice:
<!DOCTYPE>
<html>
  <head>
<script>

function f_cambiacolore(){
  var n=parseInt(Math.random() * 7), j,c;
  
  // vettore colori
  c=[               
    [255,255,0],
    [255,0,255],
    [223,223,223],
    [215,0,60],
    [0,80,80],
    [0,200,0],
    [1,40,50]
  ];

  j=document.getElementById("idsfondo");
  j.style.backgroundColor="rgba("+c[n][0]+","+c[n][1]+","+c[n][2]+",0.1)";  // cambio colore al background
  
  j.innerHTML=(n+1);
}


</script>  
  </head>
  <body>

  <button onclick='f_cambiacolore()'>Cambia colore</button> 
    
  <div id='idsfondo' style='background-color:#CCC;position:absolute;left:20px;top:80px;width:400px;height:300px;font:24px Arial;padding:20px;'></div>

  </body>
</html>