Inversión y saturación: invert y saturate

Otros dos filtros de color son la inversión y la saturación. Como su nombre indica, la inversión cambia los colores por sus opuestos y produce el «negativo» de la imagen, mientras que la saturación hace que los colores sean más intensos y produce un efecto contrario al de la escala de grises.

Inversión del color: invert. Admite valores numéricos de 0 a 1 y porcentajes de 0% a 100%.

.effect {
  filter: invert(1); /* inversión completa del color */
  filter: invert(50%); /* inversión al 50%: todos los colores quedan grises */
}

Saturación del color: saturate. Admite valores numéricos a partir de 0 y porcentajes a partir de 0%. Con un valor de 1 o 100%, el elemento se muestra sin cambios. Con un valor de cero, la imagen pierde el color, como al aplicar el filtro grayscale.

.effect {
  filter: saturate(2); /* duplica la saturación */
  filter: saturate(50%); /* reduce la saturación a la mitad */
  filter: saturate(0); /* imagen en escala de grises */
}