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. If you’re using code drawn elements, Android, iOS, and macOS support wide gamut profiles.
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. Design systems should include a target colour space for the entire system, or on a per colour basis.
Assign or convert? #
Many design tools associate a colour space for an entire document. 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 System Settings contain a way to change the colour profile associated with your display. This setting often doesn’t change what your display is, it changes what the system thinks your display is (a subtle, but very important difference). 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 and Night Shift as they can affect display accuracy while you’re designing. Definitely disable True Tone as well.
Apple’s Pro Display XDR and some MacBook Pros feature a setting that controls the colour space for the display. This setting actually does change the behaviour of the display, as well as what the system thinks the display is. Apple refers to these as “reference modes”, and it’s worth noting that it works differently to how macOS typically handles the colour profile setting in System Settings. You’ll typically want to leave these with Apple’s defaults, too.
Figma #
Prior to August 2023, Figma was not colour managed. Figma’s colour management is far from perfect, and there are scenarios where the colour management they do have will not work correctly, like when running in Firefox with the default settings.
The current Figma desktop app is colour managed, and it can be set up to work in sRGB or Display P3. Figma’s default document colour profile can be set via Preferences › Color Profile. This setting only applies to new documents that are created. To change an existing document, ensure you have no layers selected, then click the small arrow to the right of the document name in the tool bar.
Existing Figma documents prior to this change will be unmanaged, and will need a colour profile to be set. Changing a legacy document’s colour profile will apply the profile, where the appearance may change, but the colour values will not change.
When testing the Figma desktop app’s colour management, I found it to be incredibly buggy. The appearance on the canvas was correct, but image previews in the properties panel, colour on the home tab, tab hover previews, and in other places clipped or converted Display P3 colours. The only correct red in the image below is the portion that’s on the canvas (a wide gamut display will be needed to see the differences).
Also, copying and pasting properties between sRGB and Display P3 documents doesn’t convert colours. With these issues in mind, it’s difficult to trust Figma’s colours, and it doesn’t meet the requirements for level 4 colour management (being able to correctly handle sRGB and Display P3). Hopefully the situation improves over the coming months.
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.
To assign a colour profile to existing documents, choose File › Change Color Profile. 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 turned 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.
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.
This article focuses on design tools that might be used for software design, but it’s worth mentioning that Affinity Photo and Affinity Publisher seem to share the same rendering abilities and settings as Affinity Designer, and can therefore both be used to edit sRGB and Display P3 content.
Continue reading: Colour management, part 4
This article was significantly updated in August 2023. The 2018 version is available, if you’re interested.
Published 15 March 2018.