Why don’t colors say what they mean?

A couple of years ago, I came to notice something that perplexed me.

Under Blink/Chromium-based browsers and Electron-based applications, colors just did not look the same. My laptops, namely, a ThinkPad X220 and X230T, and my mid-2012 MacBook Pro–likely among other devices with Intel HD Graphics–would always give colors a strange saturation boost within the browser. Images wouldn’t look as they appeared in painting programs, and the default blue links would look more purpleish.

As I’ve been working again on my new personal site, this came to my attention once more. I use Edge as my primary browser, and have been using RetroZilla Composer and SharePoint Designer interchangeably for editing. Let me show you the same page in both stock Microsoft Edge (Chromium) and RetroZilla. Notice how on the left, the page has more saturation than on the right?

(Author’s note, this is through a VGA external monitor. However, the effect is the same on the internal LCD.)
(Ignore the link colors being #0000FF on the right, which seems like a Composer-specific quirk.)

If not, then let me give it another pass or two:

Now Lince is becoming almost an alien, poor lad:

Peculiar, huh? It is also across the whole window, including UI elements. To better illustrate, I saved a page with a #0000FF background and used a color picker to check. Under Edge, it’s displayed as #6700FF, while under IE it is #0000FF as expected. You can test this for yourself as well.

Comparison between stock Edge settings and Internet Explorer. Edge displays the page’s background color as #6700FF.
Internet Explorer displaying the background as #0000FF.

I tested Chrome and Vivaldi with the same results. Though, I tested Firefox, and the color was as it should be. I could’ve sworn the same has happened within that as well, but testing it again seems to prove otherwise. I’ll give Mozilla credit where its due.

Internet Explorer and Firefox, both rendering the background as #0000FF.

Where things really get bizarre, however, is how on my parents’ desktop with Intel UHD Graphics 630 (a later generation chip), and my desktop with Nvidia graphics as pictured below, the color is displayed as expected under Edge. No flags have been changed for this screenshot.

Edge passing the #0000FF test on my desktop!

My theory is that Chromium and its descendants respond to the Intel HD Graphics chips’ color profile in some way– either the chip, or possibly some monitor calibration settings from the laptops’ manufacturers. As to why they make this distinction, exactly, I don’t know.

Fortunately, there is a remedy in chrome://flags (or edge://flags, vivaldi://flags, whichever equivalent). I am not aware of a way to apply this tweak through Electron apps which lock that out, but there is a flag to “Force color profile”. Choosing sRGB, the standard color space formulated by Microsoft and HP many moons ago, will make the colors display correctly again.

If anyone knows why this happens, or has had anything similar happen to them, let me know. It’s one of those things I never hear about but still makes me wonder. Additionally, why did we move off of a sRGB default for the Web anyway if it causes these kinds of discrepancies? Shouldn’t HTML colors be rendered just as they are in the markup or stylesheet? And does anyone other than me really even notice?

About dotcomboom

Software developer, photographer... blogger...?
This entry was posted in Software and tagged , . Bookmark the permalink.

4 Responses to Why don’t colors say what they mean?

  1. Cammy says:

    Good thing we don’t have any intention of putting art on our websites here at Somnolescent :blobmari:

  2. Cammy says:

    On a less joking note, I did try your test page on a few browsers over here (Edge, Vivaldi, and Retrozilla as you said) and all them came up #0000FF. Damn Minnesotan computers and their funky colors.

Leave a Reply to Cammy Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.