Color difference between Chrome and Firefox?


#1

Lately I’ve noticed the colors of a lot of websites look different in chrome and firefox. Has anyone else experienced this? Is there a fix?



Chrome Example:





Firefox Example:


#2

I think it has to do with the way the browsers handle color management and color profile support. These might provide you with some further insight:

http://code.google.com/p/chromium/issues/detail?id=143

Using embedded color profiles may be a partial solution if it’s important. See http://en.wikipedia.org/wiki/Color_management#Embedding


#3

If those buttons were made with CSS (rounded corners and gradients), it is likely just a difference in the way the different rendering engines handle it (in the same way that textareas or radio buttons look different across browsers). If you want it pixel perfect in every browser, use an image. I think it is worth the slight variation between browsers to do it in CSS, because it means you can change the style without going back to Photshop to make your changes.


#4
fillerspace said

If you want it pixel perfect in every browser, use an image.

use css3 HSLA or RGB values and itll render it right, if its using hex there will be a difference in each browser


#5
OrganicBeeMedia said
fillerspace said

If you want it pixel perfect in every browser, use an image.

use css3 HSLA or RGB values and itll render it right, if its using hex there will be a difference in each browser

What about IE? :wink:


#6
fillerspace said
OrganicBeeMedia said
fillerspace said

If you want it pixel perfect in every browser, use an image.

use css3 HSLA or RGB values and itll render it right, if its using hex there will be a difference in each browser

What about IE? :wink:

use an image fallback, no need to load extra files/data(images) if you can do it with CSS


#7
fillerspace said

If those buttons were made with CSS (rounded corners and gradients), it is likely just a difference in the way the different rendering engines handle it

They’re actually images rather than css. I pulled them from a theme here on themeforest. I’ve seen the same behavior on several websites, which leads me to believe it has something to do with the browsers. Link to the theme: http://themeforest.net/item/ambience-premium-wordpress-business-theme-/full_screen_preview/179383

@sevenspark. Thanks for the links. I’ll take a look and see if there’s a solution somewhere in there.


#8

doesnt look different for me are you on two different comps?


#9
OrganicBeeMedia said

doesnt look different for me are you on two different comps?

Nope. It could very well be an issue with my settings, but I’ve reset both browsers to their default settings and still have the same results…


#10

They look exactly the same in FireFox and Chrome on my computer


#11
fillerspace said

They look exactly the same in FireFox and Chrome on my computer

The screenshots that I posted in the thread? Or the buttons in the actual website?


#12
23andwalnut said
fillerspace said

They look exactly the same in FireFox and Chrome on my computer

The screenshots that I posted in the thread? Or the buttons in the actual website?

Sorry, I should have made that clear…the button looks the same when I visit the actual website in different browsers. The two images you posted do look different, so the problem appears to be on your computer. Try disabling all FireFox addons to see if that fixes it, since that is the browser that looks the worst based on your screenshots.


#13
fillerspace said
23andwalnut said
fillerspace said

They look exactly the same in FireFox and Chrome on my computer

The screenshots that I posted in the thread? Or the buttons in the actual website?

Sorry, I should have made that clear…the button looks the same when I visit the actual website in different browsers. The two images you posted do look different, so the problem appears to be on your computer. Try disabling all FireFox addons to see if that fixes it, since that is the browser that looks the worst based on your screenshots.

I should have been clearer too the images post here look different but when I look at the template with different browsers they look the same


#14

I never had any issue with color difference in browsers. (EXCEPT IE). IE may change shades to some extent.

The only issue I have is with different monitors. I use LG Flatron CRT monitor for designing. And when I view the same design on my HP Laptop, all the shades below 10% of that color are invisible. i.e. if I give a box shadow of 10-20% black, it will hardly be visible on a laptop screen. Colors tend to loose their contrast and saturation.

I would like to know from fellow Authors, which monitor screens you prefer? LED, LCD, TFT, CRT etc. :slight_smile: