8 ms·

Different browsers see different colors

209 points by slimscsi 5y ago

rorykoehler 5y ago
Screens also display colours differently. Trying to get the perfect colour is futile in the same way trying to get pixel perfect web designs is.
- com2kid 5y ago
  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. Color spaces are hard yo.
  - speedgoose 5y ago
    Some smartphones have a feature to "enhance" the colours automatically. You should check if you have such a feature enabled.
    - com2kid 5y ago
      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.
- mywacaday 5y ago
  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.
- mmcclure 5y ago
  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]. [1] https://2019.demuxed.com https://2019.demuxed.com [2] https://codesandbox.io/s/video-canvas-playground-gp0hk?from-embed=&initialpath=3-analyze.html&file=/index.html https://codesandbox.io/s/video-canvas-playground-gp0hk?from-...
  - d110af5ccf 5y ago
    > use canvas to render the video, grab the hex value from one of the purple pixels I suppose that makes yet another fingerprinting method.
- tomnipotent 5y ago
  > Screens also display colours differently. 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).
- jameshart 5y ago
  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?
  - munk-a 5y ago
    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.
    - d110af5ccf 5y ago
      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.
mmcclure 5y ago
(Mux founder here, but adding some additional community bits to the conversation) Probably unsurprisingly, the (honestly absurd world of) color is a pretty consistent topic among video engineers. Color theory is one of those areas that people working directly with it see it as a completely unsolved problem, and everyone else largely takes it for granted. This is a small sample size, but these are all talks just from a local SF Video meetup and the Demuxed conference, and the speakers work at YouTube, Vimeo, Mux, and a fruit company. Color (SF Video 2016) - https://www.youtube.com/watch?v=PiAiOl1Pvgk https://www.youtube.com/watch?v=PiAiOl1Pvgk Early Experiments in Color Vision and Their Applications to Modern Color Theory (SF Video 2017) - https://www.youtube.com/watch?v=fXd6HLqpoMk https://www.youtube.com/watch?v=fXd6HLqpoMk A Jaunt Through Color Technology in Video (Demuxed 2017) - https://www.youtube.com/watch?v=XMnvY7a4-As&list=PLkyaYNWEKcOfntbMd6KtHhF7qpL9hj6of&index=16 https://www.youtube.com/watch?v=XMnvY7a4-As&list=PLkyaYNWEKc... Your browser and my browser see different colors (SF Video 2020, by the author of this post) - https://www.youtube.com/watch?v=9JXx0bao7ho https://www.youtube.com/watch?v=9JXx0bao7ho
- lattalayta 5y ago
  Agreed, digital color can be a huge rabbit hole once you start understanding all of the pieces involved. Reminds me of one of my favorite xkcd comics (the alt text is particularly relevant here) https://xkcd.com/1882/ https://xkcd.com/1882/
  - munk-a 5y ago
    I've always found it interesting that XKCD uses a slightly beige background color in all of the comics.
    - elliekelly 5y ago
      Which browser are you using...?
      - munk-a 5y ago
        Opera version 4 on a Sun SPARCstation 5 rendered in black and white onto a twenty five year old CRT. Why - is it not beige to some people?
simy 5y ago
There was a website that showed different browsers rendered CSS differently, it reminds me vaguely of a square / maybe divided in triangles. Anyone know the website? I have been looking for it but to no avail.
- xnx 5y ago
  http://acid2.acidtests.org/ http://acid2.acidtests.org/ ?
  - simy 5y ago
    Nope, that's not it :(
    - arendtio 5y ago
      http://acid3.acidtests.org/reference.html http://acid3.acidtests.org/reference.html?
  - laumars 5y ago
    Oh man this brings back memories. Remember when Microsoft used to hardcode acid compliance into IE even though Trident didn’t support half those features in on any other website?
  - djxfade 5y ago
    Oh, ironically, this old test breaks on Google Chrome 90.0.4430.212 on macOS.
    - rootusrootus 5y ago
      If you go to acidtests.org, they say the tests are no longer maintained, and that acid3 has some controversial tests that not everyone agrees on anyway. Chrome and Safari both fail to complete acid2 and acid3 for me on MacOS.
      - BossHamster 5y ago
billytetrud 5y ago
I don't get the image at the top. Why are they showing a different color in the two left most squares?
- mmcclure 5y ago
  It's an image from one of the examples showing the situation. Specifically, this is how Firefox renders the different videos. > There is a lot to unpack here. Since 709.mp4 and 709vui.mp4 look the same, we can deduce Firefox assumes BT.709 when the VUI is not present. 601vui.mp4 rendering correctly means the VUI is honored for BT.601 content. However, when a BT.601 file without a VUI is rendered as 709 it becomes very dark. Obviously, it's impossible to render things correctly without the necessary information, but the choice Firefox made distorts the color more drastically than the method Safari and Chrome use.
  - billytetrud 5y ago
    Its labeled with a different color value tho (0, 77, 0). Is it just saying that's the value it is rendering as, but implying that it was encoded as the same green color?
    - mmcclure 5y ago
      Ah got it, those are the value it's rendering as, all of them were encoded with the exact same green.
      - billytetrud 5y ago
        Ah gotcha. I expected that's what it had to have meant, but it wasn't clear just from looking at the image.
tingletech 5y ago
I wish all browsers would heed color space hints consistently. Seems like some things are always going to assume the generic sRGB, and some thing will notice the profile and convert accordingly. https://www.littlecms.com https://www.littlecms.com can come in handy if you have tricky color space issues.
- zokier 5y ago
  One good thing about HDR is that it is sort of forcing more software to address color management in some way, because you simply can not mix SDR and HDR content without some color management.
pmoriarty 5y ago
I wonder if there'll ever come a time when display calibration at the hardware level ever becomes common in consumer products.
- larkost 5y ago
  It is not perfect, but Apple at least does this on every piece of hardware as it finishes assembly. Of course things slowly get out-of-spec from there, but at least they try.
  - tehnub 5y ago
    Indeed. Apparently the iPhone 12 Pro (and I’d imagine their other phones as well) is very well calibrated: https://youtu.be/n_czpXW3yKE https://youtu.be/n_czpXW3yKE
zokier 5y ago
> And many people know that specific colors are really just wavelengths in the electromagnetic spectrum. [...] > There are many systems involved to turn an RGB triplet value into a specific wavelength of light I think this wavelenght-color connection, often perpetuated in high-school classrooms, confuses people more than helps. In particular when talking RGB colors, your display (or really, any part of the process) will not really change the wavelenghts of outputted light based on the input. Also colors really are not just wavelengths in EM spectrum. Color is more of a perceptual phenomenon, something that happens in our heads, more than physical phenomenon. And there are many things that can impact the color perception, most obviously the other surrounding colors and ambient lighting.
- vlovich123 5y ago
  That’s when you’re talking about color production (how the artist/content creator intends a specific visual image to be perceived). Color reproduction is 100% an engineering thing about wavelengths. To my knowledge monitors do indeed change the wavelength. Sure it’s several separate colored emitters, but using constructive and destructive interference to generate a wavelength doesn’t take anything away from it. There are places where things get messy where reproduction blends in a bit of production (eg applying an HDR filter, applying monitor-specific tweaks, etc). It’s a complex topic for sure. But the position of “color is purely a perception in our head and not wavelengths” position is too extreme in the opposite direction and isn’t helpful in building things.
  - willis936 5y ago
    No. Displays make (relatively) sharp peak emissions at one wavelength. We blend their relative intensities to trick our mind into thinking it's seeing the wavelength in between those three spectral peaks. All the colors we can see are from the spectral response of our three cones (hence why we use three spectral emission lines). We simply cannot tell the difference between magenta and red+blue. The actual photons are not interacting with each other. Take a prism to your display and you'll see the discrete emissions. This wouldn't happen with an actual magenta emission (which also doesn't exist, further highlighting the limits of color in the human vision system). https://en.wikipedia.org/wiki/Cone_cell https://en.wikipedia.org/wiki/Cone_cell
formerly_proven 5y ago
> And many people know that specific colors are really just wavelengths in the electromagnetic spectrum. Colors that can be stimulated using a single wavelength are spectral colors, which are only a small subset of perceptible colors. In the CIE xy model, spectral colors are on the curved boundary, while the straight boundary is the line of purples - impossible colors. Edit: And because CIE XYZ is used as a sort of universal connecting and definition space, all our color spaces are defined in terms of it. But this leads to a the-map-is-not-the-territory fallacy: CIE XYZ was based on just a handful of observations and generously extrapolating. CIE XYZ does not define the set of visible colors. It's a map of colors. --- This post is about conversion from the video's color space to a rendering color space, and the problems with that. Another fun question is whether that rendering color space is actually the display device's color space, or nah. While browser do output color management (i.e. they use the color profile of the output device and convert all their output to the ad-hoc color space that represents), I don't think they do that for video actually. In fact, there are virtually no video players supporting color management on the output side of things.
- galad87 5y ago
  Apple's AVFoundation is color managed: https://developer.apple.com/library/archive/technotes/tn2227/_index.html#//apple_ref/doc/uid/DTS40011335 https://developer.apple.com/library/archive/technotes/tn2227... I would hope that similar frameworks on Windows and Linux distributions are too.
  - cratermoon 5y ago
    There are for Windows, too. I don't know about Linux. The catch is that for really exact color work, you have to calibrate and tune for your computer/OS/video card/monitor combination, and check the calibration against a known standard periodically. It's a bit of pain.
    - formerly_proven 5y ago
      Well this is pretty easy to test. Use a wide-gamut display and use the display's profile. Yeah, sure that might not be accurate, but it tells color-managed applications what the display color space roughly is. Then play a video. Observe whether the colors are drastically different from no profile and sRGB emulation in the display. In a color managed system, both of these should look roughly the same (and they do). My result: Yes, they are. Totally different. Crab people everywhere. Player does not matter.
galad87 5y ago
> First and foremost, ALWAYS set the colorspace metadata on your videos. > If you are using ffmpeg and you don't have color flags set, you are doing it wrong. This. Set the color tag in your files. Please.
Theodores 5y ago
Recently I went down the rabbit hole of JPEG encoding. The default encoder - libjpeg turbo - is going to write lookup tables for CRT monitors of yesteryear where the signal is analogue and the picture is magically made good looking by the 1280 X 1024 CRT. Trinitron was the gold standard then. The Mozilla JPEG encoder mozjpeg assumes a high density digital display and encodes for that, typically with less banding but softer. Not a lot of people cared for mozjpeg and the barely perceptible differences, even though file sizes were smaller into the deal. This experience made me aware of how few people are working at the cutting edge of image processing, for images or video. It is amazing how much we take their work for granted. Frustrating differences may be between screens, browsers and operating systems, we are lucky to have what we have got and also lucky to have such forgiving eyes. The whole shebang is nothing short of a miracle.
deleted 5y ago
[deleted]
cratermoon 5y ago
Yeah, colorspaces are deep voodoo (but good voodoo). I say that as a photographer who started out before digital imaging was a thing.
IshKebab 5y ago
This is a really great article! That fi ligature in the monospaced font makes my eyes twitch though.
mncharity 5y ago
Open firefox tickets: [meta] Proper colorspace support and color rendering for video playback https://bugzilla.mozilla.org/show_bug.cgi?id=1494381 https://bugzilla.mozilla.org/show_bug.cgi?id=1494381 Properly support ICC v4 profiles and enable it https://bugzilla.mozilla.org/show_bug.cgi?id=1500737 https://bugzilla.mozilla.org/show_bug.cgi?id=1500737 And many more https://bugzilla.mozilla.org/buglist.cgi?quicksearch=color+management https://bugzilla.mozilla.org/buglist.cgi?quicksearch=color+m...
mncharity 5y ago
> Most people know some basics of color theory. [...] And many people know that specific colors are really just wavelengths in the electromagnetic spectrum. [...] There are many systems involved to turn an RGB triplet value into a specific wavelength of light. A 5-year old asks you "The Sun is a big hot ball! What color is the ball?". What do you tell them? They ask "And sunlight?" You say? Most first-tier astronomy graduate students simply get Sun color wrong. A widespread misconception, perhaps first learned in Kindergarten, then reinforced by incorrect textbooks, persisting unintegrated into grad school. But more interesting here, is that first-tier non-astronomy physical-sciences graduate students often answer with some variation on "it doesn't have a color; it's rainbow color". Confusing wavelength and spectrum and optical color. As in TFA, and discussion here. So I suggest very few people have a firm grasp on even core basics of color theory. OT (from an email draft in my other window): What if those students had instead learned Sun color correctly in Kindergarten? How might it then have been used over the years, to teach other topics better? For example, color is often taught preK-1. So how might color be better taught, with improved conceptions, progressions, and interactives, building in part on this firmer grasp of Sun color?
- recursive 5y ago
  I don't even know what the confusion is. Is the sun not white? It looks white.
  - glandium 5y ago
    Interesting related fact: Kids in the west usually draw the sun yellow, but in Japan, they draw it red.
    - joshspankit 5y ago
      Is that because of how it looks, cultural priming (other similar concepts are red, for example), or because of the red sun on the flag?
  - z2trillion 5y ago
    I think the confusion arises because because people (the author of the article included) confuse "color" and "spectral color". Spectral colors are what you when you look at light of a single wavelength, e.g. a green 520nm laser pointer. Not all colors are spectral colors, e.g. you'll see purple if you look at a source that produces 600nm and 450nm light, which is a color that can't be produced by any single wavelength. Coming back to the color of the sun, it (the sun + the atmosphere) emits light over a range of wavelengths, which we usually perceive as white.
jdashg 5y ago
All-zeros isn't even really a valid ycbcr value, since even "full-range" "pc" is 1-255 for cb and cr! (Only full-range y has a range of [0,255])
- zamadatix 5y ago
  I think 255 is reserved as well.
  - jdashg 5y ago
    Not in full-range. Narrow-range "tv" is [16,235] for Y and [16,240] (128 +/- 112) for Cb and Cr. Full-range is [0,255] and [1,255] (128 +/- 127) respectively. The spec isn't that bad to read, though it's not loading for some reason right this moment: http://www.itu.int/rec/R-REC-BT.709-6-201506-I/en http://www.itu.int/rec/R-REC-BT.709-6-201506-I/en
lrobinovitch 5y ago
I made https://colorcontroversy.com/ https://colorcontroversy.com/. At some point I should go through the logs and figure out which colors are the most controversial across different browsers.
smallstepforman 5y ago
I've been working on a Vulkan rendering engine for an embedded bit of hardware, and even though I spend an insane amount of time getting the colour spaces correct (textures, tools, presentation format, etc) in the end the cheap LCD screen cheated with it's firmware (I wanted BT2020, but it kept on giving 601, I couldn't even get BT709). The firmware lied that it supported multiple formats (including P3), but it was just a menu option with no effect. My reference desktop monitor did show all the differences, so I know that engine code path was correct.
boulos 5y ago
The article is focused on video, but fwiw (at least several years ago), the browsers do bad stuff with images, too. It is (was?) impossible to get Firefox and I think also Chrome to correctly render PNG, JPEG, and other formats, especially when they provided a color profile. At the time (again, like a decade ago) at least, it was roughly: Firefox thinks every JPEG is sRGB and every PNG is “huh?”, Chrome got JPEG right (treat as sRGB when no profile is present) but couldn’t do Adobe RGB (and wouldn’t even open a TIFF), and Safari used Apple’s long-standing color code to basically get this right (though I don’t recall if it went with “assume sRGB if no profile”). I’d be curious to reproduce those old results, especially given the cool “oh yeah, Chrome doesn’t show the same colors in software mode” shown here!
maroider 5y ago
For anyone looking to get a better understanding of digital color, I'd recommend "The Hitchhiker's Guide to Digital Color":https://hg2dc.com/ https://hg2dc.com/. The tone is a tad rude at times (though it's not directed at you), but it's done a good job of explaining stuff to me so far (I haven't finished reading it yet).
bloaf 5y ago
I wonder if this is why h.265 HEVC video playback on firefox is noticeably darker than in edge/chrome.
dredmorbius 5y ago
I see you and raise my (16 shade grayscale) E-ink display.

209 points by slimscsi 5y ago

Screens also display colours differently. Trying to get the perfect colour is futile in the same way trying to get pixel perfect web designs is.

com2kid 5y ago
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. Color spaces are hard yo.
- speedgoose 5y ago
  Some smartphones have a feature to "enhance" the colours automatically. You should check if you have such a feature enabled.
  - com2kid 5y ago
    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.
mywacaday 5y ago
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.
mmcclure 5y ago
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]. [1] https://2019.demuxed.com https://2019.demuxed.com [2] https://codesandbox.io/s/video-canvas-playground-gp0hk?from-embed=&initialpath=3-analyze.html&file=/index.html https://codesandbox.io/s/video-canvas-playground-gp0hk?from-...
- d110af5ccf 5y ago
  > use canvas to render the video, grab the hex value from one of the purple pixels I suppose that makes yet another fingerprinting method.
tomnipotent 5y ago
> Screens also display colours differently. 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).
jameshart 5y ago
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?
- munk-a 5y ago
  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.
  - d110af5ccf 5y ago
    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.

mmcclure 5y ago

(Mux founder here, but adding some additional community bits to the conversation) Probably unsurprisingly, the (honestly absurd world of) color is a pretty consistent topic among video engineers. Color theory is one of those areas that people working directly with it see it as a completely unsolved problem, and everyone else largely takes it for granted. This is a small sample size, but these are all talks just from a local SF Video meetup and the Demuxed conference, and the speakers work at YouTube, Vimeo, Mux, and a fruit company. Color (SF Video 2016) - https://www.youtube.com/watch?v=PiAiOl1Pvgk https://www.youtube.com/watch?v=PiAiOl1Pvgk Early Experiments in Color Vision and Their Applications to Modern Color Theory (SF Video 2017) - https://www.youtube.com/watch?v=fXd6HLqpoMk https://www.youtube.com/watch?v=fXd6HLqpoMk A Jaunt Through Color Technology in Video (Demuxed 2017) - https://www.youtube.com/watch?v=XMnvY7a4-As&list=PLkyaYNWEKcOfntbMd6KtHhF7qpL9hj6of&index=16 https://www.youtube.com/watch?v=XMnvY7a4-As&list=PLkyaYNWEKc... Your browser and my browser see different colors (SF Video 2020, by the author of this post) - https://www.youtube.com/watch?v=9JXx0bao7ho https://www.youtube.com/watch?v=9JXx0bao7ho

lattalayta 5y ago
Agreed, digital color can be a huge rabbit hole once you start understanding all of the pieces involved. Reminds me of one of my favorite xkcd comics (the alt text is particularly relevant here) https://xkcd.com/1882/ https://xkcd.com/1882/
- munk-a 5y ago
  I've always found it interesting that XKCD uses a slightly beige background color in all of the comics.
  - elliekelly 5y ago
    Which browser are you using...?
    - munk-a 5y ago
      Opera version 4 on a Sun SPARCstation 5 rendered in black and white onto a twenty five year old CRT. Why - is it not beige to some people?

simy 5y ago

There was a website that showed different browsers rendered CSS differently, it reminds me vaguely of a square / maybe divided in triangles. Anyone know the website? I have been looking for it but to no avail.

xnx 5y ago
http://acid2.acidtests.org/ http://acid2.acidtests.org/ ?
- simy 5y ago
  Nope, that's not it :(
  - arendtio 5y ago
    http://acid3.acidtests.org/reference.html http://acid3.acidtests.org/reference.html?
- laumars 5y ago
  Oh man this brings back memories. Remember when Microsoft used to hardcode acid compliance into IE even though Trident didn’t support half those features in on any other website?
- djxfade 5y ago
  Oh, ironically, this old test breaks on Google Chrome 90.0.4430.212 on macOS.
  - rootusrootus 5y ago
    If you go to acidtests.org, they say the tests are no longer maintained, and that acid3 has some controversial tests that not everyone agrees on anyway. Chrome and Safari both fail to complete acid2 and acid3 for me on MacOS.
    - BossHamster 5y ago

billytetrud 5y ago

I don't get the image at the top. Why are they showing a different color in the two left most squares?

mmcclure 5y ago
It's an image from one of the examples showing the situation. Specifically, this is how Firefox renders the different videos. > There is a lot to unpack here. Since 709.mp4 and 709vui.mp4 look the same, we can deduce Firefox assumes BT.709 when the VUI is not present. 601vui.mp4 rendering correctly means the VUI is honored for BT.601 content. However, when a BT.601 file without a VUI is rendered as 709 it becomes very dark. Obviously, it's impossible to render things correctly without the necessary information, but the choice Firefox made distorts the color more drastically than the method Safari and Chrome use.
- billytetrud 5y ago
  Its labeled with a different color value tho (0, 77, 0). Is it just saying that's the value it is rendering as, but implying that it was encoded as the same green color?
  - mmcclure 5y ago
    Ah got it, those are the value it's rendering as, all of them were encoded with the exact same green.
    - billytetrud 5y ago
      Ah gotcha. I expected that's what it had to have meant, but it wasn't clear just from looking at the image.

tingletech 5y ago

I wish all browsers would heed color space hints consistently. Seems like some things are always going to assume the generic sRGB, and some thing will notice the profile and convert accordingly. https://www.littlecms.com https://www.littlecms.com can come in handy if you have tricky color space issues.

zokier 5y ago
One good thing about HDR is that it is sort of forcing more software to address color management in some way, because you simply can not mix SDR and HDR content without some color management.

pmoriarty 5y ago

I wonder if there'll ever come a time when display calibration at the hardware level ever becomes common in consumer products.

larkost 5y ago
It is not perfect, but Apple at least does this on every piece of hardware as it finishes assembly. Of course things slowly get out-of-spec from there, but at least they try.
- tehnub 5y ago
  Indeed. Apparently the iPhone 12 Pro (and I’d imagine their other phones as well) is very well calibrated: https://youtu.be/n_czpXW3yKE https://youtu.be/n_czpXW3yKE

zokier 5y ago

> And many people know that specific colors are really just wavelengths in the electromagnetic spectrum. [...] > There are many systems involved to turn an RGB triplet value into a specific wavelength of light I think this wavelenght-color connection, often perpetuated in high-school classrooms, confuses people more than helps. In particular when talking RGB colors, your display (or really, any part of the process) will not really change the wavelenghts of outputted light based on the input. Also colors really are not just wavelengths in EM spectrum. Color is more of a perceptual phenomenon, something that happens in our heads, more than physical phenomenon. And there are many things that can impact the color perception, most obviously the other surrounding colors and ambient lighting.

vlovich123 5y ago
That’s when you’re talking about color production (how the artist/content creator intends a specific visual image to be perceived). Color reproduction is 100% an engineering thing about wavelengths. To my knowledge monitors do indeed change the wavelength. Sure it’s several separate colored emitters, but using constructive and destructive interference to generate a wavelength doesn’t take anything away from it. There are places where things get messy where reproduction blends in a bit of production (eg applying an HDR filter, applying monitor-specific tweaks, etc). It’s a complex topic for sure. But the position of “color is purely a perception in our head and not wavelengths” position is too extreme in the opposite direction and isn’t helpful in building things.
- willis936 5y ago
  No. Displays make (relatively) sharp peak emissions at one wavelength. We blend their relative intensities to trick our mind into thinking it's seeing the wavelength in between those three spectral peaks. All the colors we can see are from the spectral response of our three cones (hence why we use three spectral emission lines). We simply cannot tell the difference between magenta and red+blue. The actual photons are not interacting with each other. Take a prism to your display and you'll see the discrete emissions. This wouldn't happen with an actual magenta emission (which also doesn't exist, further highlighting the limits of color in the human vision system). https://en.wikipedia.org/wiki/Cone_cell https://en.wikipedia.org/wiki/Cone_cell

formerly_proven 5y ago

> And many people know that specific colors are really just wavelengths in the electromagnetic spectrum. Colors that can be stimulated using a single wavelength are spectral colors, which are only a small subset of perceptible colors. In the CIE xy model, spectral colors are on the curved boundary, while the straight boundary is the line of purples - impossible colors. Edit: And because CIE XYZ is used as a sort of universal connecting and definition space, all our color spaces are defined in terms of it. But this leads to a the-map-is-not-the-territory fallacy: CIE XYZ was based on just a handful of observations and generously extrapolating. CIE XYZ does not define the set of visible colors. It's a map of colors. --- This post is about conversion from the video's color space to a rendering color space, and the problems with that. Another fun question is whether that rendering color space is actually the display device's color space, or nah. While browser do output color management (i.e. they use the color profile of the output device and convert all their output to the ad-hoc color space that represents), I don't think they do that for video actually. In fact, there are virtually no video players supporting color management on the output side of things.

galad87 5y ago
Apple's AVFoundation is color managed: https://developer.apple.com/library/archive/technotes/tn2227/_index.html#//apple_ref/doc/uid/DTS40011335 https://developer.apple.com/library/archive/technotes/tn2227... I would hope that similar frameworks on Windows and Linux distributions are too.
- cratermoon 5y ago
  There are for Windows, too. I don't know about Linux. The catch is that for really exact color work, you have to calibrate and tune for your computer/OS/video card/monitor combination, and check the calibration against a known standard periodically. It's a bit of pain.
  - formerly_proven 5y ago
    Well this is pretty easy to test. Use a wide-gamut display and use the display's profile. Yeah, sure that might not be accurate, but it tells color-managed applications what the display color space roughly is. Then play a video. Observe whether the colors are drastically different from no profile and sRGB emulation in the display. In a color managed system, both of these should look roughly the same (and they do). My result: Yes, they are. Totally different. Crab people everywhere. Player does not matter.

galad87 5y ago

> First and foremost, ALWAYS set the colorspace metadata on your videos. > If you are using ffmpeg and you don't have color flags set, you are doing it wrong. This. Set the color tag in your files. Please.

Theodores 5y ago

Recently I went down the rabbit hole of JPEG encoding. The default encoder - libjpeg turbo - is going to write lookup tables for CRT monitors of yesteryear where the signal is analogue and the picture is magically made good looking by the 1280 X 1024 CRT. Trinitron was the gold standard then. The Mozilla JPEG encoder mozjpeg assumes a high density digital display and encodes for that, typically with less banding but softer. Not a lot of people cared for mozjpeg and the barely perceptible differences, even though file sizes were smaller into the deal. This experience made me aware of how few people are working at the cutting edge of image processing, for images or video. It is amazing how much we take their work for granted. Frustrating differences may be between screens, browsers and operating systems, we are lucky to have what we have got and also lucky to have such forgiving eyes. The whole shebang is nothing short of a miracle.

deleted 5y ago

[deleted]

cratermoon 5y ago

Yeah, colorspaces are deep voodoo (but good voodoo). I say that as a photographer who started out before digital imaging was a thing.

IshKebab 5y ago

This is a really great article! That fi ligature in the monospaced font makes my eyes twitch though.

mncharity 5y ago

Open firefox tickets: [meta] Proper colorspace support and color rendering for video playback https://bugzilla.mozilla.org/show_bug.cgi?id=1494381 https://bugzilla.mozilla.org/show_bug.cgi?id=1494381 Properly support ICC v4 profiles and enable it https://bugzilla.mozilla.org/show_bug.cgi?id=1500737 https://bugzilla.mozilla.org/show_bug.cgi?id=1500737 And many more https://bugzilla.mozilla.org/buglist.cgi?quicksearch=color+management https://bugzilla.mozilla.org/buglist.cgi?quicksearch=color+m...

mncharity 5y ago

> Most people know some basics of color theory. [...] And many people know that specific colors are really just wavelengths in the electromagnetic spectrum. [...] There are many systems involved to turn an RGB triplet value into a specific wavelength of light. A 5-year old asks you "The Sun is a big hot ball! What color is the ball?". What do you tell them? They ask "And sunlight?" You say? Most first-tier astronomy graduate students simply get Sun color wrong. A widespread misconception, perhaps first learned in Kindergarten, then reinforced by incorrect textbooks, persisting unintegrated into grad school. But more interesting here, is that first-tier non-astronomy physical-sciences graduate students often answer with some variation on "it doesn't have a color; it's rainbow color". Confusing wavelength and spectrum and optical color. As in TFA, and discussion here. So I suggest very few people have a firm grasp on even core basics of color theory. OT (from an email draft in my other window): What if those students had instead learned Sun color correctly in Kindergarten? How might it then have been used over the years, to teach other topics better? For example, color is often taught preK-1. So how might color be better taught, with improved conceptions, progressions, and interactives, building in part on this firmer grasp of Sun color?

recursive 5y ago
I don't even know what the confusion is. Is the sun not white? It looks white.
- glandium 5y ago
  Interesting related fact: Kids in the west usually draw the sun yellow, but in Japan, they draw it red.
  - joshspankit 5y ago
    Is that because of how it looks, cultural priming (other similar concepts are red, for example), or because of the red sun on the flag?
- z2trillion 5y ago
  I think the confusion arises because because people (the author of the article included) confuse "color" and "spectral color". Spectral colors are what you when you look at light of a single wavelength, e.g. a green 520nm laser pointer. Not all colors are spectral colors, e.g. you'll see purple if you look at a source that produces 600nm and 450nm light, which is a color that can't be produced by any single wavelength. Coming back to the color of the sun, it (the sun + the atmosphere) emits light over a range of wavelengths, which we usually perceive as white.

jdashg 5y ago

All-zeros isn't even really a valid ycbcr value, since even "full-range" "pc" is 1-255 for cb and cr! (Only full-range y has a range of [0,255])

zamadatix 5y ago
I think 255 is reserved as well.
- jdashg 5y ago
  Not in full-range. Narrow-range "tv" is [16,235] for Y and [16,240] (128 +/- 112) for Cb and Cr. Full-range is [0,255] and [1,255] (128 +/- 127) respectively. The spec isn't that bad to read, though it's not loading for some reason right this moment: http://www.itu.int/rec/R-REC-BT.709-6-201506-I/en http://www.itu.int/rec/R-REC-BT.709-6-201506-I/en

lrobinovitch 5y ago

I made https://colorcontroversy.com/ https://colorcontroversy.com/. At some point I should go through the logs and figure out which colors are the most controversial across different browsers.

smallstepforman 5y ago

I've been working on a Vulkan rendering engine for an embedded bit of hardware, and even though I spend an insane amount of time getting the colour spaces correct (textures, tools, presentation format, etc) in the end the cheap LCD screen cheated with it's firmware (I wanted BT2020, but it kept on giving 601, I couldn't even get BT709). The firmware lied that it supported multiple formats (including P3), but it was just a menu option with no effect. My reference desktop monitor did show all the differences, so I know that engine code path was correct.

boulos 5y ago

The article is focused on video, but fwiw (at least several years ago), the browsers do bad stuff with images, too. It is (was?) impossible to get Firefox and I think also Chrome to correctly render PNG, JPEG, and other formats, especially when they provided a color profile. At the time (again, like a decade ago) at least, it was roughly: Firefox thinks every JPEG is sRGB and every PNG is “huh?”, Chrome got JPEG right (treat as sRGB when no profile is present) but couldn’t do Adobe RGB (and wouldn’t even open a TIFF), and Safari used Apple’s long-standing color code to basically get this right (though I don’t recall if it went with “assume sRGB if no profile”). I’d be curious to reproduce those old results, especially given the cool “oh yeah, Chrome doesn’t show the same colors in software mode” shown here!

maroider 5y ago

For anyone looking to get a better understanding of digital color, I'd recommend "The Hitchhiker's Guide to Digital Color":https://hg2dc.com/ https://hg2dc.com/. The tone is a tad rude at times (though it's not directed at you), but it's done a good job of explaining stuff to me so far (I haven't finished reading it yet).

bloaf 5y ago

I wonder if this is why h.265 HEVC video playback on firefox is noticeably darker than in edge/chrome.

dredmorbius 5y ago

I see you and raise my (16 shade grayscale) E-ink display.