Chrome renders colours differently from Safari and Firefox

Question

Chrome renders #FF3A00 as #FF0000 for some reason. I included a screenshot from jsfiddle to illustrate the point. The colour that the Color Meter reports (and what I see) differs from what CSS says.

This happens to other colours too. For example, #FFAF00 is rendered as #FFA400 according to the Color Meter.

However, the colours are rendered without problems on Safari and Firefox. I'm on a Mac using Chrome 11, Safari 5 and Firefox 5.

I'm sure there's a logical explanation. Any ideas?

Update: I'm attaching a screenshot of Chrome next to Safari showing the very same page. I checked this image in Photoshop: the colours are #F00 in Chrome and #FF3A00 in Safari. Chrome vs Safari

Chrome renders #FF3A00 as #F00

2017 and Chrome 60, issue still happening. Chrome rendering ghost colors. What's the point of spending days designing and picking best colors if Chrome will just decide to use something else! — medopal, Sep 08 '17 at 20:41
I might have solved this. Can you look if the solution in my post helps? https://stackoverflow.com/questions/55435873/css-colors-on-os-x-displaying-correctly-in-firefox-but-incorrectly-in-safari-and I think it's to do with the default OS X color profile. — mmm111mmm, Mar 31 '19 at 00:33
every chrome-based same problem, using Edge and it has the same issue. — Harsha, Apr 08 '21 at 14:52

score 48 · Answer 1 · answered Jun 05 '11 at 23:15

48

Ok, as it turned out, I needed to restart my Chrome. I often connect my macbook air to a 24 inch monitor. It looks like Chrome displays the colours incorrectly when I change to a monitor that's different from what was used when Chrome was started.

I found the answer on the Google Help forum : "I should mention that in OS X, every time you change your monitor or monitor profile (e.g. if you switch from your laptop display to your external display), you MUST restart Chrome for it to get the proper monitor profile information from the OS."

answered Jun 05 '11 at 23:15

Evgeny Shadchnev

6,934
4
25
30

2

This is a really good answer it needs more exposure in this thread. That problem was driving me insane! – Hugo Mar 14 '13 at 01:55
1

Yeah! This is the correct answer, why the wrong why is accepted? – Wojciech Bednarski Apr 01 '13 at 18:39
6

Maybe this solves the problem, or some of the problem for some people, but this doesn't work for me. – boxed Apr 29 '14 at 15:04
3

For me this actually does not seem to Apply. Even after re-starting Chrome, color representation is still markedly different. – Kris Jun 22 '16 at 09:10

score 27 · Answer 2 · answered May 22 '18 at 10:25

By default both Firefox and Safari use the sRGB color profile. You must do the same, if your Google Chrome takes a different color profile as default.

Access at Chrome: chrome://flags/#force-color-profile
Change Force color profile to "sRGB".
Relaunch your browser and testify the rendered colors now.

score 22 · Accepted Answer · edited May 23 '17 at 10:31

22

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

edited May 23 '17 at 10:31

Community

1
1

answered Jun 14 '11 at 01:19

Trevor Burnham

74,631
30
153
193

I'm now having the exact opposite effect listed in the Chromium issue linked above. Chrome looks good, but Firefox has mis-matched colors. I think this page touches on the issues, but it's a bit beyond me. https://bugzilla.mozilla.org/show_bug.cgi?id=999600 – Mysterfxit Mar 21 '19 at 19:29
1

@Trevor Burnham This issue says "Status: duplicate (closed)". Do you know where I can find the non-closed version of this issue? – – mesqueeb May 29 '19 at 23:29
@mesqueeb Go to the "MergedInto" issue, which is marked as "Fixed (Closed)": https://bugs.chromium.org/p/chromium/issues/detail?id=667431 – Nateowami Sep 03 '19 at 18:52
As of 2020, it seems that this is still an issue. I am experiencing it in my Chrome on OS X and the correct colors are on Firefox, whereas Chrome renders wrong RGB values... – tonix Sep 09 '20 at 16:23
Not sure if there's a browser bug, but in Chrome I had to set force-color-profile to sRGB to match colors of Firefox in Linux, so I filed two issues (not sure which browser has the issue): https://bugs.chromium.org/p/chromium/issues/detail?id=1133990 and https://bugzilla.mozilla.org/show_bug.cgi?id=1668444 – trusktr Oct 01 '20 at 06:21

score 5 · Answer 4 · answered Jun 04 '11 at 15:34

Mac has color correction set up for your monitor. Your browser may or may not use color correction for web content/images depending on its setup. Your color picker reports what your OS thinks it is rendering. Your browser may report something else.

Color on computers. Something many of us take for granted but never bothered to understand how it is rendered.

score 3 · Answer 5 · answered Feb 13 '18 at 08:23

Chrome color picker works by taking color from current monitor color profile,and the problem may happens by changing color setting or sometime change monitor, please check the below method to solve.

Go to chrome://flags/#force-color-profile and click Reset all to default

Thanks.

mmm111mmm · Answer 6 · 2019-03-31T00:53:51.920

I changed the Colour Profile in OS X and that sorted it for me.

See the screenshots below using different Color Profile. Note, in the screenshots I'm trying to differentiate between #ff00ff, #ff1aff, #ff33ff and #ff4dff. It's only when I don't choose the default OS X colour profile that I can differentiate the colours correctly.

Default colour profile:

With a different colour profile:

From: CSS colors on OS X displaying correctly in Firefox but incorrectly in Safari and Chrome (potentially 'solved')

I found Safari and Chrome could not differentiate between #ff00ff, #ff1aff, #ff33ff and #ff4dff. But Firefox could. In addition Inkscape, an X11 app, could. But Gimp and Libreoffice Writer, non X11 apps, could not. Firefox and X11 apps seem to be using their own colour profile somehow.

I have no idea why Mac defaults to Color LCD profile which does not do this differentiation amongst others.

Pavel Evstigneev · Answer 7 · 2021-01-27T18:14:59.783

1

In case someone else come here because firefox images looks too colorful (over saturated). Full guide on how to fix it https://cameratico.com/color-management/firefox/

Shortly:

Type in about:config on your Firefox address bar
Set gfx.color_management.mode to 1
Set gfx.color_management.enablev4 to true
Restart firefox

Now Firefox will display colors same as Safari, Chrome and all other browsers

edited Jan 27 '21 at 18:14

answered Jan 27 '21 at 18:02

Pavel Evstigneev

4,119
27
18

score 0 · Answer 8 · answered Sep 13 '16 at 07:10

0

Had this problem with Chrome (Lubuntu) when exporting a PNG in Photoshop. Solution: File -> Save As -> Uncheck "ICC Profile: Adobe RGB (1998)".

answered Sep 13 '16 at 07:10

Zar

6,272
6
49
74

Chrome renders colours differently from Safari and Firefox

8 Answers8

Linked