Should designers choose sRGB, AdobeRGB or P3 colorspace?

Should designers choose sRGB, P3, or perhaps AdobeRGB? And why do colours look different in browsers compared to what we see in Figma or Illustrator?

This is important because creating a brand identity requires consistency. When your colour settings are wrong, you’ll see completely different colours in your design tools compared to what your end users see.

Here’s an example of how different two renders of the same RGB value can look. The left one is Apple RGB in Illustrator, the right one sRGB in Figma.

You don’t want this. You want each piece of software to display the exact same color.

You don’t want a PDF export to look different than what your design tool showed you.

You don’t want your website tool look different than what Figma showed you.

Let’s fix this.

The short answer on P3 vs sRGB vs Adobe RGB

Designing for web? Pick sRGB.

Designing for app? Pick P3.

Working with CMYK: Pick Adobe RGB.

What causes the difference in colors?

Color difference happen when two pieces of software (A PDF viewer vs your design tool, for example), use different color spectrums. sRGB is a color spectrum. P3 is as well. P3 contains some colours that are not available in the sRGB spectrum.

You can imagine what happens when you pick a pretty bright color in P3, and open it in a piece of software (Chrome for example), that does not support this pretty bright color. Right, it looks for the nearest option available in sRGB. Less pretty.

Browsers convert your pretty designs to sRGB, so when you’ll design stuff in Apple RGB or Display P3, it will be converted back sRGB when viewed online by users.

So what’s causing this? You’ve not picked the right color spectrum in your design tool.

Choose sRGB when designing a website

If you’re designing for web, use sRGB (not Adobe RGB or Apple RGB, these are different colour profiles). Most browsers convert your pretty designs to the somewhat limited sRGB color space anyway. They do this to create a consistent color experience for everyone.

How do I design in sRGB? Set your Figma color space to sRGB, and your Adobe software to sRGB as well. Not Apple RGB, not Adobe RGB, but sRGB IEC61966-2.1*

If done right, what you see in all your different design software (photoshop, illustrator, figma) will look the same.

Choose P3 when designing a app

If you’re designing an app, chances are the user has a device that supports P3: use it and set your design software to P3.

Choose AdobeRGB when working with CMYK

AdobeRGB was developed to help display CMYK values better. There are some CMYK values that fall outside the small sRGB spectrum. To solve this, Adobe RGB was introduced. However, with low adoption of this color space, it’s not really helpful if you’re designing for websites.

Should designers choose sRGB, AdobeRGB or P3 colorspace?