23

Google Chrome rendering colors inaccurately

almost 6 years ago from , Interaction Design Intern @ NASA JPL

Anyone else having this issue? I am running the beta channel on macOS (61.0.3163.39). I noticed that Chrome is rendering all colors darker as of the latest update. Chrome used to render color correctly, along with every other browser except for Safari on macOS. Now it displays the same behavior as Safari.

And it definitely is inaccurate, since the colors specified in the code are not the colors rendered by the browser.

Here is an example:

23 comments

  • Marc EdwardsMarc Edwards, almost 6 years ago

    This is because prior versions of Chrome were not colour managed. The behaviour you’re seeing (things being darker) is correct, from a colour management point of view.

    And it definitely is inaccurate, since the colors specified in the code are not the colors rendered by the browser.

    If your display is sRGB, they will be the same. CSS and SVG colours are considered to be sRGB (unless specified otherwise, using some proposed CSS features).

    If your display is not sRGB (like the new MacBook Pros and new iMacs), then the colours rendered will be converted from sRGB to the display’s profile. That means the appearance is preserved, but the colour values stored in memory are not.

    This is a good thing! It means you can expect colours to look closer across different computers and different browsers. I’m not entirely up to date with what all the browsers are doing, but I believe Firefox can also be colour managed, but it’s off by default.

    There is one big caveat though: If you rely on sampling colours from the screen, then you may need to work out some other way to work. Sampling from the screen means you’re reading from the display buffer, that’s in the display’s colour profile, and usually 8bit int per channel for Macs (or 16bit int on wide gamut devices). This means there is a very good chance the sampled value will be clipped or rounded, even with the correct conversion. Basically, don’t sample from the screen. It’s just not a reliable way to get colours.

    You should expect all browsers to have this behaviour soon. All design tools need to do this as well.

    53 points
    • Ted McDonald, almost 6 years ago

      Thanks for the detailed explanation Marc. I agree that design tools should update to address this behavior, and hope it happens soon.

      1 point
      • Marc EdwardsMarc Edwards, almost 6 years ago

        Some are good now (if set up correctly). Illustrator, Photoshop, Affinity Designer, Affinity Photo, Pixelmator, and Acorn all handle things well, if you have the correct profile attached to the document.

        It does become a bit of a challenge when you need to not only understand the colour values, but also which profile they’re using. It can get pretty tricky.

        It’s definitely also worth noting that at one point Safari wasn’t colour managed (or to be more accurate, had all kinds of wild behaviour). This stuff has changed a lot over the past decade, but it’s all heading in the same direction, thankfully!

        4 points
    • Vlad Danilov, almost 6 years ago

      This is because prior versions of Chrome were not colour managed.

      Tagged images were color managed since 2011-2012, i.e. Chrome was not fully color managed.

      CSS and SVG colours are considered to be sRGB (unless specified otherwise, using some proposed CSS features).

      Previously, all browsers were rendering these color values as is, effectively tagging them with Display color space.

      Firefox can also be colour managed, but it’s off by default.

      Color management applied only to tagged images by default. Full Color Management is optional but not for long.

      This is a good thing! It means you can expect colours to look closer across different computers and different browsers.

      This ensures color consistency but not color accuracy as long as rendering pipeline is 8-bit. It is critical for soft gradients, which are now more likely to have banding issues.

      1 point
      • Marc EdwardsMarc Edwards, almost 6 years ago

        Yep, I agree with all that. The lack of detail in my reply was for brevity. You know I’m a big fan of higher bit depths. :D

        The OP was asking about CSS colours, which is why I skipped over ICC profile support in images in Chrome.

        2 points
    • Roland IllésRoland Illés, almost 6 years ago

      So does the recommendation that you shouldn't color manage your designs still hold up? Should I discard the color profile when I paste a screenshot in Photoshop?

      4 points
      • Andy MerskinAndy Merskin, almost 6 years ago

        +1 — I'd also like to know this.

        0 points
      • Vlad Danilov, almost 6 years ago

        The simple answer is yes. It's also backward compatible.

        It's safe to discard the profile if the working space is the display space. But on wide-gamut devices this breaks the above rule for untagged images. They will have a noticeable color shift.

        So the sane way is to either set the working space to sRGB and convert the screenshots from the display space to sRGB, or sacrifice the wide gamut and some color accuracy and just set the display space to sRGB in system preferences.

        0 points
      • Marc EdwardsMarc Edwards, almost 6 years ago

        So does the recommendation that you shouldn't color manage your designs still hold up?

        My article on that is 8 years old, and a lot has changed since then. Browsers were such a mess, and a lot of the macOS colour management policies were different. I really need to update the article, and probably write a couple more on the topic. It’s complicated, and still in flux.

        Stuff was so broken back then, that I was far happier working without colour management, on a known sRGB display with sRGB targets (iOS, Android, web).

        I think if you’re using an sRGB-like display, it can still be a good way to work, but it’s becoming an increasingly bad strategy.

        If you work on a Display P3 or Adobe RGB display, or you use a mixture of displays that aren’t sRGB, you don’t have much choice — you should assign the sRGB profile to your documents. For most of your design documents, anyway.

        Should I discard the color profile when I paste a screenshot in Photoshop?

        Sometimes. :P

        It’ll largely depend on what you’re checking, and where the screenshot has come from. As Vlad mentioned, if your screenshot is 8bit per channel, and opening it in Photoshop means it’s been passed through one or more conversions, there can be severe quality loss.

        If I’m checking the quality of a gradients and low frequency changes, then I typically open screenshots and remove the profile (with no conversion). We don’t yet have high bit depth screenshots in macOS, even though the window manager does run at higher bit depth on some Macs.

        If I’m just checking measurements, then it really doesn’t matter if the colours are incorrect. I try to be very pragmatic about how to handle this stuff.

        I typically assign an sRGB profile to my design documents now, but even then, there’s issues. It really sucks how complex this is. Saying “you need to understand colour management” isn’t a good solution. :(

        I wish our tools weren’t completely ignorant of the issues, or entirely based on print design. Neither strategy is a good one.

        tl;dr Yeah, you should probably just assign sRGB to all your screen design documents. And, you should probably never sample colours from the screen. If you need to work out the value of a colour, you’re best going to the original artwork file or code (and in that case, hopefully you’ll know which colour space it belongs to).

        2 points
    • Ryan Hicks, almost 6 years ago

      Marc is the color wizard.

      3 points
  • Ted McDonald, almost 6 years ago

    I figured out the issue. In chrome://flags, there is an option called "Color correct rendering." If enabled, the color rendering is changed. The beta channel flipped the setting on by default.

    3 points
    • Dirk HCM van BoxtelDirk HCM van Boxtel, almost 6 years ago

      Funny note; your screenshot, for me, had #2d72d9 as the actual rendered colour. So screenshotting disregards Chrome's colour rendering!

      3 points
      • Ted McDonald, almost 6 years ago

        It depends on the monitor color profile. If I copy the screenshot into Sketch and use the eyedropper tool, the color will be #2d72d9, because I am not using an sRGB profile. If I use Sketch eyedropper to select the screenshot colors in the browser, then the color shows as #2767D4.

        If you use the native system eyedropper, or even chrome inspect tools, you will see that the rendered color is actually inaccurate.

        0 points
    • Andrew-David JahchanAndrew-David Jahchan, almost 6 years ago

      Oh man, I didn't even think to check the flags, thanks!

      I've been experiencing this issue too lately so I had to keep opening Safari to check the colours. I figured Chrome would fix it in the next update, but it was getting so tedious.

      2 points
    • Marc EdwardsMarc Edwards, almost 6 years ago

      Given the changes in Android O, the colour management in iOS and macOS, and the way the entire industry is going, you should expect this to be on for all users in the future.

      2 points
  • Dirk HCM van BoxtelDirk HCM van Boxtel, almost 6 years ago

    Errrr... worst use of JPG compression, ever.

    1 point
  • Val V, almost 6 years ago

    Just enable this option http://d.pr/i/jhAsRw in chrome://flags and all will works as expected =)

    0 points
  • Giovanni Galbiati, almost 6 years ago

    Your color picker is displaying the value of the color rendered by your screen that, for modern macs, has a different color space (P3 usually). If you set your color picker to display values in sRGB you get the correct one as you can see here.

    0 points