Invertir los colores de una imagen con CSS

Un efecto molón con css es poder invertir los colores de una imagen, para por ejemplo, utilizar el mismo logo con fondo claro y con fondo oscuro, el código sería algo así:

#elemento{
	-webkit-filter: invert(1) hue-rotate(180deg) contrast(2);
	filter: invert(1) hue-rotate(180deg) contrast(2);
}

Y el efecto:
Imagen original
tulogo

Imagen Invertida

tulogo

Para invertir utilizamos la propiedad invert, pero si solo utilizasemos esta, el resultado sería:

tulogo

En código:

#elemento{
	-webkit-filter: invert(1) ;
	filter: invert(1) ;
}

Lo cual, no se parecería nada a nuestro logo, para ello utilizamos una propiedad muy interesante: hue-rotate que básicamente lo que hace es cambiar tono de un color. Se indica, mediante grados, la posición que le corresponde a ese color dentro del círculo cromático. Le damos el valor 180deg.

tulogo

En código:

#elemento{
	-webkit-filter: invert(1) hue-rotate(180deg) ;
	filter: invert(1) hue-rotate(180deg);
}

Ya se va pareciendo un poco más a nuestro logo original, por último, le añadimos la propiedad contrast, con el valor que consideremos adecuado, en este caso, 2

tulogo

Y ya tenemos la imagen invertida de nuestro logotipo.

🙂


Tu opinión es importante para mi, ¿Te ha resultado útil este artículo?

2 Comments

Significado

¡El tiempo que he perdido, Kike!. Estaba mirando una guía en inglés super completa de CSS y no era capaz de encontrar esto. Y tú en 3 párrafos lo explicas perfectamente. Muchísimas gracias, de verdad

Reply
kike

¡Hola!
Gracias por el comentario 🙂
Me alegro que te haya servido.

¡Saludos!

Reply

Responder a kike Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*