Search code examples
htmlcssbrowsercross-browserbackground-color

CSS color difference between Browsers

I know about the Color Rendering Difference between Browsers https://css-tricks.com/color-rendering-difference-firefox-vs-safari/ when they render images with color profiles embedded, and yeh I understand that everyone has differently calibrated monitors.

But how can you explain the screenshot below? It's simply a full width div with very basic CSS

.div.top-nav{width: 100vw; height: 50px; background-color: rgb(62,75,43);}

Why does Firefox display a different color value than Chrome?

enter image description here

Screenshot of div with background color

Solution

  • 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