CSS Filter as a color modifier for a single image

Question

Is it possible to change using CSS Filter methods such as HueRotate, Saturation and Brightness, PNG color is completely white? Like Photoshop's color blending effect, but in CSS.

This would be a good solution to avoid creating a large number of images that only change color. For example, a set of icons that have dark and light versions for the user interface.

Answer 1

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

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

This should make the white image green.

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

Answer 2

This is a cool idea, but it will not work with the white image, as you suggest. You can do this with a color image, but not all are 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 remains white. If I switch the color to blue as follows:

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

I get a red frame. This is due to the fact that the filter works with a hue value that is not available in white or black.

Answer 3

Try to make brightness more than 100% . You will notice that the image will start to fade to white when you move further than 100% . The darkness of the image will determine how far from 100% 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. (for now, at least).

Answer 4

In fact, fortunately, this is the way to go!

The main difficulty here, as mentioned earlier, is that there is no color in the image of shades of gray. Fortunately, there is a filter that can pump in some color!

sepia(100%)

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

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

I managed to change the color of the image to a green tint.

Enjoy ;)