CODEWITHSUNDEEP
htmlcssbrowsercross-browserbackground-color
funkysoul
funkysoul

Reputation: 3241

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

Upvotes: 1

Views: 2651

Answers (1)

Ylama
Ylama

Reputation: 2489

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

Upvotes: 2

Related Questions