I don't know about this, but I feel compelled to say a few words about colors.

1. you can't accurately specify colors for web use. Unless you and all your visitors use Pantone calibrated monitors or the equivalent, you can not know how colors will render on another monitor. Since probably something like .01% of the people out there are on Pantone calibrated monitors, you can't know. The most clear difference is between the default gamma on PCs and Macs. I know a graphic designer (who actually has a correctly calibrated monitor) who can't use a major airline's website because the text in the drop down lists is black on black on her Mac - she's had to memorize the links.

2. You can't count on Mac or PC users to leave their gamma settings alone, so that will change the way colors look too.

3. Ambient lighting can change the way colors appear.

4. The most recent stat that I saw is that 8% of males have some sort of color vision impairement. More commonly it is said that 2% of white males are color blind. Color blindness is less common among other ethnic groups and relatively rare among women (the common forms are sex-linked recessive).

So the bottom line is
- even if you get it to look the same on your monitor in every browser, you have no idea how other users will see it

- don't depend on color to convey meaning.

I say don't *depend* on color; I don't say not to *use* color. My graphic designer friend says that the thing to do is use colors, but make sure the grey levels are different. The quick way to check? Print it out on a black and white printer. If rendering it in black and white like this causes you to lose meaning, then you are certainly losing visitors on the web too.

That method isn't failsafe since, again, you don't know how colors will be rendered on other monitors, but it does mean that someone whose monitor has a similar gamma, contrast, etc, but who is color impaired, will still be able to read your pages.

Cheers,

Tom

Hello tesla,

Are you using colors from the websafe palette? I haven't had too much experience testing with RGB, opting for hex instead. I get good results across browsers with the colors I use so variance has not been an issue.

Have you veiwed the page on another system as well? If so, are the variances still there? And last, but far from least... what browser versions are you using?

If NS & IE are rendering different using the same RGB values, there is not too much you CAN do except switch to colors that don't display at variance, or accept what you have. Going to the extremes of "adjusted" RGB values and seperate style sheets would be overkill.

What color values were you using?

My graphic designer friend says that the thing to do is use colors, but make sure the grey levels are different. The quick way to check? Print it out on a black and white printer. If rendering it in black and white like this causes you to lose meaning, then you are certainly losing visitors on the web too.

Great advise! And a good tip as well.

The web safe color palette is no more "web safe" than high or true colors, it is obsolete.

Mozilla and IE look the same for me, Are you sure you are comparing apples to apples - same monitor, same color depth, etc?

web safe color palette is no more "web safe" than high or true colors

How's that? If your using millions of colors that a users card can't process, your colors will become dithered. Not everyone is using 24-bit cards yet...

(edited by: madcat at 2:06 am (utc) on May 23, 2002)

added ::

Don't you think color is somewhat analogous to the nature of the Web. You design the best you can for all screens -- if that means using a common ground when it comes to color so be it. I would definitely be happy to learn that I could drop such a limited selection though;)

The web safe palette was designed when everybody was using 256 colors.
"To jump to the current situation, about 3-4% of people surfing the net are looking at 256 colors, 52% are looking at high color (16,000 colors and 45% are seeing true color (24 or 32 bit, 16.7 million colors)." Graphics cards will map true colors to nearest high color.
Other variables in later hardware and software make the web safe palette not safe even for the target audience. There are a couple pages on the subject on my site.

Great advise! And a good tip as well.

Thanks. I have to fess up, though. This is a hot-button topic for me because I am one of those who is color impaired. You would not believe how many websites (not to mention print newspaper graphics) are off limits to me because of this fact alone. If that last stat I found (8% of males are color impaired), designs that are dependent on colors exclude as many users as designs that exlcude NS4x, but they do so permanently until such time as it is possible to upgrade the color receptors in our eyes.

Anyway, there's no such thing as a 100% "safe" color until good technology exists for detecting user gamma, color depth, contrast, ambient lighting, and physical characteristics.

Cheers,

Tom

Ok, Here is the code:

<table border="8" cellpadding="2" bordercolordark="#663300" bordercolorlight="#996633" cellspacing="1" bgcolor="#FFFFFF">

In IE, the 8 pixel wide border is Brown
In Netscape 6.2 the border is Gray
This is with both browsers on the same system/screen side by side.

Okay, that makes sense now... Those are propriety values specific to MSIE (unless I am mistaken!).

Netscape displays table-border colors differently, rendering a "3D" effect.

Try setting your table border colors using CSS.
<style type="text/css">
table {
border:8px solid;
border-right:#630;
border-bottom:#630;
border-left:#963;
border-top:#963;
background:#fff;
}
</style>

NN4 chokes here, so you may want to try applying the border styles to a <div> that you can "nest" your table into. Then you would use no border values for your table and leave the <div> to display the eye candy.

Experiment and see what works best.

You're exactly right, papabaer - bordercolorlight and bordercolordark are IE only.

The rest of the discussion is very important, however. Color variations are a big struggle, although there certainly is more consistency cross-browser in recent years.

An old thread comes to mind: Only 22 Websafe Colors [webmasterworld.com]

The difference between 16-bit color and 24-bit color is significant and designers need to check both.

The W3Schools browser stats [w3schools.com] show 50% using 16-bit color last month - but most designers use 24-bit (or 32-bit) and they miss what happens to their creations on half the monitors that will view it.

Even more challenging, the designers I know need a kick in the nether regions to check their work at 16-bit (it all seems so "tecchy").

This is an important thread, and you nailed it Tedster when you said we all need to be much more aware of how our chosen colors render.

I've pretty much fallen into using "less-safe" colors for elements that will not clash if there is much of a display variance, while sticking to the more basic, "tried n' true" colors for more important areas.

ergophobe brings up a VERY important point, beyond basic colors: viewability for the color impaired. Tom, I'd like to hear more of your experiences. I feel a new thread coming on...

- papabaer

I've been a consultant to a "largish" web development where the designer originally created a stunning look on 24-bit monitors.

However, view it at 16-bit and there was highly visible color banding and background color mismatching to the point of big ugly boxes around elements that were supposed to "float".

That background color mismatch is the worst offender. You see it when you define a hex bgcolor and assume it will match the inline image. At 16-bit, it often won't - even if there's a gif color defined to the exact same hex number as the bgcolor.

The best workaround I've found is to create a small one-color gif and use it as a tiled background image. That way, whatever shifts happen to colors at different color depths happens to both the background image and the inline image - and it stays consistent cross-browser as well.

It is great to hear all of these views on color usage. I guess when speaking about the 216 web safe colors, web safe actually means safer than using millions of colors...

Let me throw you a quick quote from Mr. Zeldman (and this is with statistics in mind), "Monitors limited to thousands of colors (16 bits) might seem to display realistic color, but it is never the actual color specified by the web designer. For mathematical reasons, colors shift slightly "off" in the 16-bit color space."

*This means that until everyone is up to speed there is no sure fire way to produce the exact color intended by the author; you have a better chance in having your site rendered exactly the way you intended by using the web safe palette.

There's some good reading and links about colour-deficient vision at Visibone [visibone.com...]

"In other words: There are no shared colors between high color (15- or 16-bit) and true color (24-bit) depths. 24-bit is the full palette, and this is the palette we use with design programs such as Photoshop. 8-bit is a subset of that 24-bit palette. The old 216-websafe palette is a subset of the 8-bit palette, identified for browser and operating system compatibility.

But the 15-bit and 16-bit palettes are not subsets of the 24-bit palette; they are entirely distinct palettes. So no matter which color you choose when you're designing (excluding black and white), you cannot choose a color that exists both in the 24-bit palette and in either the 15- or 16-bit palettes.

(from Webmonkey, Death of the Websafe Color Palette [hotwired.lycos.com])

What this means is that your "web safe" colors will look right in true color, but wrong for half your audience. You are just as likely to have successful matches with a random color. Two solutions:

1, keep colors separated, expecially between gif and code rendered colors.
2, Test, and tweak the color by small increments until it looks ok in both true and high color.

I like and use tedsters approach, use a small bg image for color.

Some colors are more sensitive than others, particularly browns and tans.

Printing a page in black and white is a crude way to get an idea if the color impaired can read it. In general, for some folks, greens, and even more so reds, look grey.

Dark bg colors and low contrasts are also something to watch, as when monitors age they tend to darken - I have seen sites that look fine to me become unreadable on older monitors.

Test is the main thing.

(edited by: tedster at 5:05 am (utc) on May 23, 2002)

Reading over that old thread I mentioned above, I noticed that the statistics for color-depth have not budged in a year and a half. 50% used 16-bit in Sept 2000 and it's still 50% here in May 2002.

That seems odd to me.

Tedster, I wonder if that figure corresponds with user screen resolutions as well:

800x600 (51%) (theCounter.com/April 2002)

It seems that many users never alter the default color-depth or screen resolution settings on their PC's. Just "plug it in and go!" - ya think? ;)

I feel a new thread coming on...

Good idea, since this whole thing I started has little or nothing to do with what tesla was asking about :)

I've started a new thread at
[webmasterworld.com...]

Tom