28

Is it possible to change, with the CSS Filter methods like HueRotate, Saturation, and Brightness, the color of a PNG drawn totally white? Like Photoshop's color overlay effect, but in CSS.

This would be a good solution to avoid creating lots of images that change only color. For example, a set of icons that have dark and light versions for a UI.

Michael Petrotta
  • 59,888
  • 27
  • 145
  • 179
Mateus Leon
  • 1,381
  • 1
  • 14
  • 21

4 Answers4

45

You can also colorize white images by adding sepia and then some saturation, hue-rotation, e.g. in CSS:

filter: sepia() saturate(10000%) hue-rotate(30deg)

This should make white image as green image.

http://jsbin.com/xetefa/1/edit

mahemoff
  • 44,526
  • 36
  • 160
  • 222
Ciantic
  • 6,064
  • 4
  • 54
  • 49
  • Added a JSBin to show this for each hue-rotate value. It's clear not all colors can be generated unfortunately. – mahemoff Nov 17 '14 at 23:10
  • 3
    add brightness(50%) to move in and out of the colour wheel and you should be able to get any colour – ewanm89 Nov 21 '14 at 16:08
  • 2
    This should be the accepted answer - now if only someone would make an online tool to generate the filter required to get a particular rgb/hsl value... – jrz Mar 15 '15 at 14:36
  • 1
    This is a really really clever idea - understanding that the `sepia` filter can change a shade to a colour! Great stuff. Agree this should be accepted. – Gershom Maes Oct 09 '15 at 16:59
  • 2
    I've opened a question about the exact formula to go from black to any color here http://stackoverflow.com/q/42966641/181228 – glebm Mar 23 '17 at 03:55
  • Amazing, and basically all colors can be generated by adding invert – ViliusL Oct 25 '17 at 15:23
  • Apparently, this does work in Chrome but not Firefox. – nylki Feb 13 '18 at 13:31
6

This is a cool idea, but it will not work with a white image as you suggest. You can do it with a colored image, but not if it's all white. I tried the following in Safari using the webkit version of the CSS filter:

<div style="background-color:#FFF; -webkit-filter: hue-rotate(90deg); width:100px; height:100px; border:1px solid #000;"></div>

But the box stays white. If I switch the color to blue like this:

<div style="background-color:#00F; -webkit-filter: hue-rotate(90deg); width:100px; height:100px; border:1px solid #000;"></div>

I get a red box. This is because the filter works on the hue value which is not present in white or black.

mahemoff
  • 44,526
  • 36
  • 160
  • 222
bitfiddler
  • 2,095
  • 1
  • 12
  • 11
  • Thanks man, that was really elucidative! So, taking blue as start point (or any other color, except absolute black and white), I can get any other color? Including black and white? – Mateus Leon Jun 28 '13 at 05:31
  • You're welcome. It was fun trying it. You can rotate to any color or make a color black or white by brightness and grayscale. – bitfiddler Jun 28 '13 at 05:37
  • That's what I'm talking about! Hahahaha... off course, there's limitations to use this technique widely, but when you get a project with a specific target, things like that really help us! – Mateus Leon Jun 28 '13 at 05:41
6

Actually there thankfully is a way!

The main difficulty here as mentioned before is that there is essentially no colour in a greyscale image. Thankfully there is a filter which can pump in some colour!

sepia(100%)

I have tried the following css style on a solid colour image, whose base color is #ccc

sepia(100%) contrast(50%) saturate(500%) hue-rotate(423deg)

I was able to change the image colour to a lime green.

Enjoy ;)

xRavisher
  • 838
  • 1
  • 10
  • 18
  • 2
    The hue-rotate() filter is intended to go up to `360deg` max because there are 360 degrees in a color wheel. Therefore, the lime green could be represented by `hue-rotate(63deg)` because 423 - 360 = 63. – JamesWilson Aug 26 '20 at 16:50
4

Try making brightness greater than 100%. You'll notice the image will start to fade to white as you move farther above 100%. The darkness of an image will determine how far from 100% that you need to move.

img {

      -webkit-filter: brightness(1000%);

}

Remember that only Google Canary users can see CSS3 Filters and that CSS3 Filters do not affect the image in any other browser. (thus far at least).

j0sh1e
  • 296
  • 4
  • 11
  • That looks like a solution, but if you want to work only with black and white and, for this, there's one `filter: grayscale` already. But, if want to cover **all color possibilities**, you need to choose one default color for the icon and manipulate it with `hsl filters`. That's what I'm talking about, and I simply don't know wich is. – Mateus Leon Jun 28 '13 at 05:07
  • @MateusDuartePoncedeLeon so what you mean is that you would want the option to not only turn an image completely white, but also red? Using white was probably a bad example choice. – j0sh1e Jun 28 '13 at 05:11
  • sure, white was a bad choice to exemplify the solution, but I didn't noticed that, because I really believed that white color was capable to be changed like I want. Thanks for your help! – Mateus Leon Jun 28 '13 at 05:24