Image fill with two colors

I am using built-in “fill” functionality to display player’s health-bar, and it works fine:


However, my player also has armor, and I wanted to display it in the same bar, over the health, but in different color, like that:

How can I do that?
I thought of placing two bars, one above other, but they are not transparent.
And if I make the white contents of the bar transparent in photoshop, the “fill” function stops working.

Well, I ended up with placing the armor-bar above the health-bar and a little to the right, while cutting the expense “white” length of the armor-bar with a mask.

I also dynamically change the left position of the armor-bar, according to the health-bar’s right border.

So the borders for the bars are:

For the health-bar:

Left: (0 , 0)

Right: (current_health / max_health) * (max_health / total_hitpoints)

For the armor-bar:

Left: (current_health / max_health) * (max_health / total_hitpoints)

Right: (current_armor / max_armor) * (max_armor / total_hitpoints)

total_hitpoints = max_health + max_armor

Hope that helps someone someday!