2

Retitling and reediting, after a few tips from Mulvya.

I've got a div on my blog, with background color set to #83d3c9.

Yesterday I tried creating a video on AE where the background was set to exactly the same color. I was hoping that if I upload it to YouTube and then embed it inside that div, it might "blend in" kind of seamlessly.

Yet, when I finally reached this point, I couldn't help but notice a slight difference in color between the two elements, as if YouTube was applying some kind of tint to my video.

Following Mulvya's advise, I checked my file by means of mediainfo.

Color space:        YUV
Chroma subsampling: 4:2:0
Bit depth:          8 bits

And, then, further down the output:

Color primaries:          BT.709
Transfer characteristics: BT.709
Matrix coefficients:      BT.709

No Color range seems to be specified.

I went on to check how my video displays on VLC. Same faint tint there.

Oddly enough, this was not the case when I played it on Windows Media Player, where my video background was pretty much identical to the background color of that original div.

Further tips as to what might be going on would be greatly appreciated.

10
  • It isn't an issue of filter but of color characteristics and range. Videos, due to legacy of analogue signals, have various standards on how to store color. Either AE hasn't correctly annotated how it's stored colors or it's done so incorrectly. Will need to see mediainfo readout of your file. Use View->Text mode.
    – Gyan
    Feb 20, 2017 at 8:10
  • @Mulvya Ok, thanks for the tip. What should I be looking for in the mediainfo output? Among other things, I see Color space: YUV , Chroma subsampling: 4:2:0 and Bit depth: 8 bits... Is this what I'm after?
    – m.a.a.
    Feb 20, 2017 at 11:41
  • No. Although those are related, especially the first two, the ones you're looking for are Color range Color primaries Transfer characteristics and Matrix coefficients
    – Gyan
    Feb 20, 2017 at 11:48
  • @Mulvya All set to BT.709
    – m.a.a.
    Feb 20, 2017 at 11:50
  • What about range?
    – Gyan
    Feb 20, 2017 at 11:51

2 Answers 2

1

This is a problem that drove me crazy...

Long story short; certain browsers; whether it's Chrome, Explorer, Firefox, etc, actually handle color profiles, embedded within the video file (such as color workspace), differently.

I believe if I remember correctly, Chrome uses Monitor Color, sRGB. Regardless of your video file's color profile/lack there of.

I ran into this problem consistently, and after a lot of testing, researching, my final conclusion is that there is no way to guarantee final color values of outputs when played within Web Browsers.

This also works backwards; because if you were to download the video file/rip using a rip tool (it very well might and include the color profile); which when played in AE or PPro would be recognized and applied; thus it would not match what you see in Chrome.

Your best bet is to make sure your Color Space is synced through Bridge, your monitor is calibrated, preferably with a spyder, but unfortunately, regardless of your file or your system, certain players; specifically browers; ignore coloremetry data; or worse, may convert or change your settings; with no work around. End users of course; you have no clue what they see... too many variables.

1
  • This also applies to JPG images for the web. To match color you need to make sure you save using the Save for Web option; and check Monitor Color, sRGB workspace for the profile. If you don't the image will look different the second you bring it into Chrome. Feb 21, 2017 at 19:29
0

One possible solution would be to upload the video, then sample it with a color picker and see what values it produces. Set your div to be the color you sampled. If you're on a Mac and have the developer tools installed, you can use Pixie to find the color of it on your local machine. You still run the risk that either the video or the background will render slightly differently on different machines or with different browsers. But that's true even in the best case.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.