Color (Colour) Differences Between Browsers

CSS color difference between Browsers

Restarting Chrome:
Chrome can displays the colours incorrectly when you change to a monitor that's different from what was used when Chrome was started.

Its an color profile issue

Chrome :

Also maybe try force color profile to sRGB in chrome://flags

Firefox :

You can also change the behavior of Firefox by going to the url: about:config, in Firefox ,then find gfx.color_management.mode setting and changing it to 1 or 0 as the default is 2.

Safari :

Safari has access to your monitor's ICC profile that it will use it to provide the best correspondence in sRGB.

There is no setting in Safari to make it behave like others.

EXTRA:

'On mac, you can check it with the DigitalColor Meter utility you've got in you Apps > Utilities. Set it to Display in sRGB to see the colors measured. Safari will always display the correct sRGB color, while Chrome and Firefox will be off with an non standard sRGB color profile.

If you set your monitor's color profile to an standard sRGB one, then all browsers will show the correct values.' @Kaiido

Chrome renders colours differently from Safari and Firefox

I recently posted a similar question: https://stackoverflow.com/questions/6338077/google-chrome-for-mac-css-colors-and-display-profiles

As Andrew Marshall answered there, this is a known issue: http://code.google.com/p/chromium/issues/detail?id=44872

Fix browser color differences from developer side

You'll never have your users, at least most of them, see the exact colors you want them to see.

What you're seeing between the two browsers on your monitor also happens between monitors. Monitor brand A will display differently than monitor brand B. Heck, this even happens when the monitors are the SAME brand, the SAME model, and the SAME settings. For example, I have a three monitor setup, each monitor is the same brand and model number. Yet, one of the three is quite different even when all three have the same settings. I've adjusted the third one as much as possible to match the other two, but it's still a bit off. The other two are very very close, but, if you pay attention, there is a perceptible difference.

The demand of consistent color also ignores that users might adjust their monitors to be warmer, cooler, saturated, unsaturated, etc., etc. which would affect their perception of your color choices.

Just work from a basis where you're monitor settings are not skewed to much one way or another and know that's about the best you can do.

Colors appearing differently on website vs design software

Hex codes are not universal numbers, meaning that a hex code alone doesn't mean anything unless a color space is specified. The differences in the colors are due to your design software using a different color space than the browser you're using to display the website. For more information you should check out this similar thread on hex codes and color spaces.

why is grey displayed differently on different browsers?

There are many theories for this as Chrome renders colours differently from Safari and Firefox. you can check more about that here

1. Colours are different in different browsers
2. Color Rendering Difference: Firefox vs. Safari
3. Web browser color management guide
4. How Your Web Browser Affects the Way Colors Are Rendered
5. Chrome NEEDS to support Colour Management like it's competitors.

Hope this will help you to understand

---

Related Topics