Slashdot Mirror
Destroying The Myth Of The Web-Safe Palette
curmudgeon42 writes: "The folks at Webmonkey have developed a new test of the Web-safe color pallette. The results of their experiment suggest that there are only 22 colors that work across all browsers, platforms, and color depths. The article also includes a good explanation of how the different color depths operate, and some interesting strategies for dealing with the greatly diminished amount of Web-safe colors." The authors are both senior designers at Razorfish. You might not guess it from visiting some of the worst sites on the Web, but some designers are both interested in making their pages look good to all (read "most") users, and in avoiding the problems of relying on proprietary plug-ins. If your words, artwork or photographs end up on the Web, you should read it.
This gets really frustrating. I used the GIMP to design an old home page of mine using "Web-safe" GIFs. Then I took a look at it on a really nice monitor, and the colors were just horrible.
The real problem here is the customers who insist upon complete control. They think "publishing," and somehow think that they have ultimate control over all things, and thus ultimate control over how it is presented to the viewer.
The web is a different medium. You don't take radio rules and apply them to TV, and vice versa. What works well for glossy color magazines won't work well for an indie newspaper.
I'm still fighting battles with folks. The latest here is the use of the corporate logo. The brand-identity weenies complain that there has to be one inch of whitespace around the logo, and the logo can not appear any smaller than certain dimensions, and it has to appear in the correct colors.
One inch of white space? Sure, on what size monitor?
Unfortunately, with Netscape 4.61 on an HP-UX TrueColor display (visual), 7 of the 22 really safe colors display GIF-BGCOLOR mismatches. Of course, some of the supposedly non-safe colors may work OK on my display, but if you're trying to be truly cross-platform, the number is reduced to 15 safe colors.
What really bugs me recently is not color mismatches, but sites which have some sort of horizontal bar with many repeating vertical color streaks. It looks really ugly and I've seen it on a number of sites, so it seems to be more of a browser problem. Perhaps it's CSS that Netscape 4.x doesn't understand correctly?
Your right to not believe: Americans United for Separation of Church and
OK, this is somewhat off-topic, but it's a good story and it's sort of pertinent.
I was on a Boston to New York shuttle flight that gets stuck on the runway for 3 hours with no explanation. Worse, I'm sitting in front of three idiot consultants from Razorfish who spend the whole time talking loudly and incessantly. Remarkably, not one word of it resembled any productive activity in the slightest. "So, I conducted a series of group discussion sessions to quantify how they establish their procedures." "But, Bianca, how did you formulate the framework for evaluating their paradigms?" I was thinking back to the Slashdot article where a client sued Razorfish for delivering a shoddy site and wondered whether these clowns had worked that project.
My favorite line - Bianca is irate because a client asked her for some concrete bit of information: "Can you believe that? Hello? I'm an Information Architect, not a Knowledge Engineer!"
---------
0 - black
1 - white
Reminds me of an old TV technician joke: What does NTSC stand for?
Never Twice the Same Color (prob. referring to the inevitable drift of a analog tint control)
---
They already said that the palette for 256-colour displays was drawn from a pool of 16,776,216 colour.
Actually the 'classic' VGA palette is 256 out of 262144 (6 bits per color).
When True Color cards came out, ATI came up with CoDe (color depth Extension) which was truly 256/2^24. Others soon followed.
So it's even worse: you got the 256 color drivers that support 8bpp palettes and the older ones that only go to 6bpp.
---
Besides the web-safety limitations of color selections, web designers should also be cognizant of what visitors who are color-blind will see (a subject near and dear to my heart). Webtechniques has a great article on this subject. Particularly interesting is their description of how to simulate color-blindness in order to view your own design efforts.
"If I have seen further than other men, it is by stepping on their glasses." - Michael Swaine
The authors of this article don't seem to realize that 16-bit color is 15-bit color. As a brief primer:
Similarly, 15/16-bit color is three 5-bit channels and a 1-bit padding/alpha channel, yielding 32768 colors, not 65536.
This (and some other inaccuracies in the article) cast some doubt as to how much the authors really understood what they were saying. For example, the web-safe palette still does protect you from dithering, and that's important.
I hate whoever invented this stupid thing. Yes, it allows you to make sure some colors match up on low-end displays. It made sense when most of the world was browsing at 256 colors. But now, the COMMON CASE is a high-color display without color dithering! If you think minor color mis-matches look bad, take any photograph and dither it to the "web-safe" palette in photoshop or the gimp. Horror! I've seen far too many web sites which dither everything to the web-safe palette, the designer thinking that it will make everything look "right" on all displays. This article shows that it (except a very small subset) doesn't even make everything look the SAME on all displays.
Designers have a hard time learning new tools and techniques (ever seen a web site designed by a designer who does classic media?)... this habit is one of the worst.
Is there something wrong with my Web Safety? Should I upgrade my version of Lynx to get all 22 colors?
Carefree highway, let me slip away on you.
Gamma kinda goes like this, perception of differences isn't based on an absolute difference, but a percentage different. I can feel the difference between one ounce and two ounces much better than I can feel it between 30 punds and 30 pounds 1 ounce. The absolute difference is still 1 ounce, but the percentage is radically different. The perception curve is based on an exponential, and that exponent is named gamma.
The percieved color difference between 0x00 and 0x33 is radically different between 0xCC and 0xFF. You actually want a perceptually equidistant color space, not mathematically. Ever wonder why dark gifs look so bad? because there is too much spacing (perceptually) between colors at the bottom end.
BS, programmers who don't understand color theory or are too lazy to program it right liked the mathematical simplicity.
I've written low-level drawing code that had to work on 3 dozen video cards, so I know entirely too much about this. There are actually 3 flavors of "high color":
* 15 bit, no alpha channel, aka "555" color with 5 bits each of R, G, and B.
* 15 bit with alpha, aka "1555" with 1 alpha bit and 5 bits each of R, G, and B.
* 16 bit which (on PC hardware at least) is always "565" color, with 5 bits each for red and blue and 6 for green (because the human eye is more sensitive to variations in green).
You can of course treat 555 and 1555 the same in most cases. Older boards tended to be 555 format, while most newer designs are 565.
Yet another inaccuracy in the article:
:-P
These "senior" whatever-they-are's didn't bother to look closely at their tests. They say that the color mismatches occur in high-color modes because the browser has to pick between (as an example) 1.9 and 2.1, from an original 2.0, and it doesn't always pick the same thing...
If they would look at their example images (ghost.gif and obvious.gif, linked from within the article), they would see that the BGCOLOR for the table cell was solid, but the GIF was *dithered*. They claim that it is a bug in the browser. You could consider it a bug, I suppose, but it's really just the fact that the browser assumes that BGCOLORS should be solid, and thus picks the nearest color, whereas images are quite often *not* solid shades of color, and they usually benefit from dithering.
Another nitpick: The fact that they claim these colors that don't pass their test in high color aren't "web safe" is inane, at best. They consider these colors "unsafe" because they are shifted slightly in high-color? Um, how often can you get colors to display consistently across all sets of hardware/software? Never. A little color shifting is irrelevant. *Maybe* you can have an issue with high-color dithering (which they didn't seem to notice), but that's pushing it...
Duhhh, I feel special because I picked apart an article written by guys making lots of money...
As a scientist, I give presentations occaisionally, and a (male) audience member later told me he was red-green color-blind, as was ~10% of the male population.
Since then, I've tried to never use both red & green as the only distinguising characteristic on a chart, etc.
While I'm at it - blue & red should not be placed next to each other, generally. Since they fall roughly at opposite ends of the visible spectrum, the eye's focal power differs the most between those colors. As your eye/brain tries to focus properly on two colors that require slightly different adaptations, you can perceive a "vibration" -- the boundary between the red & blue will have a high-frequency shimmering or vibrating appearance.
This is not universal, and is most noticeable between bright solids with adjacent, straight edges.
Further OT - it can also be used to interesting effect. There's a laser-tag place nearby, and the carpet has a blue-grid pattern offset on a red-grid pattern, illuminated partly by blacklights. From the observation gallery it has a 3D effect, with the carpet looking as if it has 12" deep holes in it. I believe it's due to the red-blue focusing issue.
-----
D. Fischer
ShoutingMan.com
Forget True vs High color. There are more basic issues at work:
1) Non-color devices: Palms, cell-phones, terminals, lynx, etc.
2) The reason people care about "websafe" colors is that they want the client to see what the designer designed. But if I adjust the settings on my end, I don't see it anyway. "The settings on my end" include everything from constrast/brightness/etc on my monitor to the individual color tweaks available on some TVs (as in "WebTV").
It is literally impossible (not just difficult) to make this work, so why not design around it? Stop making pretty colors cover the fact that you have no content and actually give me some meaningful information.
--
Linux MAPI Server!
http://www.openone.com/software/MailOne/
Linux MAPI Server!
http://www.openone.com/software/MailOne/
(Exchange Migration HOWTO coming soon)
Old-timey graphic designer motto (which isn't taught in schools anymore, to judge by Wired and it's ilk):
I'm kinda old-fogey about this. If it's black, you read it. If it's blue, you click on it. If it's grey, it's the background.
Jeez... If you're site is all about matching colors and transparent GIFs, you've got a brochureware site. Don't sweat it -- people will look at it once and never come back.
(Browsing Slashdot in "simple HTML mode"...)
Potato chips are a by-yourself food.
One of the most interesting things I learned in this article is how inconsistent web browsers are when attempting to render colors in 15 or 16-bit modes. I can imagine this happens because sloppy programmers might convert from an 8-bit number to a 5-bit number by doing a bit-shift, incorrectly ignoring the less significant bits.
This is a big deal, for example, if you need solid colors (like table BGCOLORS) seamlessly blending with GIF images. I can imagine this coming up sometimes, but not THAT often. Luckily they offered some suggestions to remedy this problem (like using a transparent color in your GIF where it blends with the background).
The authors of the article, however, seem to imply that one concern is that the colors people see are not the colors you intended for them to see. This is a different issue entirely! Just the fact that most monitors have brightness/contrast controls, plus the differences in gamma used by Macs and PCs, and other factors like this virtually guarantee that most users will not see exactly the color you intended.
You would NEVER, for example, expect to do business with someone whom you pick up in a white limo in China - White is a color reserved for funerals, and typically associated with death.
Also, keep in mind the industry you are dealing with. For example, in Nuclear circles, where many people started out in the Navy, red means ON(hot) and green means OFF(cold)... So a flashing red marker might get misinterpreted.
But then again, developing a web site with your audience in mind is common sense, isn't it? Well, isn't it?
The REAL jabber has the /. user id: 13196
The REAL jabber has the user id: 13196
What you do today will cost you a day of your life
A secretary in my office has a windows95 machine that the sysadmin never installed the correct video driver on. Her machine is set on "default display" which only displays 256 colors.
It never bothered her that everything looked really weird.
Consider your audience.
Design accordingly.
Roughly 99.9% of the general population are not anal retentive web developers.
"tension is the great integrity" -R Buckminster Fuller
We had a client who was checking out their website on two different (same brand, model etc) laptops, same OS, same browser. Same color depth.
They couldn't figure out why the colors weren't exactly the same, and over the phone, we didn't catch the problem either. Naturally, they thought it was a problem with our design or programming.
So, when they were here for a meeting, they brought the laptops along, connected to the site, and said "There, see? The colors aren't the same."
They were right. The colors weren't the same despite exact same configurations on the two machines.
I _REALLY_ impressed them when I reached up and adjusted the brightness and contrast of the darker laptop.
[eyeroll]
take web color choice advice from the people who built this. Right...
Cypherpunks: Civil Liberty Through Complex Mathematics. Those who live by the sword die by the arrow.
The 22 colors they've found are ones that not only can be displayed without dithering, but look exactly the same whether in an image or as an HTML background. The times you'll run into problems using colors that aren't in these 22 are when you're trying to put images on that background.
For one thing, you can still use transparency safely on top of any of the 216 colors. Otherwise, you can still use all 216 colors in the foreground of the image - only the background has to be one of the 22 colors if you want it to look right.
These 22 colors include, of course, black and white, which I'm guessing account for at least 90% of the page backgrounds on the Web.
--
No more e-mail address game - see my user info. Time for revenge.
Win dain a lotica, en vai tu ri silota
Never Twice the Same Color (prob. referring to the inevitable drift of a analog tint control)
Although drifing off-topic, but still very geek, I've always heard it as "Never The Same Color", which rolls off the tongue better.
DeepGeekStory: Most people have heard of the Rocky Horror Picture Show, where people get dressed up, throw rice and toast, and yell lines at the screen. Fewer have heard of the little known sequal (sorta) titled "Shock Treatment". People also get dressed up as characters in Shock Treatment, act out the parts, and yell lines.
One song (Looking for Trade) is filmed under red light with red walls, with white spots of color. A friend yells the line just before the song starts: "Hey, Show us your complete disregard for the NTSC format!!". Of course, on televisions (including projectors, which is how we were watching the movie), the red smears and blurs across the screen because of NTSC's lousy color signal handling.
ObObservation: Could you ever have a NTSC colour signal? Or would be oxymoronic, like a PAL color signal?
--
Evan
"$30 for the One True Ring. $10 each additional ring!" -- JRR "Bob" Tolkien