0 votes
in HTML by

How to recolor a white-on-transparent image to an arbitrary color using CSS?

How do I take a image with just white and transparent pixels (example) and recolor to, say, red or orange, using only CSS?

Question below was asked previously -

Change color of PNG image via CSS?

The answer says to use filters, but does not indicate what combination of filters would make it work. Are there any filter combinations that would allow me to change a white-on-transparent image to red?

To clarify: I would like to recolor the white portion of the image, not color the background. For example, I would like it red-on-transparent.

img {

  -webkit-filter: brightness(50%) saturate(200%) hue-rotate(90deg);

  }

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/White_Globe_Icon.png

1 Answer

0 votes
by
I played around a bit and found a possible solution to only paint the white parts:

img {

  display: block;

  background: black;

  -webkit-filter: brightness(.5);

}

.recolor {

  position: relative;

  display: inline-block;

  -webkit-filter: brightness(1) contrast(300%) invert(1);

}

.recolor:after {

  content: "";

  display: block;

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  background: rgba(0, 255, 255, 0.3);

}

<figure class="recolor">

  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/White_Globe_Icon.png/200px-White_Globe_Icon.png">

</figure>

Related questions

0 votes
asked Jul 1, 2022 in Docker by sharadyadav1986
0 votes
asked Oct 1, 2023 in Python Imaging Library by sharadyadav1986
...