a greener shade of pale

June 1, 2007 6:57 AM

web colors question: using separate images for the rounded corners of a CSS div makes the main body and the corners different colors, although in photoshop they are identical...

I have a DIV with text in it. this DIV has a background set to the exact color I want (#bed814). Now, i found a javascript (here) to make rounded corners, and have created PNGs with the rounded corners the exact same color in photoshop.

in Firefox (on PC and Web) the corners and box appear identical. In Safari, and perhaps IE, the corners are noticeably a different shade of green. What is going on?

posted by yonation to computers & internet (13 comments total)

websafe colours?

This is my immediate thought. Browsers do funny things with colours, best to stick to the list in the link.
posted by chrisbucks at 7:07 AM on June 1, 2007

It could be because #bed814 is not a web-safe color.
I'd experiment, making test rounded corners using a web-safe color to rule it out.
posted by Meagan at 7:08 AM on June 1, 2007

Your best bet may be to make a small, solid image of just the color you want, then use that as the background image in your DIV.
posted by amtho at 7:10 AM on June 1, 2007

Switch to an imageless method for rounded corners- I use Rico, which accomplishes the same thing in one function, and is much more configurable. It's open source.
posted by mkultra at 7:11 AM on June 1, 2007

PNGs don't tend to look the same cross-browser. Try .gifs instead.
posted by deern the headlice at 7:16 AM on June 1, 2007

It's the Mac's display gamma and color profile.

See this article by Don MacAskill on why this happens and how to fix it.

I noticed the same thing when I was doing some web design work about a year ago, and it perplexed me beyond belief.
posted by Third at 7:26 AM on June 1, 2007

PNGs can have embedded colour profile/gamma information, and different browsers interpret this data differently.

I've not looked into the issue in too much depth myself, but the safest bet for web use seems to be to basically strip this info out of the PNG file. Some people have said that using 'Save for Web' instead of 'Save as' in Photoshop helps, and others use programs like pngcrush to get rid of the color profile information.

Googling for 'PNG color profile safari ie' will throw up more info.
posted by chrismear at 7:28 AM on June 1, 2007

I usually have more success with this technique, “Mountaintop Corners,” where the background image is the negative space outside the box, matching the color of the background of the box’s parent.
posted by breaks the guidelines? at 7:57 AM on June 1, 2007

Never use PNGs for color matching. Don't worry about "Web Safe" colors, as such a concept is no longer valid.

Simply use GIFs.
posted by thanotopsis at 8:05 AM on June 1, 2007

I've been having this problem (with Safari only) this past week, but it seems to go away if you use "Safe for web..." on every image.
posted by niles at 8:14 AM on June 1, 2007

It's due to color profiles. Firefox doesn't respect them on OS X, whereas Safari does.

There are some guides to this on the Web, google for "srgb photoshop". Basically, you need to get into a completely SRGB workflow on the color front.

There is a drop down somewhere in Save for Web which lets you preview the effects of the color profile you have in effect, and which, I believe, lets you turn its inclusion on and off. With that you should be able to replicate, and then remove, the issue.
posted by wackybrit at 9:35 AM on June 1, 2007

I've had the same (or very similar) thing happen with GIFs.
posted by amtho at 11:39 AM on June 1, 2007

Usually this happens to me when using 2 files of different formats (like JPEG and GIF) images next to each other. Two files that contain the same color image saved in the same program in the same format will probably look the same in the browser, but save them in different formats and, as has been mentioned above, differences in browser interpretations can cause variation. If both of your files are in the same format, you could try saving them both as GIF files, that usually works for me. Make sure they end up with compatible palettes before you save them (GIF files only support 256 colors).
posted by Vorteks at 8:07 PM on June 1, 2007