This article was originally posted as a Twitter thread as a part of my Crash Course series.

🌈 sRGB or P3? What even are they? Let’s talk about Colour Profiles and Colour Management

Crash Course #2

To talk about colour profiles, first, we need to touch on colour space.

You may have seen these intense charts before. These graphs depict the visible colour spectrum that humans can see:

A colour profile describes the range (gamut) of colour that can be shown.

sRGB covers colours you’re used to seeing on the web and on computer screens in general.

Display P3 colour space was created by Apple and was derived from a similar profile that has been used by the cinema industry for decades.

Display P3 has a wider gamut and it can represent more colours, especially vivid reds and greens.

By selecting a colour profile in our design tools, we’re making sure that the colours we’ve selected in our documents will more accurately match the intended output.

Think of it as an ingredient, we’ve given the amount (#FFBB9A) and now we’ve specified the type (grams, kg).

Now… the fun part…

A colour that is described as sRGB can also be described as Display P3 — #FF0000 in sRGB is #EA3323 in Display P3.

However, this doesn’t work the other way as #FF0000 in Display P3 is outside the sRGB range:

SO! What the hell do we use?

Simply, If you’re designing a website then your documents should be set to sRGB.

iOS, Android, or Mac apps should also work in sRGB as you’ll need a full set of sRGB assets anyway.

If you’re working with 4k+ TVs or photos, then using P3 can produce richer, more saturated colours than sRGB.

If you do this then use 16bit and export images in .png format.

To design with Display P3 you’ll also need a wide colour display (most modern laptops are fine).

All-in-all, be wary and understand what colour profile you’re designing for.

If you copy-paste colours from one profile to the other rather than converting them, they’ll look either too vivid or too dull in your design tool/app.

As the saying goes: When in doubt, use sRGB.

What if I want to design for both profiles?

You’re in luck! There are 2 web-based solutions we can use:

• Media query that can test the range of colours supported by the user agent and the output device
• Colour space value

Both methods can reference srgb, p3 or rec2020.

Now for the love of all that is good, go and apply a God damn colour profile in your design tool (if it has the option) — just don’t leave it unmanaged 😅

Thanks for listening!

This was a super diluted intro to colour profiles.

Colour Management is an extremely complex topic, so I highly recommend you check out Marc Edwards’ 3-part series on it. He’s done an amazing job at breaking everything down: https://bjango.com/articles/colourmanagementgamut/