Colored silhouette using CSS

Question

I have the following code that generates the silhouette of a PNG image:

#silhouette img {
  -webkit-filter: grayscale(100%) brightness(0);
  filter: grayscale(100%) brightness(0);
  opacity: 0.6;
}

<div id="original">
  <img src="https://i.stack.imgur.com/JJ6Vs.png" height="150px" width="auto" />
</div>
<div id="silhouette">
  <img src="https://i.stack.imgur.com/JJ6Vs.png" height="150px" width="auto" />
</div>

I have found some questions within StackOverflow (1, 2, 3), but all of them focus on getting the shadow/silhouette in black/gray and not in getting a colored version of it (e.g. I want the silhouette to be red or blue).

I tried playing with those solutions and the hue-rotate filter (applied to the img or the div) but I didn't get any good results. I'm guessing that it's because once the brightness has been set to 0/100 the silhouette is black/white and it doesn't matter the hue change.

Is it possible to do what i want only using CSS? How could it be done?

Note: I do not want to tint the image but to fully colorize it, the solutions in Tint image using CSS without overlay are good, but they don't work in my case as what they do is tint the image so it's different tones of one color (as you can see in this JSFiddles I created for each of the solutions: 1, 2, 3, 4), when what I want is to have a solid color silhouette like for example this one:

Possible duplicate of [Tint image using CSS without overlay](http://stackoverflow.com/questions/12546499/tint-image-using-css-without-overlay) — Tyler Roper, Mar 01 '17 at 15:18
I edited the question to add a description of how the answers to [Tint image using CSS without overlay](http://stackoverflow.com/questions/12546499/tint-image-using-css-without-overlay) didn't work for what I am looking for. I don't want to tint the image, but to make it a solid color silhouette. — Alvaro Montoro, Mar 01 '17 at 15:46
Understood. I've removed my duplicate vote, though I do think that the answer you've accepted is nearly identical to one of the answers on the duplicate I suggested. — Tyler Roper, Mar 01 '17 at 15:55
I agree it looks close to [krs's answer](http://stackoverflow.com/a/19563399/3695983), but the combination/order of filters is not the same and the result is far from similar (you can see them side by side on this [JSFiddle](https://jsfiddle.net/v2601vnn/)). — Alvaro Montoro, Mar 01 '17 at 16:08

score 5 · Accepted Answer · answered Mar 01 '17 at 15:25

Instead of using greyscale you could set contrast to 0 then play with the other values. A high amount of saturate will help with making bolder colors.

#silhouette img {
  -webkit-filter: contrast(0) sepia(100%) hue-rotate(190deg) saturate(2000%) brightness(100%);
  filter: contrast(0) sepia(100%) hue-rotate(190deg) saturate(2000%) brightness(100%);
  opacity: 1;
}

<div id="original">
  <img src="https://i.stack.imgur.com/JJ6Vs.png" height="150px" width="auto" />
</div>
<div id="silhouette">
  <img src="https://i.stack.imgur.com/JJ6Vs.png" height="150px" width="auto" />
</div>

That is exactly what I was looking for. Then I can play with `hue-rotate` to change the color of the silhouette. Thanks! — Alvaro Montoro, Mar 01 '17 at 15:49

score 1 · Answer 2 · edited May 23 '17 at 12:09

You can do this by combining the properties hue-rotate() saturate() and brightness().

I first found the base colour of your image (blue) and converted it into hsl 220,100,50 hsl picker . Now find the color that you want to change to and subtract 220 from the hue value that you just got and apply the hue-rotation()

Reference : How to calculate required hue-rotate to generate specific colour?

#silhouette img {
  -webkit-filter: hue-rotate(140deg) saturate(100%) brightness(100%);
  filter: hue-rotate(140deg) saturate(100%) brightness(100%);
}

#silhouette img.grn{
  -webkit-filter: hue-rotate(140deg) saturate(100%) brightness(100%);
  filter: hue-rotate(-107deg) saturate(100%) brightness(100%);
}

<div id="original">
  <img src="https://i.stack.imgur.com/JJ6Vs.png" height="150px" width="auto" />
</div>
<div id="silhouette">
  <img src="https://i.stack.imgur.com/JJ6Vs.png" height="150px" width="auto" />
  <img src="https://i.stack.imgur.com/JJ6Vs.png" height="150px" width="auto" class="grn"/>
</div>

This is not exactly what I'm looking for, but it is a really amazing trick. — Alvaro Montoro, Mar 01 '17 at 15:59

score 0 · Answer 3 · answered Mar 01 '17 at 16:01

Just work with the available Filter property Functions check the example snippet.

#silhouette img {
  -webkit-filter: grayscale(99%) brightness(0.85) sepia(90) contrast(10);
  filter: grayscale(99%) brightness(0.85) sepia(90) contrast(10);
  opacity: 0.75;
}

<div id="original">
  <img src="https://i.stack.imgur.com/JJ6Vs.png" height="150px" width="auto" />
</div>
<div id="silhouette">
  <img src="https://i.stack.imgur.com/JJ6Vs.png" height="150px" width="auto" />
</div>

Colored silhouette using CSS

3 Answers3