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

Question

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/600px-White_Globe_Icon.png"></img>

Possible duplicate of [Change color of PNG image via CSS?](http://stackoverflow.com/questions/7415872/change-color-of-png-image-via-css) — redelschaap, Aug 06 '16 at 07:44
@redelschaap That's what I said. I also said the answer didn't answer the question. — rityzmon, Aug 06 '16 at 07:53
Well the filters in that answer are your only option to recolor an image. You can't just change the color of an object in an image, because they are all pixels. The only option you have is to use a SVG file and color it with the `color` property in css. Because SVG files contain paths, not pixels. — redelschaap, Aug 06 '16 at 08:17

andreas · Answer 1 · 2017-12-12T13:35:39.483

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>

How it works:

Make image background black and set its brightness to a half, to make the foreground gray
Create a wrapper element (<figure>) and create an overlay (:after) of the inverted color you wish with a relatively low opacity
Now filter the wrapper element: make it so bright with such high contrast, that the background becomes black, but the foreground color remains.
Now just invert the wrapper to get your foreground color on white

Limits: Transparency gets lost, due to filtering the colors are maybe not exactly the colors you want, browser support is not optimal

score 1 · Answer 2 · answered Aug 06 '16 at 07:38

1

Just give background color to image, For Example below.

Use this image

NOTE: Image is transparent

CSS

img{
    background-color: red;
}

HTML

<img src="test.png">

answered Aug 06 '16 at 07:38

Vishal Panara

746
4
19

score 1 · Answer 3 · answered Aug 06 '16 at 08:46

It IS possible to "colorise" a white image using filters but the results are imperfect.

The first step is a sepia filter and then a hue-rotate.

A true "Red" may be harder to achieve but you can play with this further.

img {
  max-height: 100vh;
  width: auto;
  -webkit-filter: 
    sepia(100%) 
    saturate(2000%) 
    hue-rotate(222deg);
}
body {
  background: green;
}

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

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

3 Answers3

Linked