As I work on developing an application using Electron, I encountered a curious color discrepancy. In Adobe XD, the color reads as rgb(0,55,200), but when I input this exact value into my app created with Electron, the displayed color shifts to rgb(4,48,193).
https://i.sstatic.net/Rqae9.png
https://i.sstatic.net/7Vxvs.png
This puzzling behavior persists across Safari and Chrome, yet Firefox manages to render the correct color scheme. Even more astonishing is that Visual Studio Code, another Electron-based application, showcases the accurate color representation (verified by inspecting devtools within vscode).
I initially suspected that the issue may lie in mismatched Electron versions; while vscode was running version 11.3.0, my app was based on 11.2.1. Upgrading to version 11.4.4 did not rectify the color inconsistency.
Further experimentation on a different computer revealed varying discrepancies in color rendering.
An anomaly noticed with Electron 11.2.1 was that although colors appeared off on the webpage, selecting the color box within devtools displayed the correct hue. This peculiar phenomenon was absent in version 11.4.4, which exhibited consistent color inaccuracies.
Several flag combinations were attempted without success:
app.commandLine.appendSwitch('force-color-profile', 'srgb');
app.commandLine.appendSwitch('--disable-color-correct-rendering');
...
It's important to note that Monitor Color Profiles are not the root cause of this issue.
Adjusting the color picker mode to sRGB in Electron yields hues closer to the expected values, however, colors from Adobe XD then appear dramatically skewed. Changing the monitor's color profile to sRGB resolves the discrepancy, yet it is impractical to expect users to manually alter their settings. Notably, Firefox and vscode exhibit proper color rendition, indicating that a viable solution exists.
Any insights or suggestions on resolving this matter would be greatly appreciated.
Thank you for your attention!