# How to invert colors using CSS | Invert() CSS Function Definition, Syntax, Parameter, Example Program

Do you know there is an option to invert the color of every element on a page? The invert()CSS function inverts the color samples in the input image. And its conclusion is a <filter-function>. In this tutorial, you can easily learn How to invert colors of elements and images using CSS? So, stay continued with this tutorial and grasp the concept thoroughly.

## CSS Invert() Function

The invert() function in CSS is an inbuilt function that is utilized to implement a filter to the image to produce the invert of the color of the example image.

### Syntax:

invert (amount)

### Parameter:

This function allows a single parameter amount that holds the amount of conversion. The value of the invert is estimated in the context of value and percentage. The value 0% draws the original image and 100% draws the inverted image.

Theinvert()function inside utilizes the following formula, to computer the inverse of the image:

amount * (255 - value) + (1 - amount) * value

The inversion value is measured by the variable amount, the variable value range lies between 0 – 1(floating) (this is accomplished by converting the passed percentage of color inversion to a value between 0-1). The value is the color value of the pixel. (255-value) provides the color after subtracting the color value with the max pixel value, estimates that the value of the pixel is in the range 0 – 255 (though input image representation space could be stretched /scaled to satisfy the specified criteria).

The following table contains a list of inversion percentages and the result they produce.

Inversion Result
0% Original Image
50% Image with each pixel having grey color
100% Completely inverted Image

## Example of CSS Invert Color

Here, we are changing the color of white to back by using the Invert color in CSS:

div {
width: 100px;
height: 100px;
background-color: white;
-webkit-filter: invert(100%);
filter: invert(100%);
}

Output:

### Supported Browsers:

The browsers supported by the invert() function in CSS are as follows:

• Internet Explorer
• Safari
• Firefox
• Opera

## How to Invert Colors Using CSS?

There is an issue i.e., I added a “black on white” image on a page, only to realize that with dark mode, my page correctly changes the background to black, but the image remains white on black.

So I added this rule to my CSS to detect dark mode and automatically invert the color of the image:

@media (prefers-color-scheme: dark) {
.my-image {
filter: invert(100%);
}
}

It’s not 100% accurate in my case, because my dark background color is not perfectly black, but it’s better than nothing.

To make things perfect you could also add the image using a CSS background image instead of an img tag in HTML, and I could easily swap that in dark mode.