0

I thought that there would be an answer to this but I have not found one.

I have a PNG image with a transparent background. Through CSS I'd like the image (not the transparent background) to change to a different color.

There should be a way to do this through web-kit... but I've heard that that way isn't supported... Is there another way to do it, if not how can I achieve this through web-kit?

For my example, is there a way to change the red ball to a different color...

JSFIDDLE: http://jsfiddle.net/BkFBH/3/

HTML:

<img id = "ball" src="http://www.clker.com/cliparts/p/0/L/e/j/B/red-circle-solid-md.png" width=100 height=100>

EDIT: I need to change in by HEX or RGBA, not hue! But if there is a conversion from HEX to Hue or similar, that could also work!

Thank you all! -Liam

Liam Shalon
  • 422
  • 2
  • 5
  • 19

1 Answers1

2

You can use the hue-rotate CSS3 filter. Change the 120deg to your liking.

#ball {
    -webkit-filter: hue-rotate(120deg);
}

http://jsfiddle.net/BkFBH/4/

SeinopSys
  • 8,787
  • 10
  • 62
  • 110
  • beat me to it :) You can also see other webkit filters in action here - http://codepen.io/rss/pen/ftnDd – flauntster Apr 24 '14 at 02:03
  • I believe that I should edit my question - I want to be able to enter in a HEX value somewhere and change the circle's color accordingly. Is there a way that I can get the HEX number and then calculate the hue rotation? That may be tough... – Liam Shalon Apr 24 '14 at 02:04
  • Altering the color in HEX values is not possible with pure CSS, however I asked a similar question myself which uses a php script to do the work. [You can find the question here.](http://stackoverflow.com/a/17978832/1344955) – SeinopSys Apr 24 '14 at 02:06
  • @DJDavid98 That's interesting... I'm not familiar with PHP too much... If I wanted to call that code and edit values in that PHP code using Javascript, would that be possible? – Liam Shalon Apr 24 '14 at 02:09
  • @LiamShalon You can link it to a specific image (edit `'splat.png'` to the path of the image file relative to the PHP script), upload it to the server, then make a request to `/path/to/script.php?color=00ff00`, and you'll get the image colored green. – SeinopSys Apr 24 '14 at 02:11
  • @DJDavid98 I think my question is a duplicate... I just found this awesome way that this one guy did to get the effect I'm looking for... http://jsfiddle.net/loktar/qduSR/1/ – Liam Shalon Apr 24 '14 at 02:14
  • @LiamShalon Yours is not a duplicate of this one, this uses heavy JavaScript, not pure CSS. – SeinopSys Apr 24 '14 at 02:17