Convert foreground motif to degrees of transparency?

I have a 24-bit PNG where the motif is a subtle pattern. The pattern itself is in light greys, i.e. the background color of the PNG is #eee and the pattern is in a range of slightly darker greys.

I would like to convert the foreground motif to a range of transparency levels. In other words, my plan is to have a web page with solid colors defined via CSS, and lay the image over these colors, to provide a repeating pattern for several colors using just one image.

I can find plenty of tutorials on just making the background transparent, but how do i convert the foreground motif to degrees of transparency?

I’m a complete newbie to graphics design software. Adobe Photoshop 5 is available, and I could also install freeware software for Windows (like Windows Gimp).

(I have google this, and there are several related questions on this site — fx “Add transparency to an existing PNG“. So far, what I have found generally addresses changing one solid background color to transparent, which isn’t what I’m looking for.)

Update: Here is the original PNG which I’m trying to convert:

The pattern

(NB: This image is licensed, use of or redistribution by others is not permitted):


You can try Colour to alpha from Colours menu in GIMP and then select the darkest colour in this image to set it to alpha. Here is the result I’ve got(image is barely visible here, right click to view image or download):

Transparent image

And using it as a background for a HTML page with background colour set to #aa00cc I’ve got this result:


Source : Link , Question Author : Jesper M , Answer Author : Samik

Leave a Comment