Programatically replace color gradient on sprite

Question

Say I have the following image:

I want to tint the yellow parts on this sprites shoulder/arms by a random color. In other questions on this site, they suggest using a chroma key and replacing the constant color with whatever color I wanted, but that solution wouldn't keep the gradient.

The other solution I've seen is that I should cut out the part I want to change the color of and make it an overlay. That would work, but would require a lot of effort since I have many poses for this character + animations.

Any ideas?

Answer 1

You could programmatically make a mask by converting the image to HSV color space and specifying a hue range that captures the yellow parts you want while leaving alone the rest of the colors. For instance, you might select the pixels with hue between 50 and 70 (assuming yellow is a 60). Then do the tinting by adding an offset to the hue of those pixels, while keeping the same saturation and value. For example, subtracting 60 from the hue will turn the guy red, adding 60 will make him green, etc.

Answer 2

I'm not certain but I think you could define a color by a ratio between the RGB values then modify the color of any pixel that has a close enough ratio to that which you're working with (keeping the magnitude, thus darker colors closer to 0 will stay the same distance from 0 and keep the gradient)

Keep in mind though, that many ways that will get the yellow of the shoulders will also get the yellow of the visor unless you are careful to exclude it somehow (or want that effect).

Another note, if you are worried about speed and don't need to change the color on the same entity in runtime, apply your shader once to the entire sprite sheet and render it into memory as the new sprite sheet to use. That way you only have to do it once and you can save the entire image out to make sure that everything looks the way you like.