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.
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)
---
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
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...
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.
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]
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