VisiBoneVisiBoneContents
- What are web-safe colors? (Those most widely supported.)
- Why do I care? (Helps some users.)
- Isn't the web-safe palette very limited? Isn't it moot now that everyone has millions of colors? (Yes. Not entirely.)
- Ok, so if I use these 216 colors everything will be fine, right? (Maybe only 125.)
- What's special about this poster/card/pad? (Visualize color options.)
- What are the 3-letter codes on the poster? (VACCC.)
- Doesn't PANTONE® make a printed web color reference? (A modest one.)
- How do I avoid making my site hard to use by color-blind people? (Know what they see.)
- I have no artistic sense (Bunk.), how do I pick good color combinations? (Intuition.)
What are web-safe colors? (Those most widely supported.)
In 1994, Netscape initiated a brilliant solution to a perennial problem with graphics operating systems that web browsers had just made much worse. Many computers at that time could only display 256 colors at a time. The choice of those colors was at the whim of application developers, and then more recently, of web site designers. When more than one program or web page or web image was visible on the screen at a time, and the colors they clamored to display totaled more than 256, there was pandemonium. Users would often see color ridiculously distorted. Netscape defined a set of 216 colors that would have priority, 6 levels each of red, green and blue, evenly spaced throughout the RGB color space. Web pages that used those colors exclusively would have a much better chance of looking right.
Why do I care? (Helps some users.)
Good question. It makes no difference unless the user's computer is limited to 256 colors and anyway the effects are not disastrous. They don't crash the computer. Using colors outside the web-safe palette can have a variety of drawbacks on 256-color computers:
- Sometimes there's no effect at all, the color looks right.
- Often there's a speckled compromise of nearby colors called "dithering". This is especially true of large flat featureless areas.
- Sometimes nonstandard colors are replaced by radically different colors (gray).
- I believe there may also be an increase in what I call color thrash, where a window's colors change nonsensically like bad pop art (red white and blue becoming pink purple and puce). This is jarring and annoying when switching from one application to another.
Today, the advantages to web designers of limiting their work to the 216 web-safe colors are not as strong as they once were. Most computers can display millions of colors at a time. And there have always been distinct disadvantages. Pastels and earth-tones are especially sparse in this set of colors. Many designers are throwing off the web-safe yoke for convenience or to more precisely realize the colors they envision.
In a random survey of web pages in November 1999, I found that 27% of the HTML color codes used on the web today are not web safe.
Antique computers remain in service that can only display 256 colors at a time. Many are hand-me-downs at the bottom of the office food chain. I saw a room full in a training center. But not all 256-color users are on old computers. Some game programs insist on reconfiguring to 256-color mode, perhaps so they can animate faster. I heard of one designer running into 256-color mode on an important client’s laptop when he was trying to show off his work. A very competent developer I know switches to 256 color mode whenever he gets a new computer so he can trade off for higher resolution, or what he swears is faster operation. (Makes sense if there are fewer bits to per pixel to move around.)
The number of users limited to 256 colors, for whatever reason, is in gradual steady decline, from 20% in May 1998, to 8% at the turn of the century, according to the wonderful information at www.thecounter.com/stats (thanks to Morten Wang for pointing this out). These figures leave out at least 20% that are not measured, perhaps due to older browsers (the stats are not clear). Whether it's now 8% or 28%, this is probably larger than can be explained by old hardware. And you may decide it's a larger portion of your users than you want to ignore entirely. Update: the portion of 256-color users plateaued in 2000, probably into a very gradual descent, 8% for Jan-July and 7% in Aug-Sep. There no longer seems to be a 20% unmeasured portion. Update: First quarter of 2002, thecounter says that an average of 4% of internet users are on 256-color computers. I use one for greater screen resolution. On the other hand, my daughter could not switched her new Dell XP laptop into 256 color mode at all.
Of course, the most important thing is to know your users.
Thanks to a discussion on the webdesign-L mailing list, I've come up with a simple way to measure these figures for your web site. Instructions and the figures for this site are on the VisiBone Palette Survey page. You're welcome to try the survey on your own page and report back. Initial figures indicate 5% of the people who visit the VisiBone home page are using 256-color computers. (Update: still 5% as of July 2000.)
One designer told me that even when she decides she can break out of the web-safe color set, she likes referring to the poster for a starting point. Also if a web-safe color fits, she'd certainly prefer to use it, and so appreciates being able to determine that quickly. (Personally, this very succinctly describes my own policy for the past several years.)
One alert person recalled that most Windows application developers believed 8-bit color problems to be largely dead in the early nineties. The advent of web browsers brought these issues freshly alive because of the one-size-fits-all bias: it's much harder for a web page to act one way on 8-bit computers and another with larger palettes available. 8-bit color constraints may die again; and they could be exhumed again. Although 24-bit color depth computers are clearly increasing, so are 1-bit: monochrome cell-phone browsers. So the spectrum of color depth is seeing increase at both ends. (Color depth refers to how many bits control each pixel. 256-color computers have 8-bit color depth.) Some colorized cell-phone browsers use 8-bit, others 16-bit.
A WebMonkey article, "Death of the Websafe Color Palette?" by Dave Lehn and Hadley Stern of design powerhouse Razorfish, 6 Sep 2000, kindly mentioned VisiBone mouse pads in passing. The article includes good new empirical data on the rise of 16-bit color problems.
Ok, so if I use these 216 colors everything will be fine, right? (Maybe only 125.)
When I made the first edition of the poster I noticed that many of the colors on my screen were indistinguishable. I surveyed a small group with the Web Palette Color Distinction Test and most people using PCs reported the same effect. Scattered reports since have tended to confirm this, though changing the brightness or contrast may lessen the problem. This means any color in the web safe palette with 33 in the hex code will look the same as the corresponding color with 00 for a large number of users (40% in the survey). If one uses only the levels FF, CC, 99, 66, 00, one has only 5x5x5 = 125 colors to choose from.
What's special about this poster/card/pad? (Visualize color options.)
I believe you'll find web-safe colors quicker and make better informed color choices if you grasp the patterns and relationships in meaningful ways.
The problem I tried to address in the summer of 1998 with the web-safe palette colors, was that no one had ever actually seen them, at least not in a way conducive to human perception. That is: by hue. Oh sure, several books and hundreds of web sites had laid out all the colors, but they had done so based on red, green and blue proportions. That may be interesting for graphics programmers but not for graphics designers. Designers must realize inner vision, and while the human eye indeed measures red, green and blue proportions in the initial stages of perception, those parameters are absent from the inner mind. In the human mind, color is quantified by hue, vividness and brightness. (The term saturation is more technically correct than vividness, as is value than brightness, but I sought more universal terms.) A few references had organized the 216 colors by hue but the arrangements were either unsymmetrical or incomplete. There was structure and pattern there that no one had ever seen.
All of my color references display the 216 colors universally supported by web browsers, arranged symmetrically by hue. The twelve major hues are: Red, Orange, Yellow, Spring, Green, Teal, Cyan, Azure, Blue, Violet, Magenta, Pink. The color chips that touch each other have the same hue.
Some hues, such as red, are represented by as many as fifteen shades in the web palette, of varying vividness ( vivid to weak ) and brightness ( light to dark ). Other hues are represented by only one shade. Those are among the most vivid colors in the palette , shown as tear-drop shapes on the outer fringes of the poster. In the center are the hueless black , white and grays .
Each color chip is embossed with the hexadecimal code used in HTML and the decimal color code used in many graphics tools. For example, to give a web page a sky-blue background you could use its hex code like this: <BODY BGCOLOR=#99CCFF> To make an image background blend into it, use the RGB numbers 153, 204, 255.
To get the look you really want for your web site, of course nothing can take the place of checking it out on different computers with different browsers, monitors, operating systems, etc. But there is one thing this poster can help you with, perhaps better than any other resource.
Clashing colors are colors of very similar but not quite identical hue. On the poster, only color chips with the exact same hue are touching. Colors like that do not clash. There are 61 groups of them. So if you're trying to use shades of the same hue together, you may want to make sure they're in the same group.
Designers on PC's may be vulnerable to a particular kind of color clash. Most PCs can only distinguish 125 colors in the web-safe palette. Look out for colors that don't appear to clash on your PC but do on other systems. Again, to avoid clash: pick color chips from the same group.
What are the 3-letter codes on the poster? (VACCC.)
The VisiBone Anglo-Centric Color Code names each color in the web safe palette, primarily by its hue. The 1-3 character abbreviation is printed on each color chip on the poster. See the complete list of VACCC by hue.
Doesn't PANTONE® make a printed web color reference? (A modest one.)
PANTONE® ColorWeb® (which by the way just appears to have come way down in price, $70 to 30 or thereabouts) includes a printed Internet Color SystemTM Guide. This is a booklet of color samples in the tradition of their famous and immensely useful Process Color System Guide. The Internet Guide uses Hexachrome® to reproduce the 216 web-safe screen colors. It does a very good job, especially compared with a simple translation to CMYK. Still, many of the colors do not compare with each other correctly. Here's an example from page 5:
PANTONE® Color
DesignationHTML Real screen
colorsWhat the Guide
looks likeN5-04 FF0000 N5-05 CC0000
Similar discrepancies exist with blue (N19-03 vs. N19-04), green (N30-03 vs. N30-04) and cyan (N24-05 vs. N24-06). I bought ColorWeb in late 1998. Pantone may have improved this since. Feedback welcome.
As a printed color reference, here is a comparison:
PANTONE® ColorWeb®
Internet Color SystemTM GuideVisiBone 216-Color
Webmaster's Palette Poster6-color printing process
designed especially for
flesh-tones and fig leaves
8-color printing process
designed especially for
computer screen colors
Defines a 4-5 character
PANTONE® Color Designation
that hardly anybody ever uses,
e.g. N 3-04 (page 3 color 4)Defines a 1-3 character
VisiBone Anglo-Centric
Color Code that hardly
anybody ever uses, e.g.
DHO (Dark Hard Orange)Easy to find color by code Hard to find color by code Shows decimal RGB and hexadecimal HTML Shows nominal CMYK (for
graphics programs only, not for
printing — K is never used) and
actual Hexachrome used to print(Actual 8-color proportions
are not revealed.)36 pages of 6 colors each 1 page of 216 colors very portable, pocket-size portable with a very big pocket doesn't look so hot on a wall looks great on a wall Arranged chromatically Arranged by hue Symmetrical by vividness
and brightnessAll shading series (light-
medium-dark) in a straight lineAll colors of the same hue
are grouped together
How do I avoid making my site hard to use by color-blind people? (Know what they see.)
To serve the interests of color-blind viewers you simply need to be aware when you're depending on a distinction between that color blind people can't make. For a long time I had no clue what color blind people could distinguish and what they couldn't. When I saw what Christine Rigden had done at BT Labs I knew that just seeing the set of all colors as one would in color blindness helps a lot. So I added a color blindness simulation to the Color Card and Chart.
Obviously you don't want green text on an orange background, but that kind of problem rarely comes up if you design with taste anyway. (One that does is black on vivid red or vice versa. Protanopia is relatively rare but it makes reds appear very dark.) So for example, if your site map shows technical links in orange and product links in green, use other means to set them apart and reveal the structure, like borders or spacing. Very simple, basic stuff, but easy to miss if you don't know what color blind people see.
I have no artistic sense (Bunk.), how do I pick good color combinations? (Intuition.)
Bad software and other forms of unfinished technology require such athletic use of the left brain (logic) that the right brain (intuition) is drowned out, beaten to the background, chased back into her shadowed dungeon. If she dare speak ("I feel to click here...") her punishment is quick and harsh ("Work vanished. What else would you like to do today?"). Bet you've used a lot of unfinished technology lately.
So, you thinking you have no artistic sense is understandable, and may have some practical accuracy. But she's there. Oh man she's there. Ever see a face and think instantly: friend or foe? An ad: buy or boycott? A statement: praise or disrespect? A few colors: brilliant or disgusting?
My point is you know great color when you see it. Based on this meager but staggering fact, I tried to make the color lab help you see hundreds of combinations in minutes. Every click on its color wheel is a new color and a new combination. Click X to remove a color or Reload to start over. Be slow and deliberate. Be impulsive and follow the force, Luke. Or be random. All the while she's watching, and you'll know when her eyes sparkle. You'll know when her mouth twists. When her lips part and her eyelids move you may really have something: your next great color scheme. Women are so beautifully fickle and no less so the one in the right hemisphere of your skull. That's why pleasing them is so pleasing. Please yours, and listen to her for once. Then send her to her cell and get back to your project.
(Inspired by Jorge's insightful questions.)
