Dynamic Image Color Using CSS and PNG Transparency

closePlease note: This post was published over a year ago, so please be aware that its content may not be quite so accurate anymore. Also, the format of the site has changed since it was published, so please excuse any formatting issues.

Our CMS in green and orangeLast week at work, I was given the task of changing the color scheme of our CMS for a client. It isn’t something we normally do, but the client requested it, and it wasn’t too difficult to do, so we did it.

I say that it “wasn’t too difficult,” because there was a small amount of difficulty involved. Actually, it was more an inconvenience than a difficulty. While it was easy enough to change the color of the links and any colored text, all of those images you see in the screenshot to the right (which I edited to show the before-and-after colors) had to be changed individually. It wasn’t hard, just time consuming.

That got me thinking about how to quickly change the colors of images, which lead me to ponder, “wouldn’t it be great if I could change the color of images using CSS?” Not only would it be great, it’s entirely possible and very easy to do.

As a proof of concept, I made this page. Take a look at the code and you should get a pretty good sense of what’s going on (unless you’re using IE6, in which case, update your browser). Starting from the top left and moving to the right, and then down, here’s what each image shows:

  1. This is the original 24-bit PNG (note that the border around the images is added in the CSS) with alpha transparency. To help illustrate the transparent area in the image, I added Photoshop’s default transparent background texture. Each of the smiley faces on the page uses this exact same PNG, which means that the browser only has to download the image once. This means fewer HTTP requests and fewer images to download, which decreases load time.
  2. The original transparent PNG with a solid red color behind it. This gives you a better sense of the white gradient at the top-left of the smiley face.
  3. The same as #2, but with a blue background. Again, it’s important to note that these are exactly the same image and the colors are being filled in by the browser.
  4. Numbers 4 through 6 all demonstrate the same basic principle, but each in a slightly different way. This image shows that you can use an image as a background, not just colors.
  5. In this case, the image is my webcam, which changes every 60 seconds. Also, the background is being positioned using CSS.
  6. Here I used an animated GIF.

I do want to point out that I’m not breaking any new ground here. I’ve been using this same basic technique on my website since February of 2007 to add rounded corners on my webcam images. I don’t know why it didn’t occur to me then, but I’ve shown my test page to a few people who all had big, excited reactions.

The implications of what you can do with this sort of technology are vast, and in May of 2007, David Hellsing wrote a fantastic post over on Dave’s Kitchen about how you can take advantage of the effect. I won’t go into details here about what David came up with, but check it out because it is brilliant.

Bringing this all back to the CMS at work, our icons are single-color images (that is, a single color besides white and black). If the colored areas were transparent and the backgrounds of all the images set to a solid color using CSS, we could easily have changed the color of every one of those images by changing a single value in the CSS. In fact, with a little planning, we could change every single color that needs to be changed (links, colored text, message bar, and icons) by changing one value in our CSS code.

No wonder people are getting so excited about this.

0 People like this. Be the first!

15 Comments

  1. Jimmy

    Did you test that images as PNG 8 vs PNG 24? IE6 actually renders PNG 8 transparency without nasty hacks.

  2. I didn’t, but it would work. In fact, it would work with GIF images as well.

    From what I remember reading, you can use Fireworks to create 8-bit PNG images that have alpha transparency that renders properly in IE6. But then, if people are still using IE6, they’re probably used to the Internet looking like crap.

  3. This is cool. I would like to do a pie chart using this. Is it possible to use this technique on image maps or would I have to have an image for every possible color combination?

  4. @Joff – Well, the basic principle I’m demonstrating here really only allows for a single color behind an image with transparency, and I’m assuming your pie charts will have more than one color.

    If each slice of the pie were its own image, you could combine what I outlined here with the “onion skin” layering idea that Brian Williams introduced in issue #182 of A List Apart. This approach seems like more effort than it’s worth, however.

    There are other CSS tricks that you could employ to generate pie charts with dynamic colors.

    There are also a number of classes (code classes, not school classes) available that will build different kind of charts for you. However, if I wanted to create beautiful graphs and charts on the fly, I would seriously consider using Google Charts.

  5. Thanks for the quick reply. And the links. It is not exactly a pie chart I am trying to do, but a similar concept. If you get a sec, please take a look. Uname:test@omadamo.com Pword:password

    It is easier to see it than tell you about it. Click on one of the relationships on the left (View). It works in every browser except IE, in IE, the colors don’t stick. I am using a hacked image map library. But I will use whatever tech works if you have any ideas. Thanks again

  6. Hmm… Your graph is pretty unique, and I’m not sure of any existing product that would be able to build something like it (and it sounds like you haven’t been successful in finding one either).

  7. Joff

    Well if I could just get over this ie hurdle… Thanks for taking the time to look at this, I really appreciate it.

  8. Kevin

    Why does the background stop in the circle and not extend out to the rectangle bounding the png?

    I cannot get this to work, my backgrounds always extend out to the boundry.

    Please help!

  9. The background doesn’t extend past the circle because only the inside of the circle is transparent. The area outside of the circle is white to match the background color of the rest of the page.

  10. Karl

    Is it possible to change everything except the transparent part?

  11. Hey Karl,

    It’s not possible to do that dynamically using the method I’ve outlined here. It should be possible using some more complex methods. If you can be a little more specific, I can try to point you in the right direction.

  12. Karl

    I have images shaped like countries which are adjacent to each other as the countries of a continent (every country is one image)

    every image has only one color and a transparent part and I like to modify the part of the image which is not transparent

  13. @Karl – I assume the transparent part exists so the countries can be placed next to each other as on a map.

    That’s a pretty tall order. As far as I can tell, you won’t be able to do this on the client side (not practically, anyway). The easiest options are Flash or a Java Applet. A more complex solution would be to find some sort of server-side image manipulation library.

    Depending on what exactly you’re trying to do, you might be able to create an image map and have 2 images of each country (one for each color).

  14. thank you so much! It’s usefull

Leave a Reply