ciao ragazzi stamattina mi sono messo in testa di realizzare un layer che tramite la proprietà backgroundcolor si passi automatico in una sequenza tipo fade tutti i colori della gamma cromatica rgb un po come un effetto arcobaleno

ho iniziato buttando giù questo ma poi mi sono reso conto che è sbagliato

codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Arcobaleno</title>
</head>

<body>
<div id="arcobaleno" style="position:absolute; top:100px; left:100px; width:100px; height:100px; background-color:red;"></div>

<script language="javascript">
<!--
function colorize(r,g,b){
	r <= 255 ? r=r:r=0;
	g <= 255 ? g=g:g=0;
	b <= 255 ? b=b:b=0;
	document.getElementById('arcobaleno').style.backgroundColor = "rgb("+r+","+g+","+b+")";
	r++; g++; b++;
	setTimeout("colorize("+r+","+g+","+b+")",100);
}

onload = function(){
colorize(Math.round(Math.random()*256),Math.round(Math.random()*256),Math.round(Math.random()*256));
}
//-->
</script>

</body>
</html>
solo che non riesco a capire quale potrebbe essere il metodo giusto... mi potreste aiutare a capirlo... pero vorrei provare ad arrivarci da solo

tks