Si estás maquetando una imagen de tu página web, te encuentras con la necesidad de modificar su gama de colores y no sabes como hacerlo, estás en el post acertado. En esta entrada te voy a dar la solución para convertir una imagen de blanco y negro a color con CSS de una manera rápida y eficaz.

Esto se puedo hacer gracias a los filtros de CSS3 sin necesidad de acudir a un editor de imágenes como el Photoshop.

La primera cosa que tienes que hacer es crear el siguiente código en tu hoja de estilos:

img.blanconegro {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}

Con el anterior código ya puedes utilizar la clase «blanconegro» en cualquier imagen de tu página y automáticamente se visualizará en blanco y negro.

Lo único que tienes que hacer es añadir esta clase a la imagen que quieras del siguiente modo:

<img class=»blanconegro» src=»https://midominio.com/ruta-imagen.png»

alt=»Imagen blanco y negro» />

Si quieres realizar algo más animado como por ejemplo visualizar una imagen en blanco y negro y al pasar por encima que se vea a color es muy fácil. Puedes aprovechar la anterior clase pero en tu hoja de estilos tendrás que añadir el siguiente código:

img.blanconegro:hover {
filter: grayscale(0);
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
-ms-filter: grayscale(0);
-o-filter: grayscale(0);
}

Si te estas preguntando por qué hay varias líneas con el mismo código, la respuesta es fácil. Son todas las opciones que tienes que utilizar para este filtro para que tu estilo se visualice correctamente en cualquier navegador web.

Espero que este truco de convertir una imagen de blanco y negro a color con CSS te haya servido de ayuda y cualquier cosa no dudes en preguntar o dejar tu comentario :).