Why are background gradients oversaturated?
I noticed that on my new computer, backgrounds created in CSS with the background-image property are oversaturated.
In the example, there's a square with a background color that is the same as the start and end colors of the gradient of the body element behind it.
On my screen, the background is more saturated than the square. This does not happen in Chrome or Safari, where everything looks like the less saturated square.
What I've tried so far:
Checked with the same Firefox version on my MacBook. The background color gradient was rendered the same as the solid background (however more saturated than in Safari and Photoshop).
Disable hardware acceleration. This had no effect.
Restart Firefox in safe mode. This had no effect.
Enter a value for gfx.color_management.display_profile: the path to the color profile that my iMac shows in ColorSync Utility>Profiles>Computer>Displays>iMac. This had no effect.
Change gfx.color_management.mode from 1 to 0 and restart Firefox. All yellow on the linked page looks more saturated than in Chrome and Safari, but the background gradient is rendered in the same color as the div with the solid background. The same happened after changing the setting to 2.
Interestingly, one could argue Chrome and Safari render the colors undersaturated, because when I create the color in another program, it looks identical to the rendering in Firefox. However, I would assume it would be beneficial to have color management activated and in that case, the background gradient should not look different.
I have attached an image that shows the effect on my display.
How can I get internally consistent color rendering with Firefox color management enabled?
Modified by Geelman
Chosen solution
Okay, that helps me understand. So, when you have color management enabled, the background-color in Safari and Firefox, and linear-gradient in Safari match, and the linear-gradient in Firefox is the odd man out. I've attached an annotated excerpt from your screenshot.
This seems to be covered by a bug filed nearly exactly 5 years ago for gradient filles, and related to another one filed more recently:
- Bug 880271 - Inconsistent color management
- Bug 1453262 - lineargradient in canvas renders to full monitor color gamut instead of limiting to sRGB as specified by color management settings
- About Bugzilla:
I'm not seeing progress there, so it may stay broken for quite a while yet.
Read this answer in context 👍 1All Replies (8)
Hi, Firefox likes up to date Video Card Drivers with no errors for one. Not that I see errors in yours but there is no date showing.
The other thing is Firefox loves great coding and will not let things slide by as other browsers do, which according to W3C they are not suppose to. W3C.org (World Wide Web Consortium) in charge of standards and practices and future development of web pages and web browsers make the rules on code. Mozilla Firefox follows these rules.
So check your code : HTML https://validator.w3.org/ CSS https://jigsaw.w3.org/css-validator/ and https://validator.w3.org/i18n-checker/ and http://mobile.css-validator.org/
Please let us know if this solved your issue or if need further assistance.
Geelman said
Change gfx.color_management.mode from 1 to 0 and restart Firefox. All yellow on the linked page looks more saturated than in Chrome and Safari, but the background gradient is rendered in the same color as the div with the solid background. The same happened after changing the setting to 2.
It sounds as though Firefox is not compatible with your monitor profile for some reason, since the problem occurs when an image is eligible for color management. Perhaps it is not supported, or perhaps the settings in Firefox aren't quite right.
This thread discusses all of Firefox's color management settings and behavior that I know about: Colors inconsistent/inaccurate.
I should emphasize that the problem occurs with CSS background gradients rendered by the browser. The issue does not present itself with JPG images that may or may not be color managed!
I see that the image was not uploaded with my question. I'll try to attach it with this one. The image shows: At the left: the test page rendered in safari At the right: the test page rendered in Firefox, with the square having a less saturated (probably correct) color and the background more saturated.
Pkshadow said
Hi, Firefox likes up to date Video Card Drivers with no errors for one.
I have the latest drivers that Apple provided with macOS High Sierra 10.13.5.
So check your code
Thanks for pointing out though that maybe there was the mistake, so I checked it using the links you provided. The code is fine.
Geelman said
I should emphasize that the problem occurs with CSS background gradients rendered by the browser. The issue does not present itself with JPG images that may or may not be color managed!
Perhaps there is a unique color management problem with linear-gradient. ???
The image shows: At the left: the test page rendered in safari At the right: the test page rendered in Firefox, with the square having a less saturated (probably correct) color and the background more saturated.
I'm not sure I understand this image. The square seems to have a thick border and a different color in the center. I'm viewing the image on a non-profiled Win7 LCD panel, so not the best case scenario for color fidelity...
jscher2000 said
I'm not sure I understand this image.
Sorry, I should have made clear that the border and drop shadow are Firefox window as macOS shows it. The left window, underneath the shadow, is Safari's. At the right it's Firefox. As you may be able to see, the square has a less saturated color whereas it has the same hex code as the start and end color of the gradient behind it.
Chosen Solution
Okay, that helps me understand. So, when you have color management enabled, the background-color in Safari and Firefox, and linear-gradient in Safari match, and the linear-gradient in Firefox is the odd man out. I've attached an annotated excerpt from your screenshot.
This seems to be covered by a bug filed nearly exactly 5 years ago for gradient filles, and related to another one filed more recently:
- Bug 880271 - Inconsistent color management
- Bug 1453262 - lineargradient in canvas renders to full monitor color gamut instead of limiting to sRGB as specified by color management settings
- About Bugzilla:
I'm not seeing progress there, so it may stay broken for quite a while yet.
Thank you jscher, for the solid overview of the problem in your answer. I guess I'm just among the lucky few with a display with a gamut wide enough to let the bug present itself.