Inverse Transparency of a PNG


I'm writing a little javascript application in which users need to be able to choose an image from an "image library" and then choose the color of said image. There will be a massive number of images and a massive number of colors, and I would really love if I did not have to make each color of each image. Instead, I was hoping to be able to take a png and swap the transparent and visible elements, so that I can just put a solid block of color behind it to change the color. Does anybody know of a good way to quickly do this (I have adobe design premium 5.5)? Thanks in advance!

6/26/2013 2:25:00 PM

Thinking laterally: What about using SVG and changing the colour dynamically?

Or using an font that contains all the glyphs you want and changing the colour with CSS?

It really depends on the precise result you're after, but there's hopefully a realtime method for doing it, so you don't need to generate an image for each colour variation.

Quite a few good SVG tricks are noted here, including colour change via CSS:

10/26/2013 12:26:00 PM