Imagine that you have a polaroid picture on the table and clumsy you, manage to knock over a bucket of paint that flows over your picture. There you have it, a tinted picture, an image that has a greenish atmosphere about it, or reddish. Some clients might ask you to do such a thing with the pictures on the site when you are hovering over those images.Why? Because it is interesting. The tint color that is used has a relation with the colors used overall the site. For example a webpage with green links and green navigation, that has a green border below would look good with greenish images on mouse over. So yes, let’s do it!

Ok, so here we have the original image:

But since we have the website’s theme more greenish, we would like to tint this picture with green color. The first thought that came to my mind was to use a semitransparent layer over the image absolutely positioned and with the same height and width of the image. This is what came out of that fantastic idea:

Not so fantastic after all, right? It looks like a green mist, doesn’t give you the idea that the whole mountain cliff is green, like on a weird planet. This time we have to pull out the big guns and work on a pixel level, redraw the image in a different color chanel. What we will use is the new filter property of css3, about which I really can say that is fantastic. Photoshop filters implemented in css3, isn’t that great?

For our greenish effect we need to play with the filter values:

  • sepia
  • hue-rotate

From these 2 we can make a composite and achieve the color splash over our image. With the help of the sepia filter we will unify the colors and with hue-rotate we will change it’s color to the one we like.

But what is sepia? Let’s see it in the dictionary:

“a reddish-brown color associated particularly with monochrome photographs of the 19th and early 20th centuries.”

So by sepia toning we understand that after applying the sepia filter on an image, this will unify the image’s colors into a reddish-brown color

If we apply the hue-rotate filter on the original image it would look like this:

In this picture it looks quite ok, but if we take for example a more colorful image we will see that the same values applied in the hue-rotate filter would not result the greenish tint on it.

 

That is exactly why we need first a starting point of colors and then we rotate the hue circle 50 degrees. So first we make all colors into sepia(reddish brown color) and then we rotate the colors to result in a greenish effect. Here is the code:


.list img:hover {

   -webkit-filter: sepia(0.8) hue-rotate(50deg);

   -moz-filter: sepia(0.8) hue-rotate(50deg);

   -ms-filter: sepia(0.8) hue-rotate(50deg);

   -o-filter: sepia(0.8) hue-rotate(50deg);

   filter: url(#tint-green);

}

;

The tint-green inline svg is for older mozilla browsers and it looks like this:



  
  

The final result:

Note: Internet Explorer (at least till IE11) is left out of supporting these great filters and there isn’t really any msie proprietary filter that could achieve this effect. If you want broader browser support you should use some jquery plugin for this, that uses html5 canvas for instance(jquery tancolor plugin would do this job).

Update
Since too many people are bothered of the poor browser support of this method, I decided to come with an alternative solution for this one. This solution involves inline SVG code and it extends the browser support till IE10+ (because lower then IE10 the svg filters are not supported).

  
    
    
        
   
  

The css for this is is very short:

   #target{
       filter:url(#colortint)
   }

Let me provide you with some basic explanation for how the matrix works:

  

So we got the rgba table containing the red green blue alpha components. Each number is a multiplier of the red, green, blue, alpha channel and the last number in each row is a constant. Multipliers go till 1 (not 255 as the rbg colors are constructed) but also can have negative value.

Channel Red Green Blue Alpha(Opacity) Constant factor
Red 0 * red 0 * green 0 * blue 0 * alpha 0 constant
Green 1 * red 1 * green 1 * blue 0.1 * alpha 0 constant
Blue 0 * red 0 * green 0 * blue 0 * alpha 0 constant
Alpha 0 * red 0 * green 0 * blue 1 * alpha 0 constant

In this example we got the green channel in it’s whole beauty!
By the law of the additive colors, the red + green colors in equal proportions and full values produce the yellow color, Blue and green produces cyan and the combination of red and blue produces magenta.Modifying their opacity in different proportions would result in different colors. That’s color matrix in a nutshell.

This is the jsfiddle example for a yellowish color tint:

Please leave a comment below, or rate the article.Thanks.