Color difference

JF0
JF0 used Ask the Experts™
on
I designed some web pages and graphics at work where I have a newer 24 in monitor. I was very happy with the designs and color but when I brought the work home the color was ugly on 3 different screens, one of which is a newer laptop.

I know that color can change between monitors and computers but this was fairly drastic every though all monitors support 32bit color settings. The oldest computer/monitor even showed the difference between a very dark color used in a jpg that was overlayed on a background color of the same value on the web page.

I am not a professional graphic designer so this is really frustrating, I don't know if my work computer is calibrated wrong or if my 3 computers at home are bad. Should I continue to design on my work computer or do my designs at home in order to get the best color for the most audience?

Are there colors beyond the short "web safe" list that I should use that will have less difference yet still allow for nice color selection and gradients? I really want my graphics and pages to be well represented across most screens.

I've attached one of the images. The worst color offender is the background of the text which should be a nice light brown/almond color but shows up a very ugly sewer green/brown. The blue is also a lot darker than viewed on my work pc and it is very hard to tell that the borders surrounding the blue are dark/brown mix, it really looks mostly black.

Any suggestions? How do the colors look for you?
ee.jpg
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2013
Commented:
JF0,

Since I can't see both the "right" and "wrong" colors, my comments are based on what I do see. The background to the text is a sort of muddy brown (I don't see any green tinge to it, though). The borders to the blue are clearly textured, with the darkest tones appearing black. The light-colored text is cafe au lait to almond-colored.

I suspect your work monitor is a LCD with a strong backlight, which is washing out a lot of the colors. When you view them on another monitor, they are dark and maybe muddy-looking.

You can use this site to test and adjust your monitor settings:
http://epaperpress.com/monitorcal/

You can also use the free Monitor Calibration Wizard to set your monitor:
http://www.hex2bit.com/products/product_mcw.asp

Cheers,
LHerrou
JF0

Author

Commented:
Thanks, I ran the calibration wizard and the display was worsened. However, my monitor does not have controls to adjust brightness and contrast which is one of the steps required.

What would cause a monitor to show the difference of an identical color between a jpg and css background color?
Most Valuable Expert 2013

Commented:
What's the monitor? Brand/model?

>> What would cause a monitor to show the difference of an identical color between a jpg and css background color?

A JPG can have it's own color profile, so when it is displayed, the monitor is displaying the image based on the color profile embedded in the image, but the CSS-based color is displayed in the native (monitor)-based colors. If they are different enough, the two won't visually match, even if sampling says they are the same color.
Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

JF0

Author

Commented:
My monitor is a Sharp ll-t19d1.

The monitor that shows the difference in the 2 colors that are the same hex is a dell e173fp.

Is there a way to remove the profile from the jpg?
Most Valuable Expert 2013

Commented:
Well, that monitor should have contrast and black-level control through an on-screen menu, and brightness can be adjusted via the arrow buttons.

As for removing the color profile, yes, you can with most graphics software, or you can use the JPGextra program (http://www.fieggen.com/software/jpgextra_get.htm). The free version allows you to strip extras like the color profile for 10 images per session, which should be fine for occasional use.
JF0

Author

Commented:
I adjusted my monitor settings to better match the web page but now I have noticed that opening the jpg I attached here in photoshop there is a green hue to everything, to the point where the blue is actually green. It looks blue in a browser or with windows picture viewer.

You can see the difference in the attached image.

Untitled-1.jpg
Most Valuable Expert 2013

Commented:
On my monitor, your original image is the same as your inset above (blue, not green).

It looks like your color profile is still off.
Most Valuable Expert 2013

Commented:
I meant ...in both my browser and Photoshop..., the image is the same as your inset.
JF0

Author

Commented:
Can you clarify, on your monitor the image in photoshop looks the same as the one in picture viewer?  
Most Valuable Expert 2013

Commented:
Correct, no green tinge at all, in either my browser or Photoshop.
JF0

Author

Commented:
ok im really confused then. Even looking at my screenshot I can see the difference. When I compare my screenshot in photoshop and picture viewer there is another hue of green on the photoshop view. I think I need to reinstall photoshop.
Most Valuable Expert 2013

Commented:
Before you do that, you may want to read your Photoshop version's Help File on color profiles. It may be that you can correct this without a full re-install
JF0

Author

Commented:
The reinstall helped with the photoshop color issue, I also got a well calibrated monitor now and overall I think the image appears closer to what I designed at work (I admit I can't recall exactly the color anymore after the long weekend). I re-saved the jpg without a color profile and also tried that program you mentioned but the color of the jpg is still different than the css color.


J, you are in excellent hands with iherrou giving advice. He is easily one of the best around these parts.

 A friend of mine went into a paint store wearing hunter's shooting glasses with yellow lenses. He forgot that he had them on, and spent a long time picking out the color paint that he wanted. On the way home, he took the glasses off. When he opened the paint, he was mad at the paint store for mixing the wrong color. The color that he was looking at was not what he remembered picking out.

Calibrating and profiling your monitor is the same way. Your monitor (and your printer) give you their best rendering of the colors that you specified with your computer. But looking at an uncalibrated monitor is like wearing colored glasses.

Many beginners think in terms of the color that they see is the color that the computer "sees" and want to adjust the computer so that it stops saving or printing the wrong colors. In truth, it's the other way around, and profiling is an attempt to give you a more accurate rendering of the actual colors that you're working with.

That's my two cents.

Commented:
A comment about "web safe" colors: Forget about them. They never worked well and are now completely irrelevant. Web safe colors only made sense in the last century when everyone had 8-bit (256 colors) color cards. As soon as computers with 16-bit cards shipped, all those supposedly safe colors shifted since the 16-bit color model no longer produced any of the web safe values (other than black, white, pure primaries & secondaries). Now that almost every system has 24-bit or higher color, you can once again display the web-safe palette--but why bother when you can also display any other of the 16.7 million colors just as accurately. There is no reason to limit yourself to the web-safe palette and hasn't been for years.
JF0

Author

Commented:
It seems like the biggest problem was the icc profiles embedded in the jpg files. I re-saved the files without the profile and the color is more consistent across other screens.

As far as "Web-safe", I understand what you are saying. Are there certain colors that should be avoided for better cross-screen representation? I'm starting to think that anything dark that is not black/gray or really light colors that are not white/gray. I'm starting to think that solid easy to interpret colors are better than say choosing a yellow that is so dark on the spectrum that it appears brown-to-black.
Commented:
All I can say is keep your palette simple, use more contrast than you think you need, and just accept that you can't exert much control. Light, neutral colors will suffer the most from color casts and brightness/contrast settings. It can be frustrating matching CSS colors to backgrounds in various image/binary file types. Different browsers on the same OS will give you different problems. I think you're doing the right thing by omitting profiles since very few browsers support them anyway.
I wish I could offer better advice. As a photographer and web designer, I'm concerned with color but I've learned the hard way not to lose much sleep over what people perceive on the web. I've seen subtle details I sweated over lost completely on other users' machines. The reality is that until your users are visiting your site on calibrated monitors and browsers that support profiles, they will all see different colors. The best you can do is put up test pages and try to view them in as many different browser/OS combinations as practical. If something really doesn't work, you'll see it on one or more of those.
Most Valuable Expert 2013

Commented:
I agree with everything bastianr said (also as a web designer and photographer).

JF0

Author

Commented:
Thanks for all the advice. I think I am getting things buttoned up here at work, so tonight I'll check everything from home and if if it looks good I'll close this question.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial