If I have a transparent image, it will take the color of its background. Sometimes, however, the foreground of my image is the same color of the background. And sometimes I think it would look cool to be the opposite (complementary) color of its background. For example, black to white, red to green, blue to orange, etc. Is this possible and how would I do it?

  • 1
    Transparent images don't have a background so what you are wanting to do is not possible.
    – DavidPostill
    Apr 2, 2017 at 19:39
  • The general concept of having a background and an image is layering and while it is true that transparency itself won't do any tricks, professional drawing software (including The GIMP) supports layers which perform operations other than plain transparency, such as adding brightness, changing colours, etc. These can also be combined with various degrees of transparency. Since you chose the tag image-processing I believe this is the information you're looking for.
    – Run CMD
    Apr 2, 2017 at 20:00

2 Answers 2


I'm going to guess this is about website design in particular.

While impossible with an image alone (which only have an alpha channel, nothing more), modern browsers have CSS features such as background-blend-mode and mix-blend-mode. I think setting mix-blend-mode to exclusion would give you the desired result...

(Of course, this is browser-specific, although widely supported nowadays. For IE you might find something similar in filters...)

  • Is it possible to just use the image, so that a profile picture on Gmail or some similar site will work like this?
    – anonymous
    Apr 3, 2017 at 22:12

A transparent image – by definition – does not have a background color. In fact, a normal image file does not even have a concept of "foreground" or "background". Typically, images consist of only one layer of pixels, and the color of those pixels is defined by their amount of red, green and blue. In transparent images, those pixels additionally specify an alpha-value that determines their opacity.

What I think you want is a standalone image that could somehow figure out what background it was shown on. This is technically impossible. For example, a browser will just render your transparent PNG file wherever the website specifies its location, whatever background color (or image) there happens to be. You have to generate different colors in the image for different backgrounds.

(Of course, there are more complex image formats such as a multi-layer TIFF or even a Photoshop file, in which there can be multiple layers with different overlay effects, but I understand that this is not the context of this question.)

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .