open code page

Using PNG translucency for realistic color changing

Below are a few sample images showing off my "color changer technology." The images are PNGs with an alpha channel, a.k.a. translucency. The color behind each image is changing dynamically, using css transitions to smooth the changes. Click on an image to change the color directly with a color picker. To try it on your own image, just drop it here:

Drag and drop an
image file here!

Converting the original image into such an image is the tricky part, although it is hardly rocket science. The idea is to strip out a particular color and replace it with transparency. If done correctly, the image will appear unchanged from the original if it is placed in front of a solid color background (of the color we are replacing).

I haven't seen this technique used anywhere else, which surprises me because it seems to have a ton of potential uses, such as for retail web sites, and especially for design.

The technique works best on good quality images that have an object with a very saturated color. Note that this is not just the hue changing, but also the brightness and saturation...meaning it can go to black, white, gray, and so on. Specular reflections and shading should all appear correct (or nearly so), especially if the reflections and lighting are not highly colored themselves.

At bottom of the page is a bit more explanation and a link to even more.

color onlytransparency only
A bit more explanation of what is going on here. For the image of the mixer, we want to strip out all the original color of the mixer (which was red), while replacing it with transparency, so that the image will appear unchanged from the original, if placed in front of a red background.

The two images here show the altered image, but fully opaque (left: notice that the redness has been removed and replaced with a gray scale, but not the same as a simple "black and white" image), as well as the transparency (right, with black representing fully opaque and white representing fully transparent). We make each pixel as transparent as is possible, but only do so on pixels that were originally of hue red. Hues close to red are handled partially, and the non-redness of the pixel will be exaggerated so it will still come through.

Here is a bit more explanation.