Separating Specularity and Shadows from Image

Hi guys,
I’m making a custom character section for my game. I want to be able to use a few Images to create a a variety of different colored hats, rather then having to render each hat color individually.

I’ve rendered two Images of the hat
1.) The color rgb values (1,1,1), alpha=1, specularity = 0
2.) The color rgb values (1,1,1), alpha =0, secularity = 1

Now in my game I use the first image and set its fill color to (1,0,0) making it look matt red. Then I place the second image over the top of it to give it some specularity. It doesn’t look quite right though.

Any ideas thanks!