About this Post

Easily invert the color of a PNG graphic to the opposite color using CSS's invert function.


Situation: Sometimes you only have one version of a graphic to work with, perhaps a company logo, but you really wish you had another version that was the opposite color of the one you're working with. Why? Well, as one example, maybe your website offers a theme switcher and you want the company logo to be contrasted with a darker or lighter theme palette for better contrast to your users.

The problem: you don't have access to a graphics editing tool, e.g. Illustrator or Photoshop. Or, you may not have access to a graphic's source file to make proper edits. Or, you just need a timely solution on the spot.

The following CSS code will invert a PNG graphic's base color to the opposite color; in our case, our imaginary dark PNG logo with a class of logo will be flipped to white:

.logo { filter: invert(1); }
Graphic that reads Justice

The 1 we passed into the invert function in our sample code represents the amount to invert from a range between 0 and 1.

As of the writing of this post, this site had a theme switcher implemented. and our sample PNG file should invert accordingly using the approach outlined above.

Related: