Hey there, everyone!
Me, too, in 2020, am struggling to deal with profiles in web images/video, especially for social media. I have a client that one of his brand palette colors is #064C54. After a lot of research assuming CSS colors as a standard, I’ve found out that either using a non-color managed document or using an sRGB document on Photoshop (then outputting it to, say, a JPG file) will both output this color exactly like the CSS color so for their social media posts I’m using sRGB as a standard.
However I recently began creating small animated movies, also for their social media platforms. I make some of them on Premiere and some on After Effects, depending on the complexity of animations. I always use Media Encoder to render them. In Premiere, as I don’t have the option to choose a color profile, I noticed when I opened the video file on VLC, it reports a Rec. 709 embedded profile. In comparison to CSS colors, a solid that on Premiere was filled with color #064C54 will look off when using the outputted video file to the pure CSS, to the non-color managed JPG and to the sRGB JPG. If I open this video file on Chrome and use its eyedropper tool it reports the #074B56 color.
The same happens on After Effects. There, I created a background solid filled with #064C54 and it doesn’t matter if my composition is set to “HDTV (Rec. 709)”, “Rec. 709 Gamma 2.4”, “sRGB” or isn’t color managed the outputted video file shows exactly the same behavior: Chrome reports that color as #074B56. VLC doesn’t report an embedded color profile like on Premiere-outputted videos.
What is going on? How can I be sure these animations will carry the exact same color to the outputted video files? I’d really like to understand more about this subject.