Can I get consistent CSS colors across browsers?

Question

I'm testing a new site, and I have a div with

background-color: #bbf6bb;

That seems innocuous enough to me. And yet, on my MacBook Pro, the color looks very different in Firefox 3.6 vs. Safari 4. In Safari, it's the color I'd expect from the hex value: a pale green. In Firefox, there's a definite bluish tint, making the color turquoise.

I'm aware of color inconsistencies that result from different treatment of images across browsers, but in pure CSS? Really? I'm guessing that Firefox trying to correct for my display in hopes of delivering better consistency with print, but I'd much rather have my site look the same hue to my users regardless of their choice of browser. Any ideas? Can someone confirm that Firefox is the culprit here?

[Update: This seems to have been a fluke. Specifically, it's a narrow issue with Firefox—see my answer below. I'm puzzled, but relieved.]

Answer 1

but I'd much rather have my site look the same hue to my users regardless of their choice of browser.

That's just the thing - without colour correction, it won't look the same to different users, because not every monitor has the exact same colour response.

Answer 2

color managent color profiles not only changes the images (that can save those) but also the rgb colors.

Answer 3

This has nothing to do with the browser, more with the user's monitor's colour correction. Every monitor has slight differences in how they show colours; additionally, the background lighting around the monitor plays a role, as well (warm daylight vs. usually colder inside lights etc. etc).

Sadly, there's nothing really you can do. You could embed a colour profile into your graphics, which is how design professionals do it when sending data to print, but that will provide halfway decent results only for the minuscule number of (graphic designers') monitors that has undergone colour calibration and is properly set up - and I think IE won't parse colour profiles at all.

Answer 4

Take a look at this blog-post http://css-tricks.com/color-rendering-difference-firefox-vs-safari/ which might explain your problems.. (if they pertain to images)

Answer 5

I've isolated the issue! It's definitely a Firefox 3.6 bug (running on Mac OS 10.6). I can't quite give steps to reproduce, but it seems to have something to do with having a large number of tabs open. If I create a new tab and go to the page, I get the slightly off colors (blue-green instead of just green). If I create a new window and go to the same page, the colors are accurate. And yes, this still occurs if I refresh both instances.

Here's a screenshot:

Answer 6

I have just seen exactly this problem. It was driving me crazy.

I can confirm that opening the same page in a new firefox (3.6.2) window caused the colors to display correctly. Opening it in a new tab did not help. Restarting the browser was not required. Refreshing the copy in the old tab produced the same wrong colors. The color display problem applied both to CSS colors and to images. The old window had a very large number of tabs open (~50)

Presumably this implies that firefox has a per-window table of colors that is of limited size.