Color mask on a png file

I would like to propose a simple way for a user to change to color of a png file (for example showing a color palette and show a live preview of the result).

My graphic designer sends me the same UI elements with just the color changing, so what file should I ask from him ? Something like a white-shade only png ?

For example (the images are not 100% similar, but you get the idea : a light line followed by a gradient from lighte开发者_高级运维r to darker, and lastly a dark line) :

I would prefer a generic png on which I could apply a mask or something programmatically

You want a .png containing an alpha channel with the detail.

Example image for an "any" coloured gradient:

As it appears inside Photoshop:

And here's an example of how to use the image with HTML/CSS:

http://jsfiddle.net/wbk8d/

<div class="red"></div>
<div class="magenta"></div>
<div class="blue"></div>

div {
    background: url(http://i.stack.imgur.com/LliRn.png);
    width: 320px;
    height: 60px;
    margin: 0 0 10px 0
}
.red {
    background-color: red
}
.magenta {
    background-color: #f0f
}
.blue {
    background-color: blue
}

As far as I understood, you need a generic way to create websites. In this case I recommend to check out if your designer is able to work with you in a HSL range. If not, you can dot it by yourself. That means, he privides Color and brightness.

Check out this designer to find a simple way in DotNet to change any image by using HSL methodes:

http://colorschemedesigner.com

Maybe you could try SVG instead of PNG. It is an xml format in which you may be able to easily change the color.