Question

Every time I design websites in Photoshop, I slice up the elements I want to bring into my html page. I am experiencing a problem where the css-ruled background colors vary from the same color saved in photoshop. Consider this example:

There is a square div with a background color of #080808. In photoshop, I slice up an image that will go inside that div. Instead of saving a transparent PNG, I save it as a JPG.

Somehow, when I save, the color in the jpg is a bit off from the background color of the div. Either:

A) when I save the files, photoshop is encoding some kind of color profiel that changes the true color. When I save for the web, the “convert to SRGB is checked”

or

B) My color settings in photoshop aren’t on the right setting so when I choose a color, that will not be the actual saved color.

Any ideas?

Answer 1

Is there any reason why you’re saving it as a jpg instead of an alpha png? How were you saving it as a jpg? did you do “Save AS” or “Save for Web & Devices?” I recommend using alpha png instead, so it can blend seamlessly on the css bgcolor.

For color profile in photoshop, go to “View” -> “Proof Setup” I normally choose “Windows RGB”

Also make sure you’re working in RGB mode. “Image” -> “Mode” -> “RGB Colors.”