Firefox Messing up Colors - Solved

Just published a new site:

Everything looks great on Safari, mobile. etc. But the latest version of Firefox is playing havoc with colors. The top bar that’s “coral” comes up as fire-engine red. This is the only browser I’m having issues with.

Any suggestions on why the Fox is being fussy about color?

@producerguyaz, I’m also seeing that red in Safari & Chrome.
Could you take a screenshot of what you see on the Sparkle canvas?..

Hello.

I have an old web safe color code table: coral = #FF7F50
Fire engine red is not on it. Which color code do you have set?

Mr. F.

@producerguyaz : here’s what I found on the net:

“Firefox is a fully color managed browser, but unfortunately that capability is enabled by default only for images tagged with ICC color profiles.”

(https://cameratico.com/color-management/firefox/)

The text describes how firefox is handling colors and has also a work-around, but that’s only working in that browser where the settings are changed:

————————

How to enable color management in Firefox and fix oversaturated colors

By default, Firefox only enables color management for images tagged with ICC color profiles.

All other page elements and untagged images are rendered on the full monitor color gamut, leading to inaccurate and over-saturated colors, specially on wide gamut displays. Read more about it on our browser color management guide.

In order to enable and properly configure Firefox color management for all images and page elements, according to the W3C specification, follow the steps below.

Enable it on the Firefox advanced configuration

Type in about:config on your Firefox address bar.

Use the filter field to search for color_management.

Update the following fields:

gfx.color_management.mode

Set to 1 to enable color management for all rendered graphics.

The default value of 2 enables color management only for tagged images, so all page elements and untagged images are rendered in the monitor full color gamut, leading to oversaturated colors.

gfx.color_management.enablev4

Set to true to enable ICC v4 profile support.

There’s no need to specify the monitor ICC profile manually as it’s read automatically from the operating system.

Restart Firefox.

————————

The screenshots show the before-after of the settings, left is firefox, right is safari.


1 Like

Appreciate the deep info.
So to keep this from happening to the general public I need to specify web-only colors in the palette in Sparkle. Makes sense. I’ll need to play with that and test it.
Thanks again.

Got it fixed; the “web safe” method did the trick. Thanks again for the assist.