Diagnosing common colour management issues

When working with colours, it can be common for their appearance to change unexpectedly when viewed in different design tools, or when moved from a design tool into production code. Colours may become too vibrant, or too dull, not matching how they looked when you originally chose them. Why is that?

The most common reason for colours to shift is because they were chosen in one colour space, and they are now being displayed in another colour space, without being correctly converted. The two most common colour spaces in software design are currently sRGB (standard gamut) and Display P3 (wide gamut). A lot of colour space conversion issues involve sRGB and Display P3. Knowing that helps quickly diagnose and fix problems.

Colours look too dull #

If the colours you’re seeing in the final app or website look duller than when you chose them in your design tool, there’s a good chance you chose the colours in Display P3, and now they are being presented as if they’re sRGB.

The image below shows an example of how this might look. Please note that it’s a wide gamut image, so if you’re viewing this article on a standard gamut display, the red swatches may look the same. The reds will also look the same in the current version of Firefox (91.0.1).

An image of two red colour swatches. The right colour swatch is duller.

This can happen if:

  • You have a Display P3 or wide gamut screen.
  • Your design tool is not colour managed, or is set to use Display P3.
  • The colour values are copied out of your document without being tagged Display P3.

If that’s what has happened, there’s a few potential solutions. Tagging the colours as Display P3 in the app or website code should get them looking how you intended. Please note that this is well supported for iOS, macOS and Android apps, but is more experimental right now on the web.

If you’re using Sketch, Illustrator, Photoshop, or Affinity Designer, another solution is convert the Display P3 colours into sRGB values. Start by assigning a Display P3 colour profile to the document, then convert the document’s colour profile to sRGB. This is a destructive operation, so please do it on a copy of your document. Please also note that sRGB has a smaller gamut than Display P3, so when converting to sRGB, some colours may be clipped and look duller.

Sketch’s document colour profile can be set via the Document Settings window, under the File menu.

Sketch’s Document Settings window.

If you’re using Figma or Adobe XD, things are a little more difficult. Figma and XD are not colour managed, so there is no way to assign or convert profiles for documents. I recommend setting up Figma so the canvas is displayed as sRGB, which helps a little, if you’re working on sRGB designs. It’s an app-wide setting just for the computer you’re making the change on, so other people viewing the document may see different colours.

ColorSync Utility can be used to convert individual values from one colour space to another. ColorSync Utility is in the Utilities folder inside every Mac’s Applications folder.

The calculator tab in ColorSync Utility.

Colours look too vibrant #

If the colours you’re seeing in the final app or website look more vibrant than when you chose them in your design tool, there’s a good chance you chose the colours in sRGB, and now they are being presented as if they’re Display P3. This is the exact opposite problem as the previous example.

An image of two red colour swatches. The right colour swatch is more vibrant.

This can happen if:

  • You have a Display P3 or wide gamut screen.
  • Your design tool is set to use sRGB.
  • Your colours have been tagged as Display P3, or you’re viewing the design in a non-colour managed environment.

If your colours have been tagged as Display P3 in the app or website code, change them to be tagged as sRGB.

If you’re viewing the design in a non-colour managed environment, like older versions of Firefox or the current version of Adobe XD, there is no solution. If you’re viewing the design in Figma, the solution is to set up Figma so the canvas is displayed as sRGB. This can happen if an sRGB Sketch document is imported into Figma, and you’re viewing it on a screen that’s Display P3.

Interesting facts #

All greyscale values are the same in sRGB and Display P3. This is because the white point, black point, and transfer curve of both colour profiles are the same.

Sampling colours from your screen is generally a bad idea, because it typically involves two colour space conversions, which can result in clipping and rounding errors. If you’ve sampled colours from your screen and noticed the values are slightly incorrect, this is probably why. However, many design tools avoid the double conversion when using the eyedropper tool directly within their canvas.

Further reading #

This article is intended as a quick cheat sheet to diagnose and solve colour management issues for designers and developers of software. If you’d like to know more about colour management, please read colour management, part 1.

Published 19 August 2021.