Why do colors appear washed out on macOS Chrome and Safari versus Firefox?

I'm using a new MacBook Pro 15" with macOS 10.13.4 configured with the default Color LCD color profile. I'm doing some graphic design work and noticed that all colors in Chrome and Safari appear "washed out" when compared to Firefox. The latter has more saturated/vibrant colors. And this happens to native HTML/CSS elements (i.e. not images only).

Here's a screenshot of the SmashingMagazine homepage with the comparison (Chrome on the left, Firefox on the right). Notice how the colors are more vibrant in Firefox (right):

If I change my display's color profile to sRGB IEC61966-2.1, then both Chrome and Firefox look the same.

Why is this? Any help is greatly appreciated.

Solution 1:

To Get Firefox looking like Chrome and Safari

By default, Firefox only applies color correction to images that have embedded color profiles. You can enable full color management to apply color correction to everything, including colors defined in CSS. Then it should look more like Chrome and Safari.

In about:config (type that in to the address bar), set gfx.color_management.mode to 1.

https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/3.5/ICC_color_correction_in_Firefox

Color Correction, Over Simplified

Monitors have different response curves. For example, the difference between #FF0000 and #FA0000 may be noticeable on some monitors, and not on others.

Color profiles contain the skews to compensate for this by altering the actual output, in an attempt to preserve contrast and overall accuracy of the intended appearance. They can be applied to monitors, printers, and other devices.

Many image formats support embedded color profiles; think of it boiling down to descriptors on how it’s supposed to look. If the system knows the inaccuracies of your monitor, it can combine that profile with the image’s profile to skew the output for the best possible reproduction.

When it comes to things without profiles, such as color values in CSS, some assumptions about intent must be made.

Let’s say your monitor does indeed produce a discernible difference between the two similar colors mentioned before. You use those colors in your CSS. The assumption is that your intent was to show the subtle difference. Some monitors out there may end up displaying the same color on the screen, despite the two colors being sent to them. Color correction alters the colors sent to the screen so a subtle difference actually is reproduced. If you wanted them to appear the same, you’d have just used #FF0000 and never bothered with #FA0000, right?

Digital Color Meter is aware of color profiles in use. This is why it gives different values over the same image across two different displays, and different values depending on what color space you’ve selected.