Where the design community meets.
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.
Thanks for the detailed explanation Marc. I agree that design tools should update to address this behavior, and hope it happens soon.
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!
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.
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.
Just to improve the answer :)
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?
+1 — I'd also like to know this.
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.
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?
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).
Marc is the color wizard.
Where the design community meets.
Designer News is a large, global community of people working or interested in design and technology.