Using PNG translucency for realistic color changing

The idea behind the color changing images is that we pre-build a PNG image with an "alpha channel," otherwise known as translucency, and change the color of the background behind it to create the appearance of an object changing color. To create this PNG image, we start with an image featuring an object of a particular color, typically a rich, saturated color like a or a . (less saturated things, like , occasionally work ok if we are lucky and do some extra tweaking) Then we choose a hue to replace. For this example, we'll use this image of a red Corvette, and of course choose red as the hue to replace. Any pixel that is a tint or shade of red in the original image will have its color changed as the color behind the new image changes. All the other optical qualities of the car body should remain unchanged.

Specifically, we will replace all pixels in the original image that have a red hue with a pixel that is monochrome (white, black or gray), but is translucent. If we choose the shade of gray and the degree of translucency correctly, and then put the image in front of a pure, fully saturated red background, the image will appear unchanged. But if we put it in front of another color background -- whether a fully saturated color, a tint, a shade, white, black, gray, or even tie-dye -- the formerly red object will appear to be whatever that background color is. Shading and specular reflections should look right.

Well, hopefully.

So how do we choose the shade of gray and the translucency values? It is actually pretty easy. Keep in mind that a pixel whose hue is red will have green and blue components with identical values, and a larger value for the red component. For instance, look at the pixel at right with red-green-blue ("rgb") values of 215,148,148. Its hue is red, but it is a desaturated "tint" of red, sometimes known as pastel red -- due to reflecting an overcast sky. The pixel that is 79,2,2 would be considered a shade of red, or dark red, due to being on the underside of the car and not getting as much light from above.

What we need to do is make a new pixel that is gray and translucent, but will produce 215,148,148 when laid on top of pure red (255,0,0). Some fairly simple arithmetic produces a pixel that is 80% opaque, and has rgb values of 187,187,187.

If a pixel has a hue of, say, green, we will leave it unchanged and completely opaque. But pixels whose hue is very close to red will need partial treatment. This can happen if the car is reflecting blue sky or green grass. The converted pixels may end up straying from pure gray, and be a bit more opaque than if they were pure red in hue in the original image. The way these are handled is mostly straightforward, but it may need to be tuned to get the best quality from individual images.

It shouldn't be surprising that this works fine on objects of any hue. But if the object is dark or pastel to begin with, we can't easily make it look like it is a bright, saturated color, at least not without degrading the image noticeably. If the image isn't great quality, especially if it has jpeg compression artifacts, these flaws will be exaggerated when we change the background color, especially if we try to make it appear a very light color like yellow or white. Its also best to start with the highest resolution image we can find, and shrink it after the conversion, if we want to avoid colored halos at the edges.