Bits of .NET

🖌️ The Colors Looked Perfect Until the Moment You Exported

A design can look exactly right inside Photoshop and then shift noticeably – duller, more saturated, or just slightly off – the instant it’s exported as a JPEG, almost always because the document’s color profile doesn’t match the color space the export step (or the destination, like a web browser or a print vendor) is actually expecting.

🔎 The Problem

A design built in a wide-gamut color profile (Adobe RGB, or a camera-specific profile inherited from an imported photo) is exported directly to JPEG without converting to sRGB first – most web browsers and many downstream tools assume sRGB by default, so colors outside that narrower range get compressed or reinterpreted in a way that visibly shifts them from what was designed.

✅ Fix: Convert to sRGB Before Exporting for the Web

• Edit > Convert to Profile > sRGB IEC61966-2.1 (done once, deliberately, before export) permanently remaps the document’s colors into the space almost every browser and social platform assumes – this is different from just changing the profile label, since it actually recalculates the pixel values to look correct under that assumption.
• File > Export As has its own ‘Convert to sRGB’ checkbox, which handles this at export time without altering the working document itself – useful when the source file needs to stay in a wider gamut for print or other output, while the exported JPEG specifically targets sRGB-assuming destinations.
• For print output instead of web, the opposite applies – checking with the print vendor for their required profile (often a specific CMYK profile) and converting to that instead of sRGB avoids a similar color shift in the other direction.

⚠️ Why It Looks Fine Right Up Until Export

• Photoshop displays the document using its own accurate color management the entire time it’s open – so the shift isn’t something introduced by export mangling the file, it’s the color space mismatch becoming visible for the first time once something without Photoshop’s color management (a browser, an unmanaged viewer) renders it.
• This is worth checking whenever a design is assembled from mixed sources – a photo imported from a camera, a logo supplied by a client – since each asset can carry its own embedded profile, and the final export step is where any mismatch between them and the target color space finally shows up.