Fun example of at least making an attempt...the Demuxed website for 2019[1] had a big, animated hero image on top of a deep purple background. Obviously we went with a video first, which looked great, but then...we ran into this problem and different browsers/hardware all would show slight-but-obvious differences between the video background and the hero background.
Ultimately we decided to just use a gif, but the other, more fun solution we experimented with was to use canvas to render the video, grab the hex value from one of the purple pixels, and set the background to that[2].
I remember the first time I got two same model monitors and spent far too long failing to get the colour to match on both. The killer with colour problems is that it's not a problem until you see it and then you can't un-see it.
On my Samsung Note 8, photos are rendered with very different colors in email previews vs if you download then view them, the email preview shows the colors as being very blown out.
Additional note, this only happens with photos sent from an Iphone. :-D
All modern phones have some sort of friendly color space selector, this particular Samsung is set to be rather neutral. The interesting part is how dramatically different the preview in gmail is vs the photos app. My guess is Gmail is just doing something horribly wrong with the attached color profile in the photo.
These issues are much less about wanting the color that shows up on the user’s screen to precisely match the color the designer intended, and far more about making sure that if you send the same color to display on the same screen via PNG, WEBM, WebGL and CSS, that they should end up looking the same.
If you’ve got an embedded video that has inter titles whose background color is the same corporate red as your webpage header, you should be able to get the pixels to be the same color, right?
We are losing the ability to ignore device coloration though - since some activities are intended to be carried out on multiple displays at once (i.e. a phone and monitor or switch with tv display). Being consistent across devices is beginning to matter and is an incredibly hard problem to solve.
I'd argue it's completely unsolvable because devices tend to have different color gamuts. My laptop screen generally covers significantly less of the sRGB gamut than any external monitor I plug into it. Meanwhile the OLED in my phone covers more.
First thing I do when buying a new TV/monitor is search the internet for others calibration efforts (usually avforums). It's amazing what even basic calibration like this can do to improve image quality (unassisted by professional tools).
Ultimately we decided to just use a gif, but the other, more fun solution we experimented with was to use canvas to render the video, grab the hex value from one of the purple pixels, and set the background to that[2].
[1] https://2019.demuxed.com
[2] https://codesandbox.io/s/video-canvas-playground-gp0hk?from-...