How to invert colors using CSS

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

by

Invert colors css: 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

CSS invert colors: 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:

Invert color css: 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

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:

invert color css output image

Supported Browsers:

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

  • Internet Explorer
  • Google Chrome
  • Safari
  • Firefox
  • Opera

How to Invert Colors Using CSS?

CSS invert: 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.