I have a 1 px width gradient background png that repeats in the y axis on my body element. I want it to end at the bottom of the page in the background color of the body element so it looks like it just continues. The problem is that the background color matches up fine on my computer, but when I test on other computers the color does not match.

Is this a color profile issue? Any ideas on the best way to fix?

4 answers

Yes, I suspect it's a color profile issue. It may be that your PNG image has gamma information within it, which is causing browsers who observe that information to display it in a slightly different shade.

On OS X, I use an application called Gamma Slamma. This app does nothing more than strip out the gamma information from PNG files. Running it on your image may well solve the problem.

Note that Gamma Slamma doesn't have a user interface. To use it, just drag and drop your PNG file onto it. It'll create a new, processed, PNG file in the same directory.

(Apologies for the crappy download site link, the original author's site is no longer available, so you'll need to download the app from their mirror instead)

Downloaded that Gamma Slamma app and it just crashes on startup. — Miles Pomeroy over 8 years ago

Ah yes. I should have explained - there's no actual user interface to it! It doesn't run like a normal app. You don't actually launch it, you just drag+drop a PNG file onto it. It'll then create a new PNG file in the same directory that's been processed. — Paul Farnell over 8 years ago

Yep, got it. And it looks like that worked! The only thing is that the colors for all the other elements look slightly off. I guess I should throw them through GammaSlamma to get rid of their color profiles too? — Miles Pomeroy over 8 years ago

I'm glad it worked! Yes, I think that's best. I usually put all my PNGs through it just to be safe. — Paul Farnell over 8 years ago

GammaSlamma.app uses pngcrush, a command-line utility you can get through MacPorts. Another way to accomplish what it does is to directly use:
pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB infile.png outfile.png
Of course that only works for PNG files. But there is another utility you can use for JPGs which is part of the standard jpeg library:
jpegtran -optimize -outfile out.jpg in.jpg
Info found on from http://hacks.mozilla.org/2009/06/color-correction/.
Hey thanks for all the help. Yeah for Doctype, this really works! — Miles Pomeroy over 8 years ago

Except for formatting in the comments. :( — Miles Pomeroy over 8 years ago

Also consider PNGOptimizer, which has a basic GUI, and in addition to stipping out the gamma information, it also tries to compress the file. Usually results in a 5-10% reduction in filesize and sometimes much more :D

That's a nice solution. Just be aware that browsers not supporting alpha PNGs (such as Explorer prior to v7) wouldn't see the effect, and it could look a bit messy for them. — Paul Farnell over 8 years ago

I'm guessing by "softer" you mean the lighter color, but I want the gradient to end in the darker color. Having a hard time conceptualizing how to implement your suggestion. — Miles Pomeroy over 8 years ago

Yes, you would go from light to transparent in (in Photoshop, anyway), then the darker background-color shines through the transparent part, creating a similar effect. Unfortunately, as Paul pointed out, ugly things begin to happen on IE 6 and earlier because they don't properly support PNG transparency. — Nathan DeGruchy over 8 years ago

I had a similar issue at one point last year. I was handed a Photoshop file from one of our Art Directors and began cutting it up to flow it into the site and I couldn't ever seem to get the colors to match up. Green turned to Blue and the likes. I finally realized it was a color profile issue and run the two most popular ones here on separate monitors. Sometimes just dragging the document to the other monitor before exporting can make a world of difference.