8

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):

enter image description here

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.

  • Colour management is a mine-field :/ Some browsers respect embedded profiles & some don't. The image you posted is in Display profile... which is not good. You should aim for sRGB if your intended target is web. Using your display profile in your workflow is not recommended. Calibrating your monitor would be a good start, rather than using generic profiling; otherwise you'll never know which was correct. As an example, let us know the intended RGB values of the top red bar. – Tetsujin Jun 14 '18 at 7:20
  • @Tetsujin in my example screenshot the top red bar has a CSS background color of #d33a2c. This value is the same in both browsers, yet with the same display color profile (Color LCD), Chrome/Safari show the color differently from Firefox. Regardless of whether my display's color profile is calibrated or not, I would expect the same CSS hex color code to display the same in Chrome, Safari and Firefox. My question is, why isn't this the case? As far as I know, there is no color management (i.e. color profiles) for CSS. – Ralph Jun 14 '18 at 15:41
  • It's not really regardless of your calibration & workflow.. it's probably because of it. I can't repro here on a calibrated setup. See i.stack.imgur.com/qdVpp.png captured from Safari left, Chrome right, with Digital colour meter floating on top. Colour is as you stated [within tolerance] on both, when viewed in sRGB. If I float the meter over that repro, which was screen-captured, cropped then saved via Photoshop then posted to imgur & viewed from Safari, it is still the right colour. – Tetsujin Jun 14 '18 at 16:07
  • @Tetsujin do the colors look the same for you between Chrome and Firefox? Chrome and Safari look the same for me, so that's not the issue. The issue is that all colors on any webpage in Chrome and Safari (and even Preview app) appear highly faded compared to Firefox. So it looks like Firefox is doing something differently. Maybe my "Color LCD" color profile is messed up? Or my Macbook's screen is defective? If I change my display's color profile to "Apple RGB" or sRGB, then everything looks consistent across apps. But isn't Color LCD supposed to be the correct profile for a MBP screen? – Ralph Jun 15 '18 at 3:55
  • Ugh, never usedFirefox before - absolutely miles off what it should be. No idea what they're doing to it. btw, the 'correct' profile for any screen is the one your colorimeter & software generates. The ones you get in the original list are guesstimates, no better. – Tetsujin Jun 15 '18 at 6:46
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.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .