Slashdot Log In
Destroying The Myth Of The Web-Safe Palette
Posted by
timothy
on Fri Sep 08, 2000 01:44 PM
from the illusions-of-childhood dept.
from the illusions-of-childhood dept.
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 discussion has been archived.
No new comments can be posted.
Destroying The Myth Of The Web-Safe Palette
|
Log In/Create an Account
| Top
| 270 comments
(Spill at 50!) | Index Only
| Search Discussion
The Fine Print: The following comments are owned by whoever posted them. We are not responsible for them in any way.
Nasty "web safe" pages (Score:3)
The problem here is.... (Score:4)
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?
Even those 22 aren't web-safe... (Score:4)
Unfortunately, with Netscape 4.61 on an HP-UX TrueColor display (visual), 7 of the 22 really safe colors [lycos.com] 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?
Razorfish information architects (Score:5)
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 [slashdot.org] 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!"
---------
Re:The problem here is.... (Score:3)
output, it is about colour rendering for web pages being done in an
internally inconsistent manner by almost all browsers. That's pretty
bad.
-1 redundant ? (Score:5)
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)
---
Re:Even those 22 aren't web-safe... (Score:5)
But this doesn't mean they'll render correctly on your system! I'll bet if they'd picked a few more windows machines to test, they would've had even fewer "web safe" colors in the end. So what this article really does is destroy the concept of a web-safe palette altogether. The 22 colors are just arbitrary.
VGA 256 color palette (Score:3)
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.
---
Color-blindness too (Score:5)
15-bit color *is* 16-bit color (Score:3)
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.
Re:The problem here is.... (Score:3)
:-)
Forget the web-safe palette! (Score:5)
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.
I Am Confused. (Score:5)
Is there something wrong with my Web Safety? Should I upgrade my version of Lynx to get all 22 colors?
Gamma (or lack thereof) and the web safe palette (Score:5)
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.
Not true (I wish it was) (Score:5)
* 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.
High-color *DITHERING*... (Score:4)
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...
Color-blindness - relevant for ALL presentations (Score:3)
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
This should have been obvious (Score:4)
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/
Pish-tosh (Score:5)
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"...)
Glosses over issue of accuracy vs. consistency (Score:5)
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.
And Cultural Sensitivity as well (Score:3)
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
99% of your audience are not anal web developers.. (Score:3)
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.
Re:The problem here is.... (Score:3)
People shouldn't have to repeat information from the article for your convenience.
--
No more e-mail address game - see my user info. Time for revenge.
Re:High-color *DITHERING*... (Score:3)
I'd like to see these tests run again (or just looked at again) and count the number of colors that the color shifted but was only a slight degree. I understand why the colorshift is a factor as I had to design a website using frames that a .gif of a solid color had to match the BGROUND color of an adjacent frame in order to look correct. I suffered the subtle shifting problem and had to keep switching colors to get it right. What was worse was I only had the choice of dark blues and light grays.
But I think that is a rare problem as most of the time, as they mentioned in their article, transparency can be used to allow the BGROUND color come through and you will have a direct match.
Stupid Client Tricks (Score:4)
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]
Re:The problem here is.... (Score:3)
Also, browser are free to apply different rules to presentational hints in the HTML content versus color information provided in graphical files. The main beef of the article in question is that browsers treat BGCOLOR directives, an HTML presentational hint, differently from color info in GIFs, which is not surprising at all because the two are totally unrelated items. It is quite possible to view a well-made HTML page without rendering the images, while it is also easy to view a GIF without a web browser.
The "web-safety" of the colors as defined by the article is only an issue when an author is trying to match the colors inside a GIF with those inside the remainder of a page. A more intelligent author would assume that GIFs and HTML may be rendered by two totally separate engines (perhaps even plugins) within the same browser, and therefore not expect anything other than the minimal spatial relationships between the two.
I'm supposed to.... (Score:3)
Re:Razorfish information architects (Score:4)
John S. Rhodes
WebWord.com [webword.com]
Important difference (Score:4)
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.
Re: Other "Safe Colors" (Score:3)
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
Re:Forget the web-safe palette! (Score:3)
What you need here is good design. Contrary to what appears to be popular belief on the web, good design is always centered around the clear presentation of content, and it aims for simplicity. If you keep those goals in mind, it's not going to matter much if the few graphic elements on your pages don't look the same on all monitors.
Even if the principles of good design did not dictate graphic simplicity, real-world bandwidth does. There are a LOT of 14.4k, 28.8k, and 33.6k modems out there. Moreover, just because you compress the heck out of your graphics doesn't mean crap when they are decompressed into RAM. And yes, it's trivial to build a 1k GIF or JPEG that expands into a multimegabyte block of RAM, and there are plenty of dolts doing it. And on older, slower machines, of which many remain, deeply nested tables take forever to render.
--