How to Change the Color of PNG Image With CSS

In this tutorial, we'll change the image color with the help of CSS.

The easiest way of changing the color of an image is to use the filter property, which applies visual effects to the element (image). It has the following values:

Syntax of filter property

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() | initial | inherit;

With these values, we can change the color of the image.

Filters are supported in all modern browsers. The standard filter property works without vendor prefixes.

Let’s change an image color step by step.

Create HTML

Copy and paste your image link in the <body> section. We use two images with the classes of "image-1" and "image-2".

Example of how to create images

<body>
  <img class="image-1" src="https://images.unsplash.com/photo-1480044965905-02098d419e96?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" width="500" height="250" alt="filter applied" />  
  <img class="image-2" src="https://images.unsplash.com/photo-1448227922836-6d05b3f8b663?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" width="500" height="250" alt="filter applied" />  
</body>

Add CSS

Now, we add styles to the "image-1" and "image-2" classes.

Use the width property to set the width of both images.
Set the <span class="property">filter</span> property with its "invert" value on the "image-1" class. We set 100% to make the image fully inverted.
Use the <span class="property">filter</span> property with its "sepia" value (100%) on the "image-2" class.

Example of how to create styles for images

img {
  width: 40%;
  float: left;
}

.image-1 {
  filter: invert(100%);
}

.image-2 {
  filter: sepia(100%);
}

So, let’s see the outcome of our code.

Example of changing a PNG image color:

Example of PNG image color conversion with invert and sepia values

<!DOCTYPE html>
<html>
  <head>
    <title>Convert image into different color</title>
    <style>
      img {
        width: 40%;
        float: left;
      }
      .image-1 {
        filter: invert(100%);
      }
      .image-2 {
        filter: sepia(100%);
      }
    </style>
  </head>
  <body>
    <h2>Change PNG image color</h2>
    <img class="image-1" src="https://images.unsplash.com/photo-1480044965905-02098d419e96?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" width="500" height="250" alt="filter applied" />
    <img class="image-2" src="https://images.unsplash.com/photo-1448227922836-6d05b3f8b663?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" width="500" height="250" alt="filter applied" />
  </body>
</html>

Try it Yourself »

Result

<div class="demo px-2.5 mt-1 mb-5"> <span class="mb-2.5">Change PNG image color</span> </div>Next, let's see another example with eight values of the <span class="property">filter</span> property.

Example of changing the color of a PNG image with some filter styles:

Example of PNG image color conversion with saturate, grayscale, contrast, brightness, blur, invert, sepia, hue-rotate and opacity values

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #03030a;
        min-width: 800px;
        min-height: 400px
      }
      img {
        width: 20%;
        float: left;
        margin: 0;
      }
      /*Filter styles*/
      .saturate {
        filter: saturate(3);
      }
      .grayscale {
        filter: grayscale(100%);
      }
      .contrast {
        filter: contrast(160%);
      }
      .brightness {
        filter: brightness(0.25);
      }
      .blur {
        filter: blur(3px);
      }
      .invert {
        filter: invert(100%);
      }
      .sepia {
        filter: sepia(100%);
      }
      .hue-rotate {
        filter: hue-rotate(180deg);
      }
      .opacity {
        filter: opacity(50%);
      }
    </style>
  </head>
  <body>
    <h2>Change PNG image color</h2>
    <img alt="Mona Lisa" src="https://i.stack.imgur.com/OyP0g.jpg" title="original" />
    <img alt="Mona Lisa" src="https://i.stack.imgur.com/OyP0g.jpg" title="saturate" class="saturate" />
    <img alt="Mona Lisa" src="https://i.stack.imgur.com/OyP0g.jpg" title="grayscale" class="grayscale" />
    <img alt="Mona Lisa" src="https://i.stack.imgur.com/OyP0g.jpg" title="contrast" class="contrast" />
    <img alt="Mona Lisa" src="https://i.stack.imgur.com/OyP0g.jpg" title="brightness" class="brightness" />
    <img alt="Mona Lisa" src="https://i.stack.imgur.com/OyP0g.jpg" title="blur" class="blur" />
    <img alt="Mona Lisa" src="https://i.stack.imgur.com/OyP0g.jpg" title="invert" class="invert" />
    <img alt="Mona Lisa" src="https://i.stack.imgur.com/OyP0g.jpg" title="sepia" class="sepia" />
    <img alt="Mona Lisa" src="https://i.stack.imgur.com/OyP0g.jpg" title="hue-rotate" class="hue-rotate" />
    <img alt="Mona Lisa" src="https://i.stack.imgur.com/OyP0g.jpg" title="opacity" class="opacity" />
  </body>
</html>

Try it Yourself »

You can also apply another technique. In the next example, we set <span class="attribute">id</span> attributes ("original" and "changed") for our <div> elements. Then, we set filter: hue-rotate(180deg); on the #changed id.

Example of changing the color of PNG image:

Example of how to change the color of PNG image using CSS with hue-rotate value

<!DOCTYPE html>
<html>
  <head>
    <title>Convert image into different color</title>
    <style>
      #original,
      #changed {
        background: url('https://image.freepik.com/free-photo/orange-red-siamese-fighting-fish-betta-splendens-isolated-white-background_51519-539.jpg');
        background-size: cover;
        width: 30%;
        margin: 0 10% 0 10%;
        padding-bottom: 28%;
        float: left;
      }
      #changed {
        filter: hue-rotate(180deg);
      }
    </style>
  </head>
  <body>
    <h2>Change PNG image color</h2>
    <div id="original"></div>
    <div id="changed"></div>
  </body>
</html>

Try it Yourself »