Color difference from Photoshop to CSS

Say I have a background image in Photoshop with a gradient that I slice so it will repeat horizontally across the page. The bottom would then blend to a darker shade which is just a background # value in CSS. If I use the dropper tool in Photoshop to get the hex value (next to #) then paste it into my stylesheet, the color never matches up. I then have to use another color tool to get the color at the bottom of the rendered image in the browser and use that.

I am using the Save for Web & Devices option and am saving it with the following settings:

PNG-8
Selective
No Dither
Convert to sRGB (checked)

What am I doing wrong? How do I get the colors to match up with the actual color in Photoshop? (the comp is set to RGB Color under Mode)

Are you seeing the difference when viewing the site in IE? I’ve found IE often renders PNGs incorrectly. If possible, try save the file as a JPG or GIF and see if it matches better.

Haven’t checked in IE. I’ve been using that latest version of Firefox on OS X 10.6 (Snow Leopard). The images should really be saved in PNG format, but I’ve tried every single thing (all settings for PNG-8 and PNG-24) and nothing makes a difference.

Is it a browser rendering issue or occuring at the file save stage?

If you open the PNG file you make and sample the bottom of that does it match the original hex value to expected to input or the “adjusted” value to make it look right?

At the least this would help to distinguish where in the process the change is happening.

It seems to be during the file saving stage. I opened the saved image in PS and the hex value is off quite a bit.

I tried copying part of the saved image then pasted it into the PSD (so I could take a screenshot to show you how different it is). A dialog box popped up and said the following:

What do I need to change?

Check your Photoshop Colour Settings (Shift-Apple K on mac perhaps Shift-Alt K on PC or look under the EDIT menu).

Even though you are in RGB mode your profile settings may be set to match your computer monitor calibration or set to generic settings. Your file looks like it is matching the sRGB profile but your settings for Photoshop may differ from that giving you the resulting colour shift. Try to keep all the RGB components in the same colour space and you should be right.

It may be that the Photoshop colours are okay but the DOCUMENT you started contains a different colour profile again. May pay to check this. You can check a document by looking at the settings while it is open. You can check overall Photoshop settings by checking when all documents are closed and selecting it from the menu. This will also set the default for any new documents you open from then on.

Here’s a screenshot of what came up after using the shortcut you listed:

This is with a fresh install of Photoshop CS5 so I haven’t changed any settings.

What should I pick?

Also, any idea where that dialog box is under the File Menu? I tried looking everywhere for something called “Color Settings” and I do not see it anywhere.

Okay looks like it is the document settings if this is a fresh install. You can see that the RGB mode is set to sRGB.

Under colour management policies you can switch the RGB version to Convert to Working RGB. This will force all incoming files into the sRGB colour space regardless of their own profile. Some conversion will occur but at least everything ends up the same.

Open your background image file and check the settings on that document. It may be that it has a different RGB colour space and that is where the weirdness is happening.

On a mac it is under the EDIT menu in CS3.

Slackr,

Thanks for all your help with this.

So I just closed everything and re-opened the PSD the designer gave me. Now I’m getting this:

Should I hit OK?

Yep, then save the file and it will remain in the sRGB colour space. Essentially all that has happened is the designer has used a slightly different colour space and this conversion will take his file and convert it to sRGB. Once you are operating with in that your background png files and hex values should all be consistent and much less of an issue.

Cheers

Slackr,

Just wanted to thank you AGAIN! :slight_smile:

I just re-saved my images and everything just automagically matched all of the HEX values in my CSS.

No prob, glad that it actually worked. nothing worse than solving a problem that doesn’t exist or trying stuff that makes no difference.

Glad to know that it all worked with your css too, these things can be totally frustrating.