CSS Filter as a color modifier for one image

Question

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.

Answer 1

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.

Answer 2

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 ;)

Answer 3

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

Answer 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).