cambiar color de texto con JS

SALUDOS

tengo lo siguiente:

Código HTML :

<style type="text/css">
#logo {position: absolute;top:30%;left:30%;color:#000000;font-size:50px;font-weight: bold;} 
#logo ul li{position: absolute;color:#000000;font-size:25px;} 
</style>

<script language="javascript">
 function Barva(koda){
    document.bgColor = koda
    if(koda=="#333333" ){document.getElementById('logo').style.color ="#FFFFFF";};
    if(koda=="#AC58FA" ){document.getElementById('logo').style.color ="#ff8000";};
    if(koda=="#5858FA" ){document.getElementById('logo').style.color ="#FF0000";};
   } 
 </script>
<table width="235" border="0" cellspacing="1" cellpadding="0" align="center">
<tr height="9">
<td bgColor="#5858FA" onClick="Barva(this.bgColor)">&nbsp;</td>
<td bgColor="#AC58FA" onClick="Barva(this.bgColor)">&nbsp;</td>
<td bgColor="#333333" onClick="Barva(this.bgColor)">&nbsp;</td>
</tr>
</table>

<div id="logo">
   HOLA MUNDO
   <ul>
      <li>HOLA USUARIO</li>
   </ul>
</div>         

como hago para que me cambie tambien de color lo que esta dentro de <ul><li></li></ul>

Gracias

He modificado un poco tu código por amor a la claridad, además mi versión puede simplificarse pero lo importante es que lo entiendas:

Código HTML :

<style type="text/css"> 
#logo {position: absolute;top:30%;left:30%;color:#000000;font-size:50px;font-weight: bold;}  
#logo ul li{position: absolute;color:#000000;font-size:25px;}  
</style> 
 
<script language="javascript"> 
 function Barva(koda){ 
   document.bgColor = koda;
   var coincidencia = true;
   var color = "#000000";
   switch (koda) {
      case "#333333": color = "#FFFFFF"; break;
      case "#AC58FA": color = "#ff8000"; break;
      case "#5858FA": color = "#FF0000"; break;
      default: coincidencia = false;
   }
   if (coincidencia) {
      var x;
      var logo = document.getElementById("logo");
      logo.style.color = color;
      var lislogos = logo.getElementsByTagName("li");
      for (x in lislogos) {
         lislogos.item(x).style.color = color;
      }
   }
   }  
 </script> 
<table width="235" border="0" cellspacing="1" cellpadding="0" align="center"> 
<tr height="9"> 
<td bgColor="#5858FA" onClick="Barva(this.bgColor)">&nbsp;</td> 
<td bgColor="#AC58FA" onClick="Barva(this.bgColor)">&nbsp;</td> 
<td bgColor="#333333" onClick="Barva(this.bgColor)">&nbsp;</td> 
</tr> 
</table> 
 
<div id="logo"> 
   <span>HOLA MUNDO</span>
   <ul> 
      <li>HOLA USUARIO</li> 
   </ul> 
</div>

Hice que recorra todos los <li> por si tu intensión es poner más de uno pero la verdad es que como le pones position:absolute; todos quedarán solapados unos encima de otros... no entiendo por qué lo quieres hacer así.

MUCHAS Gracias a sido de mucha Ayuda y tienes mucha razon en lo que dices

ahora tengo lo siguiente como puedo guardar esto en los cookie's es decir que cada vez que el usuario actualice quede guardado el color el escogió

estoy tratando con algo como esto pero no me funciona....

Código :

<style type="text/css"> 
#logo {position: absolute;top:30%;left:30%;color:#000000;font-size:50px;font-weight: bold;}  
</style> 
 
<script language="javascript"> 
 function Barva(koda){ 
    document.bgColor = koda 
    if(koda=="#333333" ){document.getElementById('logo').style.color ="#FFFFFF";}; 
    if(koda=="#AC58FA" ){document.getElementById('logo').style.color ="#ff8000";}; 
    if(koda=="#5858FA" ){document.getElementById('logo').style.color ="#FF0000";}; 
   }  

/*Cookies*/
if (getCookie("logo")!=""){
var mydivcookie=getCookie("logo").split("||")
document.getElementById("logo").style.background=koda
}

function getCookie(Name){
var re=new RegExp(Name+"=[^;]+", "i"); 
if (document.cookie.match(re)) 
return document.cookie.match(re)[0].split("=")[1]
return ""
}

function setCookie(name, value, days){
var expireDate = new Date()
var expstring=expireDate.setDate(expireDate.getDate()+parseInt(days))
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/"
}
 </script> 
<table width="235" border="0" cellspacing="1" cellpadding="0" align="center"> 
<tr height="9"> 
<td bgColor="#5858FA" onClick="Barva(this.bgColor)">&nbsp;</td> 
<td bgColor="#AC58FA" onClick="Barva(this.bgColor)">&nbsp;</td> 
<td bgColor="#333333" onClick="Barva(this.bgColor)">&nbsp;</td> 
</tr> 
</table> 
 
<div id="logo"> 
   HOLA MUNDO 
</div>

porque no me funaciona?....

GRACIAS POR LA COLABORACIÓN UN BESO