Invert and Saturate

Two more filters that can be used to create color effects are color inversion and color saturation. As the name implies, inverting the colors reverses them, thereby producing a “negative” image, whereas color saturation makes the colors brighter and higher contrast in a way similar to the color removal filter.

Color inversion is achieved using invert. Valid values range from 0 to 1, and percentages range from0% to 100%.

.effect {
  filter: invert(1); /* Full color inversion */
  filter: invert(50%); /* Half color inversion, all colors are grayscale */
}

Color saturation is achieved using saturate. Valid values range from 0 or more, and percentages range from 0% or more. When the filter is set to a value of 1 or 100%, the element will be displayed unchanged. If it is set to zero, the image will become colorless in the same way as if you had used the grayscale filter.

.effect {
  filter: saturate(2); /* Colors that are twice as bright */
  filter: saturate(50%); /* Colors that are twice as saturated */
  filter: saturate(0); /* Total removal of colors from the image */
}