Jump to content

Image color change


Recommended Posts

Hello guys!

I'm having serious troubles painting a PNG image. All the threads I see change the background color as well.

I need to change the color of a customizable item I want to sell (i.e. glasses: changing color of the glass or temples or front) whenever the customer push a button on a color panel next to it.

I've start splitting the original image in 4 .png parts (in the example: glass, front part, left temple and right temple) and I would place them one above the others. How could I change the color of a the right temple, for example?

Is it possibly to color it with a non-solid color? I mean, respecting the shadows or reflections of the image (like Photoshop does).

Thank you team.

  • Like 1
Link to comment
Share on other sites

If you don't care about supporting IE (Edge works though), you can use the CSS filters to tint the image, specifically the hue-rotate filter:




Check the demo on that page in a modern browser. In that case you would build the image like you suggest, with different parts (each image should have a transparent background, not a solid color white background), and you can apply the filter to tint the image to whatever color you want. Start with a white image of the frames and tint it from there.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...