Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chrome renders colours differently from Safari and Firefox

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

like image 733
Evgeny Shadchnev Avatar asked Jun 04 '11 14:06

Evgeny Shadchnev


People also ask

Why do colors look different on Chrome?

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. Change Force color profile to "sRGB". Relaunch your browser and testify the rendered colors now.


2 Answers

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."

like image 89
Evgeny Shadchnev Avatar answered Oct 11 '22 09:10

Evgeny Shadchnev


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.

  1. Access at Chrome: chrome://flags/#force-color-profile
  2. Change Force color profile to "sRGB".
  3. Relaunch your browser and testify the rendered colors now.
like image 37
Lindoélio Lázaro Avatar answered Oct 11 '22 08:10

Lindoélio Lázaro