How to replace color of PNG image using CSS?

Question

I have an icon in a webpage:

<div class='icon-container'>
    <img src = "img/gavel3.png" class="gavel-icon" style='vertical-align:center;width:80px;'>
</div>

I'm trying to replace the black in this image with the color: #2a4f6c using CSS only. I tried to replace the black with this color using Photoshop, and it looks awful and grainy. Is a solution possible using pure CSS?

Image in question below.

Solution 1

Your icon is a png image, so each pixel is defined separately to have its own color. There are no whole shapes that you can target with css and define a color, as you would for regular HTML elements.

However, there I a few things I would say:

1. I would have thought that it should be possible to change the color of this shape in photoshop without making it look any more grainy or pixelated than before.

2. I would suggest making this into an svg. This is a vector file format, so it generally has a smaller file size compared to pixel images, has completely sharp and defined edges, and can be scaled up to any size without reducing its quality. And, most importantly for you, it's very easy to change its color with CSS.

3. You could try using CSS filters to change the appearance of your png. Check out this stackoverflow question to see if it helps: Change color of PNG image via CSS?

As I've said, an svg would be my recommended option. I've created a code snippet below of what that would look like – you'll find your color #2a4f6c in the code, so just change that if you want the image to have a different color again..

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 1360.6 1077.2" style="enable-background:new 0 0 1360.6 1077.2;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#2a4f6c;}
</style>
<path class="st0" d="M356.4,460l260.4-109.3l-21.8-51.8L334.6,408.1c-13,5.5-19.2,20.5-13.7,33.5l1.9,4.6
	C328.3,459.3,343.3,465.5,356.4,460z"/>
<rect x="614.5" y="239" transform="matrix(0.9059 -0.4236 0.4236 0.9059 -61.7804 311.7127)" class="st0" width="111.8" height="111.8"/>
<path class="st0" d="M706.2,197.3l-131.4,61.4c-3.7,1.7-8.1,0.1-9.9-3.6l-14.1-30.2c-1.7-3.7-0.1-8.1,3.6-9.9l131.4-61.4
	c3.7-1.7,8.1-0.1,9.9,3.6l14.1,30.2C711.5,191.1,709.9,195.5,706.2,197.3z"/>
<path class="st0" d="M786.4,375.5L655,436.9c-3.7,1.7-8.1,0.1-9.9-3.6L631,403.1c-1.7-3.7-0.1-8.1,3.6-9.9L766,331.8
	c3.7-1.7,8.1-0.1,9.9,3.6l14.1,30.2C791.7,369.3,790.1,373.8,786.4,375.5z"/>
<path class="st0" d="M907.2,521.7c1-2,1.5-4.2,1.5-6.5v-18.7c0-8.2-6.6-14.8-14.8-14.8H547.4c-8.2,0-14.8,6.6-14.8,14.8v18.7
	c0,2.3,0.6,4.5,1.5,6.5H907.2z"/>
<path class="st0" d="M941.8,589.8H499.5c-13.3,0-24.1-10.8-24.1-24.1v0c0-13.3,10.8-24.1,24.1-24.1h442.3
	c13.3,0,24.1,10.8,24.1,24.1v0C966,579,955.1,589.8,941.8,589.8z"/>
</svg>

Solution 2

Use the image as mask and you can do it:

.img {
  width:150px;
  height:150px;
  display:inline-block;
  background:red;
  -webkit-mask:url("https://i.ibb.co/FhZb3Xs/CJcLK.png") center/contain;
          mask:url("https://i.ibb.co/FhZb3Xs/CJcLK.png") center/contain;
}

img {
  width:150px;
  height:150px;
}

<div class="img"></div>
<div class="img" style="background:#2a4f6c"></div>
<img src="https://i.ibb.co/FhZb3Xs/CJcLK.png" >

Solution 3

You can't change the image color directly in css. (svg, icons can be possible) Use various filter to change color, change hue-rotate value in code to get various color;

.gavel-icon{
  filter: saturate(500%) contrast(800%) brightness(500%) 
      invert(80%) sepia(50%) hue-rotate(120deg); 
}