8

I am trying to work out how to change the hue of a greyscale image using CSS...

I have two images (one colour and one greyscale) and have applied this code to both:

CSS

img { width: 10pc; float: left; }
.huerotate { -webkit-filter: hue-rotate(300deg); }

HTML:

<img alt="Test photo: Mona Lisa" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/500px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg" class="huerotate" />

<img alt="Test photo: Hand" src="http://i821.photobucket.com/albums/zz137/ocnsamu/Capture-2.jpg" class="huerotate" />

This successfully changes the colour image, but the greyscale image remains unchanged.

Is there a way to change the hue of greyscale images, either using CSS another technology?

A demo is here: http://jsfiddle.net/ATpv8/

BenMorel
  • 34,448
  • 50
  • 182
  • 322
user2761030
  • 1,385
  • 2
  • 20
  • 33
  • 2
    AFAIK, you can't do a hue rotate on grey...it's stays grey It has no 'color' as such to be `rotated`. You might try applying the `sepia` filter first and then 'rotating' that.( http://www.html5rocks.com/en/tutorials/filters/understanding-css/) – Paulie_D May 07 '14 at 14:13
  • for the grey one, you need to colorize it before – G-Cyrillus May 07 '14 at 14:14
  • Thanks both, adding sepia doesn't seem to make any difference... @GCyrillus, how would I colourize it? Can this be done in the HTML/CSS? – user2761030 May 07 '14 at 14:21
  • maybe you can put the same image in color in background and add a little opacity to it to blend image and bg together – G-Cyrillus May 07 '14 at 14:23
  • 1
    Until we know what it is you are **actually** trying to do it's hard to help. If you only have a greyscale image you cannot add color to specific areas. You can only colorise the whole thing and then, possibly, rotate the color ..again, of the whole thing. See: http://jsfiddle.net/ATpv8/1/ – Paulie_D May 07 '14 at 14:26
  • Here is what i mean : http://codepen.io/anon/pen/pdtFk by blending 2 images ... play with opacity on img tag – G-Cyrillus May 07 '14 at 14:32
  • Thanks everyone, @Paulie_D 's fiddle solved the problem! I wasn't correctly applying two filters at once, which is why it didn't work when I did tried the sepia + huerotate method. – user2761030 May 07 '14 at 14:37
  • 2
    Shall I write this up as an answer and post? Although really the credit should go to you all for helping but don't want to make more work! Happy to write @Paulie_D 's jsfiddle.net/ATpv8/1 up if there are no takers. – user2761030 May 07 '14 at 14:39

1 Answers1

16

As greyscale images do not contain colour by definition, a sepia filter needs to be added first to 'colourise' the greyscale photo.

From there the hue-rotate function can be applied to give a colour tint.

.colorme {
      -webkit-filter: sepia(100%) hue-rotate(300deg); 
}

Demo here: http://jsfiddle.net/ATpv8/2/

user2761030
  • 1,385
  • 2
  • 20
  • 33
  • 3
    Can't believe it could be done, but indeed I have made a light-green out of a white-transparent image with: sepia(100%) hue-rotate(64deg) saturate(9). It's all about the sepia. NOTE: the order matters! Sepia first! – Vael Victus Apr 23 '15 at 15:20