Turning a black icon into a coloured using css3 and filters

Sometimes you have these great icons, but you want to change the colour and appareance of them via css without having to edit them in a photo editing program.

Thanks to css3 this is now possible!

With this trick you can have black and white(prefably black and transparent) icons in any colour you want without editing themi n a graphics editor.
This makes it extremely easy to repurpose the same image in different styles.

For my example i'll use the following images

They are black and transparent.

Now i'll add the following filters to the images

1. 
   filter:invert(51%) sepia(100%) hue-rotate(153deg) saturate(100%);
   -webkit-filter: invert(51%) sepia(100%) hue-rotate(153deg) saturate(100%);
   -moz-filter: invert(51%) sepia(100%) hue-rotate(153deg) saturate(100%);
   -o-filter: invert(51%) sepia(100%) hue-rotate(153deg) saturate(100%);
   -ms-filter: invert(51%) sepia(100%) hue-rotate(153deg) saturate(100%);
   
   
   

This *should* display them in fancy colours(lightblue) below. if it doesn't your browser doesn't support standards. Go figure out the long route to achieve this(svg, IE dx filters, magic?)

Now the order in which the filter arguments appear are important.

Let me explain what they do

invert(69%) Turn the image gray ish colour so there is something to play with.
sepia(100%) Turn the gray into a teal colour so we have a hue to play with.
hue-rotate(-202%deg) Spin the colour wheel to a different colour.
saturate(100%) set the intensity of the colour.