Over saturated colors in Safari

Questions
,
1

Hi everyone,
I’ve noticed that the colors on my website appear more saturated when viewed in Safari compared to Chrome. This difference is quite noticeable, if you have both Safari and Chrome, you can see it here: https://madebyyuma.com
I personally prefer the less saturated version in Chrome. Is there anything I can do to make the colors match more closely?
Thanks!

2

Nice site, “planet of the apps” is great! :smile:

What versions of chrome and FF are you using? There’s not much of a noticable difference in colors here, To put it to the test which one do you think is which out of the two?

image
image1394×748 44.8 KB

3

Hi, thanks for getting back to me so quickly! The issue is actually with Safari, rather than FF - I’ve attached some screenshots below.

To answer your question, here are the browser versions I’m using:

  • Chrome: Version 117.0.5938.92
  • Safari: 17.0

Here’s the screenshots as well!

Frame 2
Frame 2715×1393 150 KB

4

There shouldn’t be any difference in color between the two browsers here, but I do see the same issue here. Could you create a simpler example to reproduce the issue, for example a single texture or model in a CodePen or CodeSandbox?

And - is this on macOS Sonoma?

5

Hi, thanks for your reply. I just realized that this may be an issue affecting Safari in macOS Sonoma.
I tested a random link from the three.js homepage, and it had the same saturation issue. For example: https://jesse-zhou.com

6

Hi Duck…
Wow, what a beautiful work :slightly_smiling_face:

7

Hmmm, here’s pretty broken test case:

https://threejs.org/examples/webgl_test_wide_gamut.html

Probably won’t see much here without a display that supports “Display P3” (most modern Macs have this), and ignore the three.js logo for now, just focusing on the color.

  1. Chrome: Left = muted sRGB, Right = vivid Display P3 (correct)
  2. Firefox: Left = Right = muted sRGB (fine, Firefox does not support Display P3)
  3. Safari: Left = Right = vivid Display P3 (not intended!)

It looks as if Safari is incorrectly evaluating sRGB colors on the left side as Display P3… That’s got to be a new regression in macOS Sonoma, I think. This example worked well in Safari just a few weeks ago!

EDIT: Filed 262429 – REGRESSION (Safari 17): Incorrect color management in WebGL, out of gamut display

1 Like
8

That’s interesting… Thanks for your help with filing a bug report! Fingers crossed it’ll be resolved soon!

9

Thanks, glad you liked it!