Te faltaba la función
decahex() en el código.
Yo he hecho un div contenedor para ir insertando DIV's flotando a la izquierda en su interior. Si quieres más pasos o anchura no tienes más que modificar el argumento o la propiedad en cuestión:
Código PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> Página nueva </title>
<meta name="Author" content="derkeNuke">
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
var hexa = "0123456789abcdef";
function hexadec(x) {
x = x.toLowerCase();
return parseInt(hexa.indexOf(x.charAt(0))) * 16 + parseInt(hexa.indexOf(x.charAt(1)))
}
function decahex(n) {
return hexa.charAt(n / 16) + hexa.charAt(n % 16);
}
function colorHexa(c) {
return "#" + decahex(c[0]) + decahex(c[1]) + decahex(c[2]);
}
function transitar(ini, fin, pasos) {
var dato = desglose(ini);
var rIni = dato[0];
var gIni = dato[1];
var bIni = dato[2];
var intermedios = new Array(pasos);
intermedios[0] = dato;
var dato = desglose(fin);
intermedios[pasos - 1] = dato;
var rFin = dato[0];
var gFin = dato[1];
var bFin = dato[2];
var rMed = (rFin - rIni) / (pasos - 1);
var gMed = (gFin - gIni) / (pasos - 1);
var bMed = (bFin - bIni) / (pasos - 1);
for (var i = 1; i < pasos - 1; i ++) {
var rgb = new Array(3);
rgb[0] = parseInt(rIni + (rMed * i));
rgb[1] = parseInt(gIni + (gMed * i));
rgb[2] = parseInt(bIni + (bMed * i));
intermedios[i] = rgb;
}
for (i = 0; i < intermedios.length; i ++)
intermedios[i] = colorHexa(intermedios[i]);
return intermedios;
}
function desglose(color) {
if (color.length != 6)
return "poblema";
else {
devolver = new Array(3);
devolver[0] = hexadec(color.substr(0, 2));
devolver[1] = hexadec(color.substr(2, 2));
devolver[2] = hexadec(color.substr(4, 2));
}
return devolver;
}
window.onload = function() {
var colores = transitar("00ffff", "ff0000", 30);
for(var i=0, capas=""; i<colores.length; i++) {
capas+='<div style="width:20px; background-color:'+colores[i]+'; float:left; "> </div>';
}
document.getElementById("degrad").innerHTML = capas;
}
</script>
<div id="degrad"></div>
</body>
</html>
Un saludo.