What’s wrong with colors in Firefox?
Posted by Jorge Bernal March 08, 2008
I’m not the first one to realize this, but there’s something wrong with color management in Firefox. Look at the following screenshots.
This is the original picture in Aperture, with colors exactly like I wanted:
Now the same picture in Safari
And now for something completely different: Firefox
In this particular picture, I used saturation to give strength to the moment, only to find out Firefox decided to wash out my colors.
The technical story here is that our monitors can’t display every color, so we have color spaces, and Firefox ignores them. Good news is that color profiles are supported in the Firefox 3 beta, though not enabled by default. You’ll have to open about:config and switch the gfx.color_management.enabled variable to true.
Bad news is, that will only work for you. If you’re trying to show your pictures to the rest of the world, they won’t see the same colors.
To learn more about this:
- Color space
- sRGB
- Web Browser Color Management Tutorial
- Digital-Image Color Spaces
- Introduction to Colour Science
I found your site on google blog search and read a few of your other posts. Keep up the good work. Just added your RSS feed to my feed reader. Look forward to reading more from you.
- Sue.
This is a real pain in the ass for webdesigner.
With browsers supporting color profiles and other who simply ignore them, you have to be very very careful NOT to include any profile with images used for the layout.
do you know why color management is not enabled by default within Firefox 3 ?
No idea. Probably, it’s still beta code.
Both differ. Safari makes the guitar neck rather yellow, Firefox less so, but stronger than the original.
Hmpfff. Maybe CMS is not so great. Aboslute colors may improve, but the relationship between colors will only get broken.
Daoro above is correct: if you want to put images on the web, do _not_ use color management and do not embed any color profile. Color management depends on three criteria to work: It has to be activated (there goes 90% of your viewers); it has to be calibrated to the actual screen, room and lighting (there goes most of those remaining 10%) and the machine should not be moved into a different place than when it was calibrated (so no laptop users).
Basically, using color management for web images guarantees a precise rendering for a couple of percent of your users and guarantees a horrible experience of your images for all the rest (as you see above not even your own machine gets it completely right). Better to just skip color management and gamma and perhaps adjust the images a bit towards the cool end (people tend to like warm tone for their monitors). No, it will not look exactly like on your screen. But it won’t be horribly far off either. Up to you which you prefer
I am using Firefox, so why is it that I do see the differences between the screenshots?
I’m puzzled.
As a web designer (actually, I’m more of a front-end developer), I encountered the color consistency problem more than once. You say that Safari seems to get the colors right, which might be true or close to the truth in that particular case, but for webdesign color management is just a pain.
What you REALLY need for webdesign is matching colors from different sources, i.e. PNG or JPEGs and CSS colors. If your PNG file embarks gamma correction data (which most of the time is «guessed» by the authoring tool rather than reliable data!), or if it embarks color profile information, and the browser tries to act on that… then your colors might not match, even though you used, say, #BBBBBB in your CSS and in your PNG file. Doh.
In a perfect world, color management would be so reliable you wouldn’t have to worry about it. But actually it’s totally worthless for the Web and you’re better off not using it because color consistency is WAY more important than color accuracy on most websites.
QUE VASCA DE PAGINA