JPEG Color Swatches

TH
Posted By
Tom_Hanser
Apr 9, 2004
Views
710
Replies
12
Status
Closed
Does anyone have to create color swatches for a web site, that are supposed to accurately represent a product color?

Matching the color itself isn’t hard in PhotoShop, but once you compress it as a JPEG (no matter what the Quality Setting is) the color shifts dramatically.

Well, this isn’t anything new, of course. Slice up a web site design in PS, and set some slices as a GIF and some as a JPEG, and you’ll see a remarkable difference in color between the two images.

Anyone have any experience making JPEG color swatches, and how did you get around it? What steps did you take to make it?

I’m not just talking about a solid color fill here, but shooting a blob of color (like paint, makeup, or whatever) and keeping that as a master file, and then altering it in PS for each product.

Thanks!

Master Retouching Hair

Learn how to rescue details, remove flyaways, add volume, and enhance the definition of hair in any photo. We break down every tool and technique in Photoshop to get picture-perfect hair, every time.

MM
Mac_McDougald
Apr 9, 2004
You’re only considering your own system (and is it calibrated to begin with?).

You can’t control what any other monitor will display, and believe me, they are all over the spectrum.

I suppose you could put a gray scale onsite and exhort your users to adjust their monitors to match it. This assumes YOU have indeed produced a color image that adheres to the same.

I’ve read of some sort of product color controling server side thingie somewhere about a year ago. Used Active X control to "calibrate" end user monitor or somesuch. Was going to be pricey, and don’t know if it ever got off the ground.

Mac
L
LenHewitt
Apr 9, 2004
Tom,

set some slices as a GIF and some as a JPEG, and you’ll see a remarkable
difference in color between the two images.<<

Well now that’s hardly surprising, is it, when GIF only supports 256 colours and JPG supports 24 bit colour?

As Mac says, any thoughts of accurate colour on the web (at least on a Windows machine) is still a distant pipe-dream, although you may find that using sRGB as your RGB working space or setting your proof colours to Monitor RGB will give you a far better chance.
TH
Tom_Hanser
Apr 9, 2004
It’s not my monitor, or the end user monitor, that I’m worried about.

It’s the JPEG compression that screws up my color. I have to compensate in PS for the compression. And it never looks good.

And creating and changing layers, layer blending, and sampling the color correctly, and consitently.
RW
Rene_Walling
Apr 9, 2004
It’s the JPEG compression that screws up my color

Please explain,

Do you mean you have a colour shift when "saving for Web"

JPEGs compression generally creates artifacts, but doesn;t shift the colours of an image.
MM
Mac_McDougald
Apr 9, 2004
Yup.
Make a rectange, fill with a color.
Or just a 400×400 image with color background, whatever.

Use Info on color swatch before and after SFW.

I just did, using shade of red.
Saved as .psd,and jpeg using SFW.
Both are exactly same: r:196 g:18 b:18

Sounds like you have more of a color management issue between orginal and then SFW (which is not color managed).

But still, that same thing can look like anything on someone’s else’s machine.

Mac
TH
Tom_Hanser
Apr 9, 2004
I’m getting some weird color shifts, when I SFW. Regardless of Quality setting, too.

I match a color in PS (I have layers built, like a solide fill set to color blend over my original grayscale blob). I’m in RGB mode, too.

I’ve never noticed such a shift in color before. Drag your SFW window to the side, and compare it to the file itself, and you’ll see what I mean. Unless it’s this machine here at work.

My color settings are off?

But still, that same thing can look like anything on someone’s else’s machine.

That’s for sure. But on my own machine here, I see a shift when I SFW.

On the Clinique web site, they have some really nice swatches for their makeup products. No, I’m not into makeup, but I have to pay the bills.

I was wondering how they did those…

Thanks for everyone’s help.
MM
Mac_McDougald
Apr 9, 2004
You’ll have to actually *measure* the color in the before and afters to tell. Use info palette.

If colors measure same, but look diff, then you simply have color matching profile prob. Your orig file may be color managed, but SFW strips any color profile info out.

and of course other apps aren’t color managed at all, like web browser.

Mac
L
LenHewitt
Apr 9, 2004
Tom,

I’m getting some weird color shifts, when I SFW<<

Absolutely normal if using an RGB working space other than sRGB or if your monitor RGB is distinctly different from sRGB.

Did you read the whole of my previous post?

you may find that using sRGB as your RGB working space or setting your
proof colours to
Monitor RGB will give you a far better chance.<<
RW
Rene_Walling
Apr 9, 2004
I’m getting some weird color shifts, when I SFW. Regardless of Quality setting, too.

Has nothing to do with the qualiuty setting.

The save for web preview is not a colour managed one, since the web is not colour managed. The rest of Photoshop is colour managed and shows you the propoer colour.

Possible solution: convert your image to sRGB before saving for web

This problem crops up frequently on the forum, a search with "Save for Web" and "colour shift" should give you a bunch of threads.
GH
Gernot_Hoffmann
Apr 10, 2004
Tom,

JPEG "rounds" colors by so-called quantization.

E.g.: NewColor=17*Round(OldColor/17)

This is simplified but essentially correct.
The NewColor is the de-compressed OldColor.

One practical solution:

Make backgrounds in HTML table cells by small JPEGs
(16×16 pixels) by repetition, using the same quality
settings. JPEG background = Table cell color.

The accurate reproduction of RGB colors by JPEG is
simply impossible (I´m talking only about the numbers).

The error is randomly distributed in photos, therefore
not obvious.

Best regards –Gernot Hoffmann
TH
Tom_Hanser
Apr 12, 2004
Thanks to everyone’s suggestions.

I’ve taken over a new Windows machine here at work, and I’ve now noticed (after Len suggested it)that the color settings are set to Adobe RGB.

Setting this to sRGB results in an exact color match (well, it sure looks close to me) when using SFW.

Thanks again.
GH
Gernot_Hoffmann
Apr 12, 2004
Tom,

of course, working space sRGB. Nevertheless: JPEG cannot convert RGB colors correctly by numbers.
This example shows patches and the original sRGB-numbers. <http://www.fho-emden.de/~hoffmann/colorshift.jpg> (about 180kB).

It was on purpose compressed with LOW quality.
Use sRGB in Color Settings in PhS, load and measure in
clean areas.

Best regards –Gernot Hoffmann

The file will be removed after one week by the garbage
collector.

How to Master Sharpening in Photoshop

Give your photos a professional finish with sharpening in Photoshop. Learn to enhance details, create contrast, and prepare your images for print, web, and social media.

Related Discussion Topics

Nice and short text about related topics in discussion sections