Color & Design7 min read
Color Spaces Explained: sRGB vs Display P3 vs Adobe RGB for Web & Print
Understand color gamuts, why vibrant colors look washed out on the web, wide-gamut Display P3 support on Apple devices, and ICC color profiles.
Color Spaces Explained: sRGB vs Display P3 vs Adobe RGB for Web & Print
Have you ever created a vibrant graphic in Photoshop only for the colors to look dull and washed out when viewed on a web browser? The culprit is a color space mismatch.
1. What is a Color Gamut?
A color gamut is the total range of colors that a specific device (monitor, camera sensor, or printing press) can physically record or reproduce:
- sRGB (Standard Red Green Blue): Created in 1996 by HP and Microsoft. It is the universal standard color space of the World Wide Web and is supported by 100% of monitors.
- Display P3 (DCI-P3): Developed for digital cinema and popularized by Apple across iPhones, iPads, and MacBooks. Display P3 covers a 25% wider color gamut than sRGB, particularly in intense neon greens and deep ruby reds.
- Adobe RGB (1998): Engineered for physical CMYK print production. Covers broad cyan-green ranges that traditional offset printing presses can ink.
2. Why Colors Look Washed Out Online
If you shoot a photo in Adobe RGB or Display P3 and upload it to a website without converting it to sRGB, standard browsers assume the image is sRGB. High-saturation color coordinate values are misinterpreted as standard values, making the photo look muted and grey.
3. Best Practices for Digital Creators
- Always export for Web as sRGB: Ensure your photo editor embeds the standard sRGB IEC61966-2.1 color profile.
- Use HEX & RGB Pickers: Inspect and extract exact digital color coordinates with the Lumino Color Palette Generator.