HTML Diff
0 added 0 removed
Original 2026-01-01
Modified 2026-03-09
1 <p>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.</p>
1 <p>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.</p>
2 <p>Color inversion is achieved using invert. Valid values range from 0 to 1, and percentages range from0% to 100%.</p>
2 <p>Color inversion is achieved using invert. Valid values range from 0 to 1, and percentages range from0% to 100%.</p>
3 .effect { filter: invert(1); /* Full color inversion */ filter: invert(50%); /* Half color inversion, all colors are grayscale */ }<p>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.</p>
3 .effect { filter: invert(1); /* Full color inversion */ filter: invert(50%); /* Half color inversion, all colors are grayscale */ }<p>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.</p>
4 .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 */ }
4 .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 */ }