Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chromium and Firefox display colors differently and I don't know which one is doing it right

I've been building a website under Ubuntu 17.10 and use Firefox and Chromium for testing. The two browsers show quite different colors (not only for images but all colors) and I always thought that it is Chromium which for some reason wrongly over-saturates them, so up until now I always chose colors that looked right in Firefox.

But I'm starting to get more and more complaints about the website's background being too purple - which it shouldn't be in my opinion as only the blue component of it's color (#eeeeff) is "elevated", but it has reached a point that more people are seeing it as purple than blue, what makes me confused.

This is the aforementioned color displayed in Firefox (left) and Chromium (right).

color #eeeeff as displayed in FF and Chromium

And this is how I see a website:

enter image description here

The difference is quite large (notice how even the favicon is different) and I'm asking you to tell me which one is the browser I should trust when choosing the colours of my websites and whether I could do something to avoid it being displayed so differently in different browsers.

(There are some users that see the overly saturated colors in Firefox too. So now which is the right one, really?)

like image 689
tom Avatar asked Jan 06 '18 16:01

tom


People also ask

Why do colors look different in Firefox?

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.

Why do colors look different on different browsers?

Hardware Issues Depending on the settings, a user will see different colors or tones for all elements on a web page, including images and fonts. Furthermore, most monitors have color settings independent of the computer's graphics card. This creates even more variables in how colors appear on screen.

How do I fix colors in Firefox?

You can set the gfx. color_management. mode pref to 0 on the about:config page to disable Color Management. You need to close and restart Firefox to make the change effective.

Why are the colors on chrome messed up?

Scroll down the page until the point "Force Color Profile". In my case, I had to change the value from "Default" to "sRGB". The correct value may vary, so just test out which one looks best on your monitor. Restart the Chrome Browser to apply the change.


3 Answers

Another option is to open chrome://flags/ and select the option sRGB on the Force color profile item.

Force color profile setting on Chrome flags

By using this setting instead of disabling the Use hardware acceleration when available, you don't lose some nice features like the 3D view on Google Maps.

Solution found here: https://www.reddit.com/r/Fedora/comments/74h5yh/blue_shows_as_purple_in_chrome/

like image 104
Rodrigo Saling Avatar answered Oct 03 '22 11:10

Rodrigo Saling


Using GPick as a Color Picker and calling a Website with Color Hexcode like

http://www.color-hex.com/color-palette/54430

I see, that Firefox renders the RGB Colors exactly, meaning GPick identifies the same Hex Code from CSS. Whereas Chromium renders some kind of differnt color.

You can call

chrome://flags/#force-color-profile

and set the Color Profile in Chromium to sRGB, so the rendered Color from Chromium is identified the same as the HexCode with GPick.

like image 27
Wolfgang Blessen Avatar answered Oct 03 '22 11:10

Wolfgang Blessen


If you disable 'Use hardware acceleration when available' in Chromium Settings and relaunch, Chromium displays colors correctly. When turned on, Chromium colors are off. I consider this as a workaround until Chromium color management issue with hardware acceleration is resolved.

like image 39
Milenko Djuricin Avatar answered Oct 03 '22 11:10

Milenko Djuricin