Tell me more ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.
up vote 2 down vote favorite

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?

share|improve this question
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. – Dexter Huinda 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. – ssbrewster Jun 29 '12 at 8:55

1 Answer

up vote 1 down vote accepted

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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