I have an image with a linear gradient overlay (banner image on this page EDF Energy - Our Campaigns. I have set the RGB colour in CS4 to R: 29 G: 31 B: 79. However, when I save the file for web the colour darkens slightly as you will see on the site. I want to colours of the background and edge of the banner image to match exactly. Does anyone know how to fix this?

  • Save for Web has many file formats. Which one you choose has influence on the color. Could you be more specific? The goal should be to use the same setting as the previous file if you want them to match in any way.
    – KMSTR
    Jun 28 '12 at 16:55
  • Use JPG format with High Quality settings if you do not require transparency effect, otherwise use PNG-24. Jun 28 '12 at 19:26
  • Which RGB have you used?
    – thebodzio
    Jun 28 '12 at 22:33
  • Sorry meant to say that I used PNG-8 file format. The desired RGB is 29, 31, 79. The file I'm trying to match with is jpg so I'll try using that.
    – br3w5
    Jun 29 '12 at 8:55

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:

  1. Choose Edit → Color Settings and set the working space for RGB to Monitor RGB.

  2. 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.

  3. 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.

  4. Ensure View → Proof Colors is turned off.

  5. 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.