Should designers choose sRGB or P3 colorspace?
Should designers choose sRGB, P3, or perhaps AdobeRGB? Why do colours look different in browsers compared to what we see in Figma or Illustrator? And what do all these different color profiles on my Macbook or laptop actually mean?
This is important because creating a brand identity requires consistency. When your colour settings are wrong, you’ll see completely different colours than the end user will.Â
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.Â
Why the difference in colors?
There’s two reasons.Â
One: 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.
Two: there are many different RGB options in Adobe software such as Illustrator. Choosing the one that matches what you’re seeing in Figma (or whatever you’re using) can be a challenge.
Choose sRGB when designing a website
In short, 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. Apparently, they do this to create a consistent color experience for everyone.
(which isn’t exactly the result because screens render colors differently based on their quality and settings, but anyway…)
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*
*I took quite some time to try to all and noticed these settings match the most with what you see in Figma and in Google Chrome & Safari.
If done right, what you see in all your different design software (photoshop, illustrator, figma) should look the same.
Choose P3 when designing a website
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.
What about AdobeRGB?
Apparently AdobeRGB was developed to help display CMYK values better. There are some CMYK values that fall outside the RGB 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.
Leave a Reply