CSS color difference between Browsers

Question

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?

and did you notice this with some particular values ? or any values ? — Temani Afif, Feb 06 '18 at 12:11
The two screenshots actually come out as rgb(63,57,41) and rgb(64, 57, 39) respectively, so you may have a typo or two. — Mr Lister, Feb 06 '18 at 12:14
no its an known issue look at this , and maybe restart your chrome ,https://stackoverflow.com/questions/6237455/chrome-renders-colours-differently-from-safari-and-firefox — Ylama, Feb 06 '18 at 12:14
When I take a screenshot of https://jsfiddle.net/L2e8jeww/ in Chrome and Firefox each, I get the same color values for both. Can you confirm that, or do you get different results for that on your machine as well? — CBroe, Feb 06 '18 at 12:15
@funkysoul added a short solution so that the answer has a answer if you know what i mean. And its a pleasure. — Ylama, Feb 06 '18 at 12:26
@Rob if it helps it's Chrome 63.0.3239.132 and Firefox 58.0.1 on a OSX 10.12.6 — funkysoul, Feb 06 '18 at 12:29

Ylama · Accepted Answer · 2018-02-06T14:15:46.450

1

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

edited Feb 06 '18 at 14:15

answered Feb 06 '18 at 12:20

Ylama

2,040
19
44

Link only answers are not allowed on SO. Either form your own answer or delete this altogether. If anything, this is a comment: https://stackoverflow.com/help/how-to-answer Your links btw are eight years old. – Rob Feb 06 '18 at 12:23
Well.. after a second look at the chromium issues it has been closed in 2016 -> so shouldn't be an issue anymore. I don't hook up my mac to any external source, and i restart the whole system regularly – funkysoul Feb 06 '18 at 12:28
see if disabled Color correct rendering works maybe @funkysoul – Ylama Feb 06 '18 at 12:31
@Ylama don't have such an option, only 'Force color profile' chaging it (and restarting) doesn't change a thing either – funkysoul Feb 06 '18 at 12:35
@funkysoul Force color profile, i feel like thats it , try all of them maybe and look for a difference, i really think thats the problem.. – Ylama Feb 06 '18 at 12:39
@Ylama tried all - it doesn't really change a lot.. it's still off by a few units. – funkysoul Feb 06 '18 at 12:42
you can set chrome://flags/#force-color-profile to sRGB. Then close and restart Chrome. If this is not working im out of ideas. – Ylama Feb 06 '18 at 12:50
The linked to page is NOT an answer to the question. As noted, the issue was resolved two years ago and no longer applies to this question. – Rob Feb 06 '18 at 13:05
@rob i removed the old links and kept what i still think is valid solution maybe not in this case but for future reference. – Ylama Feb 06 '18 at 13:07
@funkysoul last thing check your Firefox color management: http://ntown.at/2013/12/28/firefox-color-management/ – Ylama Feb 06 '18 at 13:08
@Ylama I can't go tell my clients to switch their firefox profile to something else ;-) – funkysoul Feb 06 '18 at 13:11
@funkysoul i understand, but its not making any difference on your side? just trying to figure out how this can be.. – Ylama Feb 06 '18 at 13:13

CSS color difference between Browsers

1 Answers1