<p>This is a problem that drove me crazy...</p>

<p>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. </p>

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

<p>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. </p>

<p>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. </p>

<p>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. </p>

CC BY-SA 3.0
2017-02-21T19:29:14.810Z
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.
McFlySoHigh
CC BY-SA 3.0
2017-02-21T19:27:07.510Z
2017-02-21T19:27:07.510Z
McFlySoHigh
<p>One possible solution would be to upload the video, then sample it with a color picker and see what values it produces. Set your <code>div</code> 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.</p>

CC BY-SA 3.0
2017-02-21T03:09:58.830Z
2017-02-21T03:09:58.830Z
user1118321
<p>Retitling and reediting, after a few tips from <a href="https://video.stackexchange.com/users/1871/mulvya">Mulvya</a>.</p>

<p>I've got a <code>div</code> on my blog, with background color set to <a href="http://www.color-hex.com/color/83d3c9" rel="nofollow noreferrer">#83d3c9</a>.</p>

<p>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 <code>div</code>, it might "blend in" kind of seamlessly.</p>

<p>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.</p>

<p>Following Mulvya's advise, I checked my file by means of mediainfo.</p>

<pre><code>Color space:        YUV
Chroma subsampling: 4:2:0
Bit depth:          8 bits
</code></pre>

<p>And, then, further down the output:</p>

<pre><code>Color primaries:          BT.709
Transfer characteristics: BT.709
Matrix coefficients:      BT.709
</code></pre>

<p>No <code>Color range</code> seems to be specified.</p>

<p>I went on to check how my video displays on VLC. Same faint tint there.</p>

<p>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 <code>div</code>.</p>

<p>Further tips as to what might be going on would be greatly appreciated.</p>

CC BY-SA 3.0
2017-02-20T08:10:35.843Z
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](http://www.mediaarea.net) readout of your file. Use View->Text mode.
Gyan
CC BY-SA 3.0
2017-02-20T11:41:30.643Z
@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.
CC BY-SA 3.0
2017-02-20T11:48:06.353Z
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
CC BY-SA 3.0
2017-02-20T11:50:33.137Z
@Mulvya All set to `BT.709`
m.a.a.
CC BY-SA 3.0
2017-02-20T11:51:37.333Z
What about range?
Gyan
CC BY-SA 3.0
2017-02-20T12:09:37.267Z
@Mulvya I see no such entry.
m.a.a.
CC BY-SA 3.0
2017-02-20T12:15:56.917Z
Not been set, then.
Gyan
CC BY-SA 3.0
2017-02-20T12:18:30.437Z
@Mulvya What does that mean in practice?
m.a.a.
CC BY-SA 3.0
2017-02-20T12:31:26.823Z
Youtube will guess the range. So, I don't think it's that. Does the video when played locally in a player look correct?
Gyan
CC BY-SA 3.0
2017-02-20T13:04:01.490Z
@Mulvya Hm... Now that you mention it, VLC seems to be messing up the color somewhat. The background-color of the video looks kinda greyed out. Just a little bit. Oddly enough, this is not the case in Windows Media Player, where the color looks pretty much identical to the `div`.
m.a.a.
<after-effects><youtube><color><vlc>
Why is YouTube and VLC making a slight but noticeable mess of my video background?
m.a.a.
# Why is YouTube and VLC making a slight but noticeable mess of my video background?

(Asked by: username_0 on 2017-02-20)

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.

**Tags:** after-effects, youtube, color, vlc

> **Comments:**
> **username_1**: 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](http://www.mediaarea.net) readout of your file. Use View->Text mode.  
> **username_0**: @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?  
> **username_1**: 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`  
> **username_0**: @Mulvya All set to `BT.709`  
> **username_1**: What about range?  
> **username_0**: @Mulvya I see no such entry.  
> **username_1**: Not been set, then.  
> **username_0**: @Mulvya What does that mean in practice?  
> **username_1**: Youtube will guess the range. So, I don't think it's that. Does the video when played locally in a player look correct?  
> **username_0**: @Mulvya Hm... Now that you mention it, VLC seems to be messing up the color somewhat. The background-color of the video looks kinda greyed out. Just a little bit. Oddly enough, this is not the case in Windows Media Player, where the color looks pretty much identical to the `div`.  

---

## 2 answers

### Answer by username_2 on 2017-02-21. Score: 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.

> **Comments:**
> **username_2**: 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.  

---

### Answer by username_3 on 2017-02-21. Score: 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.


---

