Change image color using CSS - CSS filter property

You can modify your image color without using any image editing tool. CSS filter can solve this problem easily.

Different ways to use the CSS filter property

You can change image color just by using CSS filters. You don't have to use any photo editor to do this. If you want to make change image color dynamically, the CSS filter can work with JS, PHP, or any others codes to perform this operation. Let's see some methods to do this.

1: Define filters using different CSS classes 

Just change the image color by using separate CSS classes to define different filter properties. then you can call individual filter values by calling different classes where necessary. 

CSS:

/*Filter styles*/
.saturate { filter: saturate(30%); }
.grayscale { filter: grayscale(30%); }
.contrast { filter: contrast(30%); }
.brightness { filter: brightness(30%); }
.blur { filter: blur(3px); }
.invert { filter: invert(30%); }
.sepia { filter: sepia(30%); }
.huerotate { filter: hue-rotate(30deg); }
.opacity { filter: opacity(30%); }

HTML:

<img src="img/image_name.jpg" class="saturate">

Html example above showing for one individual filter value defined by the CSS class. If you want to add multiple filters, then add multiple classes like the following code.

<img src="img/image_name.jpg"  class="brightness sepia ">

But it is not a good practice to define multiple classes individually. So you can use another productive technique which you can see from the following method below. 

2: Define all filters values under a single class

CSS:

.ClassName {filter: invert(48%) sepia(50%) saturate(207%) hue-rotate(150deg) brightness(35%) contrast(20%)};

HTML:

<img src="img/author.jpg"  class="ClassName">

Not all browser supports CSS filter, but almost 90% of browsers support it. You may use a vendor prefix to define a particular browser. To define a particular browser you can use the following code with a vendor prefix.

.sepia {filter: sepia(30%); 
-webkit-filter: sepia(30%); 
-moz-filter: sepia(30%);
-ms-filter: sepia(30%); 
-o-filter: sepia(30%);}

It is hard to match the exact color you may want. There are so many tools available online called the ' CSS filters generator tool'. You can use those tools and change image color using CSS easily.