In previous article, I mentioned How to change color of SVG (Various ways using CSS) but in this article, I have mentioned how we can change png image color using CSS, various possible methods.

Using CSS filters property

We can change the color of CSS using its filter property, You can change an image to grayscale, sepia and many more other colors.

Filter property is mainly used to set the visual effect to the image.

Let's take a look at an example, where we will take the original image and then use the 'filter' CSS property to change colors

<img alt="image1" src="https://via.placeholder.com/350x150" title="original">
<img alt="image1" src="https://via.placeholder.com/350x150" title="saturate" class="sepia">
<img alt="image1" src="https://via.placeholder.com/350x150" title="grayscale" class="invert">

then we can have CSS to change the color of the first original image would be as below

/*Filter styles*/
.sepia { filter: sepia(100%); }
.invert { filter: invert(100%); }

, and here is the output

change-png-image-color-css-min

The first image, is the original one, while the second and third color is changed using CSS filter property.

Here is the fiddle:

Change PNG Image to a specific color

Since, it may take your time to change color using the CSS filter of a PNG image (unless you know CSS filter property values), here are some useful CSS, to save your time.

/* change image color to blue */
.blue{
  filter: invert(100%) sepia(16%) saturate(7463%) hue-rotate(222deg) brightness(119%) contrast(115%);
}
/* change image color to white */`
.white{
filter: invert(16%) sepia(99%) saturate(7404%) hue-rotate(4deg) brightness(95%) contrast(118%);
}


/* change image color to green */
.green{
filter: invert(26%) sepia(89%) saturate(1583%) hue-rotate(95deg) brightness(96%) contrast(106%);
}

.red{
/* change image color to red */
filter: invert(10%) sepia(90%) saturate(5268%) hue-rotate(245deg) brightness(109%) contrast(155%)
}

Fiddle: https://jsfiddle.net/n12Lsb57/

Change the color of the PNG using CSS background masking

You can also change color of PNG using masking in CSS and applying background-color.

Here is a simple example of using it

<div style="background-color: red;"></div>
<div style="background-color: blue;"></div>
<div style="background-color: green;"></div>
<div style="background-color: orange;"></div>
<div style="background-color: purple;"></div>

CSS would like below

div{
    width: 50px;
    height: 50px;
    -webkit-mask-box-image: url(http://www.clker.com/cliparts/F/5/I/M/f/U/running-icon-white-on-transparent-background-md.png);
}

Here is the fiddle output:

While this approach is very simple and straightforward, this can be really helpful only if you have a white color PNG, otherwise, it is better to use 'filter' CSS property.

Hope this helps.

You may also like to read:

Login and registration form in HTML, CSS and Bootstrap 4

Password and Confirm password validation using Javascript

how to align checkbox with Label using HTML CSS (Should work in all browser)?

Custom Checkbox and Custom Radio buttons in HTML / CSS

Creating Underline text in HTML (With or Without CSS)

how to remove border from iframe in HTML?

How to align element to bottom using Flexbox?

Rotate image using HTML and CSS

Best HTML Editors for developers (Free)