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:
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.
<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="500px" height="250px" 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="500px" height="250px" alt="filter applied" />
</body>
Now, we add styles to the "image-1" and "image-2" classes.
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.
<!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&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&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&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" width="500px" height="250px" alt="filter applied" />
</body>
</html>
Next, let's see another example with eight values of the filter property.
<!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.
<!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>