How to Change the Color of PNG Image With CSS

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

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

Watch a course   CSS - The Complete Guide (incl. Flexbox, Grid & Sass) 

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 new to browsers and are only supported in modern browsers. You can use -webkit-filter for Safari, Google Chrome, and Opera.

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".
<body>
  <img class="image-1" src="https://images.unsplash.com/photo-1480044965905-02098d419e96?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1000&amp;q=80" width="500px" height="250px" alt="filter applied" />  
  <img class="image-2" src="https://images.unsplash.com/photo-1448227922836-6d05b3f8b663?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1000&amp;q=80" width="500px" height="250px" 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 filter property with its "invert" value on the "image-1"class. We set 100% to make the image fully inverted.
  • Use the filter property with its "sepia" value (100%) on the "image-2" class.
img {
  width: 40%;
  float: left;
}

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

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

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

Example of changing a PNG image color:

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

Result

Change PNG image color filter applied filter applied

Next, let's see another example with eight values of the filter property.

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

<!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);
        -webkit-filter: saturate(3);
      }
      .grayscale {
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
      }
      .contrast {
        filter: contrast(160%);
        -webkit-filter: contrast(160%);
      }
      .brightness {
        filter: brightness(0.25);
        -webkit-filter: brightness(0.25);
      }
      .blur {
        filter: blur(3px);
        -webkit-filter: blur(3px);
      }
      .invert {
        filter: invert(100%);
        -webkit-filter: invert(100%);
      }
      .sepia {
        filter: sepia(100%);
        -webkit-filter: sepia(100%);
      }
      .huerotate {
        filter: hue-rotate(180deg);
        -webkit-filter: hue-rotate(180deg);
      }
      .opacity {
        filter: opacity(50%);
        -webkit-filter: opacity(50%);
      }
    </style>
  </head>
  <body>
    <h2>Change PNG image color</h2>
    <img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="original">
    <img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="saturate" class="saturate">
    <img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="grayscale" class="grayscale">
    <img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="contrast" class="contrast">
    <img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="brightness" class="brightness">
    <img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="blur" class="blur">
    <img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="invert" class="invert">
    <img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="sepia" class="sepia">
    <img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="huerotate" class="huerotate">
    <img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="opacity" class="opacity">
  </body>
</html>

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

Example of changing the color of PNG image:

<!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 {
        -webkit-filter: hue-rotate(180deg);
        filter: hue-rotate(180deg);
      }
    </style>
  </head>
  <body>
    <h2>Change PNG image color</h2>
    <div id="original"></div>
    <div id="changed"></div>
  </body>
</html>