I can suggest a destructive method, as I've tried using masks but I couldn't get it to work.
You will need to use various thumbnail sizes with this method if you need to display it at largely varying sizes, as it's not vector based it won't scale that beautifully outside of a GD program.
You can then change the background colour of the image container dynamically with your script.
A better, but far more time consuming method would be to create a vector based outline.
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: http://css-tricks.com/using-svg/