miércoles, 3 de julio de 2013

Oscurecer el color de un objeto HTML mediante Javascript o PHP

Una función que puede ser bastante útil es la de oscurecer un color que tenemos en formato hexadecimal. Yo lo uso para cambiar el color de un objeto HTML al pasar por encima de él y así obtengo el mismo color que el original pero más oscuro.
La función en PHP sería la siguiente:
 function oscurecerColor($color, $cant){
  //voy a extraer las tres partes del color
  $rojo = substr($color,1,2);
  $verd = substr($color,3,2);
  $azul = substr($color,5,2);

  //voy a convertir a enteros los string, que tengo en hexadecimal
  $introjo = hexdec($rojo);
  $intverd = hexdec($verd);
  $intazul = hexdec($azul);

  //ahora verifico que no quede como negativo y resto
  if($introjo-$cant>=0) $introjo = $introjo-$cant;
  if($intverd-$cant>=0) $intverd = $intverd-$cant;
  if($intazul-$cant>=0) $intazul = $intazul-$cant;

  //voy a convertir a hexadecimal, lo que tengo en enteros
  $rojo = dechex($introjo);
  $verd = dechex($intverd);
  $azul = dechex($intazul);

  //voy a validar que los string hexadecimales tengan dos caracteres
  if(strlen($rojo)<2) $rojo = "0".$rojo;
  if(strlen($verd)<2) $verd = "0".$verd;
  if(strlen($azul)<2) $azul = "0".$azul;

  //voy a construir el color hexadecimal
  $oscuridad = "#".$rojo.$verd.$azul;

  //la función devuelve el valor del color hexadecimal resultante
  return $oscuridad;
 }

Y su equivalente en Javascript
function oscurecerColor(color, cant){
 //voy a extraer las tres partes del color
 var rojo = color.substr(1,2);
 var verd = color.substr(3,2);
 var azul = color.substr(5,2);

 //voy a convertir a enteros los string, que tengo en hexadecimal
 var introjo = parseInt(rojo,16);
 var intverd = parseInt(verd,16);
 var intazul = parseInt(azul,16);

 //ahora verifico que no quede como negativo y resto
 if (introjo-cant>=0) introjo = introjo-cant;
 if (intverd-cant>=0) intverd = intverd-cant;
 if (intazul-cant>=0) intazul = intazul-cant;

 //voy a convertir a hexadecimal, lo que tengo en enteros
 rojo = introjo.toString(16);
 verd = intverd.toString(16);
 azul = intazul.toString(16);

 //voy a validar que los string hexadecimales tengan dos caracteres
 if (rojo.length<2) rojo = "0"+rojo;
 if (verd.length<2) verd = "0"+verd;
 if (azul.length<2) azul = "0"+azul;

 //voy a construir el color hexadecimal
 var oscuridad = "#"+rojo+verd+azul;

 //la función devuelve el valor del color hexadecimal resultante
 return oscuridad;
}

3 comentarios:

  1. De lujo! Justo lo que estaba buscando.
    Muchas gracias.

    ResponderEliminar
  2. Esta bien pero si en vez de restar la variable cant la sumas conseguirias aclarar el color y la función sería completa. De todas formas gracias

    ResponderEliminar
  3. a ver que os parece:

    function aclaroColor(numero, cuanto){
    var res = new Array();
    for(i = 0; i < 3; i++){
    res[i] = parseInt("0x" + numero.substr(2*i+1, 2)); //extraigo los valores y los paso a enteros
    if (res[i] + cuanto <= 255) res[i] = res[i]+cuanto; else res[i] = 255; //sumo a todos los componentes de color siempre que sea menos de 255
    res[i] = res[i].toString(16) //convierto a Hexadecimal
    if (res[i].length<2) res[i] = "0"+res[i]; //cero a la izquierda si es necesario
    }
    nuevoColor= '#'+res[0]+res[1]+res[2];
    console.log( 'ini ' + numero + ' cambiado ' + nuevoColor);
    return nuevoColor;
    }

    ResponderEliminar