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
Imagen Invertida

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

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.

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

Y ya tenemos la imagen invertida de nuestro logotipo.
🙂
¡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
¡Hola!
Gracias por el comentario 🙂
Me alegro que te haya servido.
¡Saludos!