: Colour of gradient overlay changes when saving for web and devices in Photoshop CS4 I have an image with a linear gradient overlay (banner image on this page EDF Energy - Our Campaigns. I

@Ravi4787994

Photoshop's default settings make matching RGB colours in images with colours in code near impossible. But, it's easy if you change a few settings. Here's what to do:


Choose Edit → Color Settings and set the working space for RGB to Monitor RGB.
If you’re using Photoshop CS6, click More Options and turn off Blend Text Colors Using Gamma, because it changes how non-opaque text is rendered. It should already be off, but if it’s not, turn off Blend RGB Colors Using Gamma as well.
Open a document and choose Edit → Assign Profile, then set it to Don’t Color Manage This Document. This must be done for every single document you work on.
Ensure View → Proof Colors is turned off.
When saving files with Save For Web, ensure Convert to sRGB is turned off. If you’re saving a JPEG file, then also turn off Embed Color Profile (there are some cases where you might want this on for photos, but chances are you’ll want it off for interface elements and icons).


The most important point is the last one. Convert to sRGB destructively changes the colour profile of your image from the document profile to sRGB, altering the values of each pixel.

More detail can be found here: Colour management and UI design

Please note: The instructions above are for Photoshop CS6, but CS4 is very similar. Illustrator is very similar as well.

Vote Up Vote Down