La propiedad css filter permite realizar cambios de color y aplicar efectos a imágenes de manera rápida y sencilla sin tener que echar mano de herramientas complejas como PhotoShop. Sin embargo los valores de esta propiedad, como saturate pueden funcionar de manera contraintuitiva en algunos casos. Por ejemplo, ¿cómo haríamos para saturar una imagen blanca? Imaginemos un elemento gráfico de la web que queremos variar sin molestar al diseñador de turno o para hacer pruebas. La propiedad hue-rotate, que nos viene a la cabeza para modificar el tono de una imagen no haría nada en tal caso, dado que no se puede modificar el tono de una imagen que consiste en una escala de tonos del blanco al negro, incluidos estos. ¿Cómo hacerlo, pues?

La solución no resulta del todo fácil pues supone usar una serie de filtros uno a continuación de otro. He aquí la solución que a continuación explicaremos:

img{
  filter: invert(0.4) sepia(1) hue-rotate(20deg) saturate(1000%);
}

La clave es utilizar el filtro sepia(1) que tiñe de marrón la imagen. Esta es la única manera que ofrecen los filtros css de pasar de un color gris a un color con al menos alguna saturación. El hecho de empezar con invert se debe a que es más efectivo aplicar el sepia sobre un gris que sobre blanco o negro. El filtro invert intercambia los colores blanco y negro, así como las tonalidades con sus complementarias. Al aplicarlo al 0.4 (en escala de 0 a 1) significa que convertimos el blanco en un gris. Después sólo hace falta ajusta el tono sepia, al deseado utilizando hue-rotate y añadir intensidad al color con saturate. El filtro saturate necesita en este caso valores muy altos, dado que el 100% deja el color tal como estaba, en el tono grisaceo que aplica el sepia. Veamos a continuación cómo va modificándose la imagen, así como una alternativa al invert, pues también se puede usar contrast para conseguir un gris.

¿Te ha costado un poco entender la terminología de este artículo? Si quieres saber más sobre el significado de tono, saturación, etc. visita este tutorial en el que explico estas propiedades a la luz de la teoría del color.