I am building a site that will have hundreds of product images. The product images will all be a square .png with a different logo "cut out" (transparent) of each one. Each image is made in illustrator, saved for the web and placed in the site.

Each one of these images are customisable, by the customer, in colour. I am achieving this at the moment with the use of <select> drop downs and jQuery (The background colour of the image changes, depending on what option is selected, making it look like the logo colour has changed).

My problem is that if I decide to change the colour of the solid colour of the image at any time along the way and I have already created all of these images in illustrator, this is going to be an extremely tedious task to complete. So I tried to solve this problem.

I have nearly found the solution - I used PaintBrushJS's "Tint" function and that seemed to change the colour of the solid colour and ignore the transparent area, which is good, but is there a way to do this in a more wide spread way?

Is PaintBrushJS the best way to do this? How would I do it without it?

Is it possible to create a css class (or something similar) and apply it to every product image so I can change the colour at a later date and it will work site wide?