Electron and Webkit browsers display wrong colors

919 views Asked by At

I am developing an app using Electron. I have a color in Adobe XD, for example, rgb(0,55,200). When I set this color in my app, Electron display a different color: rgb(4,48,193).

Adobe XD with correct values

Electron with wrong values

The same happens in Safari and Chrome, but Firefox display the correct value. Even stranger is that Visual Studio Code, an app using Electron, display the correct value (I opened the devtools inside vscode, and checked).

I thought that it could be my Electron version. Vscode process.versions.electron was 11.3.0 and mine was 11.2.1. I updated to 11.4.4 and still the same.

I tried in another computer and the colors are off by a different factor.

Something very strange that happened with Electron 11.2.1 is that while the colors are off in the site, when pointing the color picker to the little color box inside devtools, the color is correct. You can see this box in the second screenshot, but the screenshot is from version 11.4.4 which does not have this odd behavior.

I tried all this flags together with no luck:

app.commandLine.appendSwitch('force-color-profile', 'srgb');
app.commandLine.appendSwitch('--disable-color-correct-rendering');
app.commandLine.appendSwitch('disable-features', 'ColorCorrectRendering');
app.commandLine.appendSwitch('disable-color-correct-rendering');
app.commandLine.appendSwitch('enable-color-correct-rendering', 'disabled');
app.commandLine.appendSwitch('--enable-color-correct-rendering=disabled');
app.commandLine.appendSwitch('--enable-color-correct-rendering', 'disabled');
app.commandLine.appendArgument('--enable-color-correct-rendering=disabled');

This is not a problem with Monitor Color Profiles

If I change the color picker mode to sRGB, the Electron colors are almost right, but the Adobe XD colors are completely off. If I change my monitor color profile to sRGB, everything is correct. But this is not a solution, since I can not ask the user of my app to change her/his color profile. And also, Firefox and vscode are working just fine. There must be a solution.

Any advice is welcome.

Thanks for reading!

1

There are 1 answers

0
Myndex On

This is not a problem with Monitor Color Profiles

Yes it is.

And the digital color meter you are using...

You might want to try "Classic Color Meter" which has additional options to play with:

enter image description here

If you select "show as sRGB" then it will show the color values as set, not as sent to the display, which will change if there is color management.

Firefox is "fine" because it ships with color management OFF.