I'm a 3D artist and I recently started working on animations for websites. Now, there's usually a slight shift in colours when I export my animations from After Effects, but this shift is very slight (as in rgb(0,0,0) vs rgb (0,0,1) and is hardly noticeable when I upload them to the website on my windows machine (using Chrome/Firefox). However, there seems to be quite a lot of shift in colour when the client views them on their Mac (using Safari/Chrome), and it is very highly noticeable. Is there any way to ensure minimal colour shift across devices? Any help in this regard would be highly appreciated.
For reference,
- Video export is in h.264.
- When I pick colours using an extension on my browser, the difference is of 1 point on the blue channel, and is hardly noticeable.
- We're using a simple tag on html for playing the video.
- I've already tried exporting to other formats (webm, jpeg sequence, png sequence) but h.264 has produced the least shift in colours while still being optimised. I've also tried using different browsers to check the colours, but the results are consistent across all browsers which is why I think this is a Mac vs windows issue (or Safari).
So far, I've tried exporting the video in multiple formats and have zeroed in on some effort settings that gives the best results for web. The colour shift is very negligible when viewing on Chrome/Firefox on my windows machine. From what I understand, it could be an issue with the way Safari handles videos or the video format I'm using, but the client has tried using Chrome on their Mac too with no change in results.
Attaching screenshots for reference, Safari on Mac Chrome on Windows
