degradador de colores

[derkenuke]

Intento hacer un degradador de colores como vi en http://www.meyerweb.com/eric/tools/color-blend/. Bueno no asi, pero necesito la esencia. Es decir, a una funcion de javascript pasarle color1, color2, el pasoActual y el pasosTotales, de manera que devuelva un valor #rrggbb.

Me explico un poco mejor. La tarea de la function javascript es degradar de un color a otro, pero no hacer la media entre los dos, sino hacer el % de mezcla que yo le indique (pasoActual/pasosTotales), de esta manera poder pasar por ejemplo del rojo al azul en 10 pasos o en 100, llamando a la funcion respectivas veces. Todo lo que he intentado han salido chapuzas, y me estoy volviendo loco . Asi que pido un poco de ayuda, no digo que me lo construyan (aunque si alguien se atreve... ). Las funciones en que me fundamento las saque de estos foros, consisten en poder pasar de un valor #rrggbb en hexadecimales a un r,g,b en valores numericos de 0 a 255 para poder trabajar bien con ellos. Las funciones son:

Código PHP:

  var _h0= "0123456789abcdef";
var _h = _h0.split("");
function rrggbb(r,g,b) {
    r=_h[parseInt(r / 16)] + _h[r % 16];
    g=_h[parseInt(g / 16)] + _h[g % 16];;
    b=_h[parseInt(b / 16)] + _h[b % 16];;
    return "#"+r+g+b;
}
function rgb(rrggbb) {
    valor=0; colores=[rrggbb.substring(1,3),rrggbb.substring(3,5),rrggbb.substring(5,7)];
    for(a=0;a<colores.length;a++) {
        colores[a]=colores[a].split("");
        colores[a]=(_h0.indexOf(colores[a][0])*16) + (_h0.indexOf(colores[a][1]));
    }
    return [ colores[0] , colores[1] , colores[2] ];
} 
   

Lo mas cerca que he estado ha sido aqui:

Código PHP:

  function mezclarColores(col1,col2,paso,pasos) {
    col1=rgb(col1); r1=col1[0]; g1=col1[1]; b1=col1[2];
    col2=rgb(col2); r2=col2[0]; g2=col2[1]; b2=col2[2];
    r= ((Math.max(r1,r2)-Math.min(r1,r2)) *paso/pasos ) +Math.min(r1,r2); r=parseInt(r);
    g= ((Math.max(g1,g2)-Math.min(g1,g2)) *paso/pasos ) +Math.min(g1,g2); g=parseInt(g);
    b= ((Math.max(b1,b2)-Math.min(b1,b2)) *paso/pasos ) +Math.min(b1,b2); b=parseInt(b);
    return rrggbb(r,g,b);
} 
   

Aun asi no funciona bien, porque si le aplicamos este ejemplo:

Código PHP:

  c1="#ffffff";
c2="#00ff00";
pasos=10;
for(bucle=0;bucle<=pasos;bucle++) {
    colActual=mezclarColores(c1,c2,bucle,pasos);
    document.write("<font color='"+colActual+"'>Mezclando en pulso "+bucle+". Actual="+colActual+"</font><br>");
} 
   

mezclara desde el verde al blanco, y no del blanco al verde, que es como lo quiero. Ademas el problema es que no se porqué. Creo que tiene que ver con los maximos y minimos de la funcion mezclarColores, pero no se que poner si quito eso...



Una sugerencia por favor..