Colour Profiles Explained: sRGB, Display-P3, and Why Exports Look Wrong

Why images exported in Adobe RGB or P3 look washed out in browsers, how ICC profiles actually work, and the one-click fix for consistent cross-device colour.

At a Glance

A colour profile (ICC profile) is a lookup table mapping numeric RGB values to specific wavelengths of light on a calibrated display. The three colour spaces in everyday use are sRGB (the universal web standard, ~35% of human-visible colour), Adobe RGB (~50%, common in print workflows), and Display-P3 (~45%, used by Apple and modern wide-gamut displays). Web images must be exported in sRGB to render consistently. Adobe RGB files read as sRGB appear washed out and greenish. Always use 'Convert to Profile → sRGB' before web export in Photoshop/Lightroom; Figma exports sRGB by default.

What Is a Colour Profile and Why Does It Matter?

A colour profile (formally an ICC profile) is a translation table that maps numeric RGB values in a file to specific wavelengths of light on a reference display. Without a profile, the value (255, 100, 50) is just three numbers. It could render as any of thousands of different reds depending on which colour space the software assumes. The profile is the contract that makes colour reproducible across devices. MDN's <a href="https://developer.mozilla.org/en-US/docs/Glossary/Color_space" target="_blank" rel="noopener noreferrer">colour space glossary</a> explains the formal definition.

  • <strong>ICC profile</strong>: standardised colour translation table (International Color Consortium)
  • <strong>Colour space</strong>: the gamut (range) of colours a profile can represent
  • <strong>sRGB</strong>: the web standard since 1996; ~35% of human-visible colour
  • <strong>Adobe RGB</strong>: ~50% of human-visible colour; common in print workflows
  • <strong>Display-P3</strong>: ~45% of human-visible colour; Apple's standard since 2015

Why Do Images Look Washed Out in Browsers?

The most common colour bug: a designer exports from Photoshop with Adobe RGB as the working space, without converting to sRGB first. The browser reads the numeric values as sRGB, but they were calibrated for Adobe RGB's wider gamut, so saturated colours appear muted, and greens and cyans take on a slight green-yellow cast. The image is not wrong; the profile contract has been broken between export and display.

  • Designer works in <strong>Adobe RGB</strong> (wider gamut than sRGB)
  • File exports <strong>without profile conversion</strong>
  • Browser interprets numeric values as <strong>sRGB by default</strong>
  • Saturated colours map to <strong>lower-saturation sRGB equivalents</strong>
  • Result: <strong>washed-out, slightly green-yellow cast</strong>: especially visible in skin tones and brand reds

More from The Drop Feed