google-chrome

Why is the actual hex code of a color changing when placed on my second monitor?

Firstly, I just want to mention that I understand colors generally appear slightly different on different monitors due to their color profiles. In those cases, the color hex stays the same but just looks slightly different on the different display.

I have been developing a web page in html/css and have noticed something particularly odd. In my case, somehow, when I use a browser, the literal hex code of a color changes when I place it on my second monitor.

Let's take the color red for example. Red has a hex code of #FF0000. I will go into Google Color Picker and type in this hex code: Color appears red and has correct hex code on main monitor

As you can see, I entered #FF0000 and Google truly does display #FF0000 on my main monitor (checked with the software as seen).

Now, I will drag the Google browser to my second monitor: Red does not appear its true color on my second monitor

I entered the same hex code, #FF0000, and when I check the color with the color picker software, I get #F90000. Also, I can confirm this is not the software playing up because I have already tested this with different color picker apps and I can visibly see that the color is changing with my eyes.

Ultimately, two actually different hex codes are being shown in my browser depending on which monitor it is on. But, when I place a block with a color of #FF0000 in a C# desktop software, the color stays the same on both monitors.

Can someone please help understand what is going on here and how do I fix this?

Solution

  • Since each monitor may use a different color profile (such as sRGB, AdobeRGB, etc.), and when the browser doesn't force a specific color profile, its color rendering will change based on the color profile of the monitor that it is on. This is the reason why the browser was changing the hex code of the color - because it was adjusting to the color profile of the monitor it was on.

    Thanks to Spectric's comment, this is how I resolved this issue.

    1. Go to your browser's search bar and paste in chrome://flags/#force-color-profile, then hit enter.
    2. Click on the dropdown and select sRGB: Select sRGB in the dropdown next to force color profile
    3. Then, Google will show a message at the bottom of your screen saying, "Your changes will take effect the next time you relaunch Chrome." Make sure to click the "Relaunch" button to apply the changes.
    4. This forces Chrome to use the sRGB color profile, which ensures that colors are rendered with their true hex code no matter which monitor they are on.