image color in jpeg doesn't match backround color in web page

[Martin_...@adobeforums.com]

I made a simple panel in photoshop and used the #number for the color selected to fill one side of the panel in my CSS code. When the page is rendered there's a very slight difference between the panel and the background which I expect to be exactly the same.

Am I doing something wrong?

Thanks

[J_Ma...@adobeforums.com]

Is your working space sRGB?

[Curvem...@adobeforums.com]

This is normal behavior for Photoshop, or any color managed application.
There are ways to guard against it. The root of the problem is that jpgs
are color managed by Photoshop, while the web background is not.

You may be able to do an end run around the problem by using a transparent
png image instead of a jpg. If you want to stay with a jpg image, the
simplest solution is probably to turn Color Management off in the drop-down
in PhotoShop's Color Settings (accessed via ctrl-shift-K). Another
possibility is to assign (not convert) your image to your monitor profile.

It is also highly advisable to use sRGB as your working space. Do not
embed a profile if it is important that the jpg's colors match the non
color managed objects on the web page.

If you do embed a profile - for example the sRGB profile, then color aware
browsers will convert your jpg images to the user's display profile, and
the person viewing your web page may see a mismatch between your carefully
prepared jpg and the background.

It is conceivable that certain color managed browsers will default your
image to sRGB, and perform a color conversion even without a profile, in
which case you will see a mismatch no matter what you do. If that happens,
you may be able to do something tricky, like use a scaled png or jpg image,
filled with your background color, as your background.

The key point to remember is that gif images, and numeric web color values,
are not color managed by color aware browsers, but jpgs are. Including an
embedded profile in the image means that the browser is free to convert the
colors in a jpg image. Result: different color numbers.

[Martin_...@adobeforums.com]

Many, many thanks.

Martin

[Debbie...@adobeforums.com]

I just had this same problem and wondered if anyone else had experienced it. The solution was what was really weird for me. When I entered color number #333333 in the "all colors" palette and saved the image, it was slightly different when viewing on the web site. I knew this wasn't right because I had done several others at a previous time. After trying several things that didn't work, I decided to go back in and switch to "Only Web Colors" and try again. This time my web background and my image are a perfect match.

I'm happy that it works, but I'm confused as to why there is a difference. I would think within Photoshop that typing #333333 would give me the same color either way.

Can someone explain?

Thanks,
Debbie

[Gernot_...@adobeforums.com]

I'm referring strictly to the OP's headline:

'Image color in jpeg doesn't match backround color in web page'.

The source of a JPEG may have a background color AABBCC hex.
The table cell background on the web page is as well AABBCC hex.
The JPEG background appears slightly different to the table
cell background. IMO, this has nothing to to with color management
for almost all browsers. The reason: JPEG compression modifies
colors slightly, which is not obvious in normal photos.

A practical solution: make a 16x16 pixel image with color
AABBCC hex and compress it with exactly the same settings as
the original JPEG. Then use the 16x16 pixel JPEG as table cell
background by automatic repetition.

Best regards --Gernot Hoffmann

[Debbie...@adobeforums.com]

I think you missed the point of MY question. Mine did not match when I was using the "all colors" Color Picker. However, when I had "Only Web Colors" selected in the Color Picker and saved my JPEG, the same #333333 matched my web site table background.

I found that to be odd. I understand that JPEGs are compressed, but I do not understand why it makes a difference whether I have "Only Web Colors" selected if I enter a specific color number that falls in both groups.

It works, I just don't understand the difference.

Debbie

[John Joslin]

Gernot said "I'm referring strictly to the OP's headline".

[Debbie...@adobeforums.com]

I did see that. I suppose I should have posted a new topic, but I thought Martin (the OP who posted his question in November) might be interested in reading my post if he was subscribed to this thread since this was the same problem he had. I thought he might be interested in how I fixed my problem. And, I was merely trying to understand why that worked. Gernot's post did not answer my question, and I had already posted a solution to the original question. I posted again so that someone might explain why it worked and answer MY question. I'm sorry to have bothered anyone.

[Gernot_...@adobeforums.com]

Debbie,

I think you had just good luck. I should have written
'JPEG modifies MOSTLY colors slightly' (sometimes not).

About the Web-safe colors: these are outdated. JPEG uses
normally 8 bit-per-channel truecolor. JPEG doesn't ever
use the Web-safe palette (opposed to GIF and PNG-8, where
this is optional, in PhS called 'restrictive').

Why does JPEG eventually modify colors ? A didactical example:
Original colors for instance R1=68, R2=94
Encoding: R1'=Round(68/17)=4, R2'=Round(94/17)=Round(5.53)=6
Decoding: R1"=17*R1'=68, R2"=17*R2'=102
R1 is not modified but R2 is.
The division by numbers like 17 is essential for JPEG.

Best regards --Gernot Hoffmann

[Debbie...@adobeforums.com]

Hi Gernot,

Thank you for the explanation. I have an understanding of most of that, but I may have to do a little reading. :)

I do like your idea of just creating your background cell to ensure that the color matches.

I'm going to test some other colors for fun to see if I get similar results with any of the others. It frustrates me when something just works and I don't understand why. I like to understand why.

Thank you again.
Have a great day,
Debbie