Colour management, part 3

I believe colour management is an essential feature for professional design tools — being able to rely on what you’re seeing when choosing colours, deciding on contrast, and assessing legibility is critical. The last two articles (part 1 and part 2), covered the basics of colour management. This article details the settings required for screen design in many popular design tools.

The assets you require and the platforms you’re designing for will likely dictate the best colour management approach, and the colour space you should be using.

If you’re designing a website, CSS and SVG are specified in sRGB, so your documents should be set up as sRGB. CSS level 4 will likely support more colour spaces. SVG is also likely to gain support at some point in the future. If you’re building an app that uses web tech, stick with sRGB for now as well.

If you’re designing an iOS, Android, or Mac app, you should probably also work in sRGB. There are situations where you may choose to, or be required to use a wider gamut profile like Display P3, but those are still fairly uncommon. If you do choose to work in Display P3, you’ll still need a full set of sRGB assets, making your app binary far larger (yes, Xcode can generate them for you for iOS and macOS, and yes, App Thinning helps). If you’re using code drawn elements, Android, iOS, and macOS support wide gamut profiles (support varies based on the OS version you require though).

Display P3 and other colour spaces will become more common, but the simple rule is: If you’re unsure, work in sRGB. Colour management issues can be incredibly difficult to debug, so it’s important to make a decision early, and ensure all team members use the same settings for their tools and documents.

Assign or convert? #

When changing the colour profile of a document, there are typically two approaches that can be taken — assigning a profile, or converting to a profile. They both have their uses, depending on the situation.

Assigning a profile to a document keeps the raw colour values the same (#ff0000 will stay #ff0000), but the appearance will change as the new colour profile is applied. Assigning just tags the document with the new colour profile. It’s like saying “this document is sRGB” without altering the contents of the document itself.

Converting to a profile does the opposite — the raw colour values will be changed, but the appearance will be the same, if possible. Some rounding and clipping may occur, depending on the source and destination profile. Converting to a profile reads, converts and writes every single colour value in the document. Colour profile conversions are destructive. It’s a good idea to keep a backup on the document before making a change.

System settings #

On a Mac, the Display preference pane in System Preferences contains a way to change the colour profile associated with your display. The setting doesn’t change what your display is, it changes what the system thinks your display is. You should leave it to Apple’s default setting (“Color LCD” or “iMac” or similar, at the top of the list), or use a calibration device. Messing with these settings is not advised.

I’d also recommend disabling Automatically Adjust Brightness, Night Shift, and f.lux as they can all affect display accuracy while you’re designing. Definitely disable True Tone as well.

Sketch #

Prior to version 48, Sketch was not colour managed. If you’re running an older version, please update. The current version of Sketch is colour managed, and it can be set up to work in sRGB or Display P3. By default, Sketch’s preferences are set to create new documents as “Unmanaged”. You don’t want this. Set it to sRGB or Display P3, depending on your needs.

I would recommend using sRGB as the default behaviour, even if you choose to work in Display P3 for some documents.

To assign a colour profile to existing documents, choose Change Color Profile from the File menu. If the document was not colour managed, the new profile will be assigned.

If a document is already set to sRGB or Display P3, you’ll be asked if you’d like to assign or convert the colours in the document.

It’s important to understand what the Save For Web option in the export sheet does, because the description inside Sketch is a little inaccurate. No EXIF data is ever saved, even if Save For Web is turned off, and there’s only one case where an ICC profile is included in the exported image.

When exporting PNGs from an sRGB document, if Save For Web is enabled, a gamma chunk is included. If Save For Web is disabled, an sRGB chunk is included. I would recommend disabling Save For Web when exporting sRGB PNGs from Sketch, because the sRGB chunk is a better description of the contents of the file. The sRGB chunk is 3 bytes smaller than the gamma chunk, so turning Save For Web off results in a slightly smaller file.

When exporting PNGs from a Display P3 document, if Save For Web is enabled, a gamma chunk is included. If Save For Web is disabled, an ICC profile chunk is included. I would recommend disabling Save For Web when exporting Display P3 PNGs from Sketch, because including an ICC profile is essential for Display P3 files (most browsers and platforms assume the image is sRGB if there’s no ICC profile).

Photoshop #

Photoshop is colour managed, and it can be set up to work in sRGB or Display P3. Even if you need to build Display P3 documents, it’s a sensible idea to still set sRGB as the default. To do this, choose Color Settings under the Edit menu, then ensure the working space is set to sRGB, and Preserve Embedded Profiles is selected for RGB documents. It’s also a good idea to disable Blend Text Colors Using Gamma (here’s why).

To assign a colour profile to an existing document, choose Assign Profile from the Edit menu. To convert to a colour profile, choose Convert to Profile from the Edit menu.

The Bjango Photoshop Actions contain actions for quickly converting and assigning to sRGB and Display P3.

When exporting Display P3 PNGs with Photoshop via Save For Web or Export As, ensure “Embed ICC profile” is turn on, and “Convert to sRGB” is disabled. I also tested exporting via Generator, and I do not think it saves images with ICC profiles, no matter which settings are used. So, Generator can not be used for Display P3 assets.

The settings for Save For Web and Export As are shown below.

Illustrator #

Illustrator is colour managed, and it can be set up to work in sRGB or Display P3. Even if you need to build Display P3 documents, it’s a sensible idea to set sRGB as the default. To do this, choose Color Settings under the Edit menu, then ensure the working space is set to sRGB, and Preserve Embedded Profiles is selected for RGB documents.

To assign a colour profile to an existing document, choose Assign Profile from the Edit menu. To convert to a colour profile, choose Convert to Profile from the Edit menu.

I do not think it is possible to save PNGs from Illustrator with ICC profiles, so it is unsuitable for exporting Display P3 assets. There are no colour management related settings in Export For Screens, so there is nothing to change if you’re saving sRGB PNGs. Save For Web does have a “Convert to sRGB” option, but that will have no effect if your document is sRGB.

XD #

Adobe XD is not colour managed, and there are no colour management settings.

Adobe probably has written more colour managed applications, and has more experience with colour management than any other company. It’s extremely disappointing there isn’t any colour management in Adobe’s main tool for interface design. I hope it comes soon. You can show support for colour management in XD by voting for the feature.

Affinity Designer #

Affinity Designer is colour managed, and it can be set up to work in sRGB or Display P3. The default RGB colour profile can be set in the color section in preferences.

To assign or convert a document to a colour profile, choose Document Setup from the File menu. The colour profile for the document can be found on the Color tab.

Affinity Designer’s export options are exceptional, with complete control over what’s saved. For sRGB PNGs, I’d recommend 8bit per channel, no metadata, and no ICC profile. For Display P3 PNGs, I’d recommend 16bit per channel, no metadata, and include an ICC profile. Requirements may change slightly, depending on the use.

Affinity Designer does exactly what the export settings claim to do. It’d be nice to be able to include an sRGB chunk for sRGB images, but that’s not essential.

Figma #

Figma is not colour managed, and there are no colour management settings. The Figma desktop app presents colours in the display’s profile — if you’re targeting sRGB, then documents will look too vibrant on a Display P3 screen (tested using Figma Desktop 3.5.3). Using Figma via Chrome (tested using version 64.0.3282.186) or via Safari (tested with 11.0.3) displays all colours correctly, but only if you’re targeting sRGB.

If you’re targeting Display P3, I do not believe it is possible to show those colours correctly. Figma is not colour managed when run in Firefox. There may be settings in Firefox that can improve the situation and match how it works in Chrome and Safari though.

InVision Studio #

InVision Studio is not colour managed, and there are no colour management settings.

Comparison #

As it stands, only three of the design tools tested have a complete sRGB and Display P3 workflow.

For the chart below, “sRGB canvas” means the app can display sRGB colours correctly on the canvas. “Display P3 canvas” means the same, but for Display P3.

“sRGB PNGs” means the app can export PNG images with the correct colours and an sRGB chunk, or no included ICC profile at all, because PNGs with no profile data are typically assumed to be sRGB. It’s very charitable to give an app a pass on this if it can’t display the colours correctly on the canvas, but that’s what I’ve done.

“Display P3 PNGs” means the app can export PNG images with the correct colours and an embedded Display P3 ICC profile.

The comparison only really scratches the surface — WebP exporting, image importing, bit depth and many other factors would be good to test and include, too. Given the all-or-nothing nature of colour management, partial support often doesn’t help. An entire pipeline from start to end is required.

As a whole, the industry is doing a pretty poor job of colour management for our tools. This has to change.

Published 15 Mar 2018.