 |  |  |  |  |  |  |  |
|
|
 | | |
 | ||
Web Color Basics By Lynda Weinman OK, so let's say you chose a nice leafy green. It looks great on your screen. In fact, it's the nicest green you've ever seen. Then you see your site on someone else's screen... and it doesn't look so keen. The color is weird, and worse, it has lots
of little dots in it (called "dithering"). What happened? One of the biggest
ironies in Web development is that most of us creating content have better systems than our audience has. Chances are, if you are creating Web sites, that you have a video card capable of displaying thousands (16-bit) if not millions (32-bit) of colors. Whichever color you choose to use in your HTML or graphics will appear on this type of system as you intended. But many visitors to your site are probably using computers that only display 8-bit color (256 colors). This means they can't see
every color in the spectrum like you can—and that is where the browser-safe palette comes into play. The browser-safe palette is sometimes called the Web palette, the color cube, the 6x6x6 palette, Netscape palette, Explorer palette, or the 216-color palette. Regardless of the name used, it always refers to the same set of colors. This palette is composed of 216 specific colors that are universally recognized by browsers and operating systems, even on 8-bit systems.
The browser-safe palette is composed of fixed 216 RGB
(Red, Green, Blue—the only colors that computer monitors and televisions actually display—but they show them in such tiny dots that they appear to be able to show almost any color) values As you click on colors in this color picker, you'll notice that the Red, Green, and Blue settings are always some combination of the values 0, 51, 102, 153, 204, or 255. The corresponding HTML values (which are in "Hex," a system only an engineer or programmer could love) are always some
combination of 00, 33, 66, 99, CC, or FF. This is because the browser-safe palette is fixed and restricted to using colors that are derived from a rigid mathematical formula. Any time you use the color picker in NetObjects Fusion to color your text, links, backgrounds, or tables, the
browser-safe palette appears. (It is the default palette for NetObjects Fusion.) Why does NetObjects Fusion use this palette, you might wonder? Why should you care about people on 8-bit systems; are there really that many people on older systems to worry about? What would the penalty be if you didn't use this system? NetObjects Fusion promotes the browser-safe palette so you will choose colors that look good to the maximum number of
visitors to your site. If you chose a non-safe color, and it was viewed from an 8-bit system, the browser would actually shift the color you chose without your permission. Browser software (this includes Netscape, Explorer, and Mosaic) will choose the nearest browser-safe color it can find to the non-safe color you chose. While this doesn't sound like too steep a penalty, what happens if it shifts your text color to the same color as your background? Oooh, you'd have invisible text! Now that
is a steep penalty! OK, you might ask, are there really that many people using 8-bit systems anymore? I can't give you an exact number because there is no way to accurately collect the data, but the number of computer users who have older systems is not necessarily the problem. Many people have newer systems that include 16-bit or 32-bit video cards, but they don't even know they can check or change their settings from 8-bit! I was shocked to
discover that my father, who is retired and is on the Web an average of 4 hours a day, didn't even know he could change his Windows Properties to display more than 256 colors! He's not alone. Think about what most people buy computers for. Spread sheets, word processing, database entry, organizational planning, and maybe games? If this were the sole reason for owning your computer, why would you ever care about or need more than 256 colors?
If you've never checked your computer's color settings, here's how to do it:
The bottom line is that while I can't tell you how much of your
audience is viewing your site with 8-bit settings, I can assure you that it is a good percentage. Choosing browser-safe colors in NetObjects Fusion is simple, so why not use them? Browser-Safe Colors NetObjects Fusion makes it fairly easy to use browser-safe
colors in your HTML code, but what should you do about your images? An 8-bit browser can't display any colors outside of the safe palette, but it doesn't simply shift the colors to the safe palette, it dithers them. Dithering is a process the computer employs to simulate a color outside of its range. It takes two or three browser-safe colors and sprinkles them together to attempt to simulate the non-safe color in your graphic. When the dithering
process appears in a solid color, it will cause your images to look unprofessional, and unattractive. Here's an example:
The image on the left did not contain browser-safe colors, and the 8-bit browser system dithered it. Imagine if this was
your company logo, or masthead? The image on the right was created using browser-safe colors, and even in 8-bit mode, the browser displayed it without dithering. If you have an image that contains continuous tone color (graphics such as photographs that you save in JPG format), the browser will convert it to the browser-safe palette, and it will actually do a great job. I never advocate using safe colors on photographs or images that contain continuous tone information. If you convert this type of image to use the browser-safe palette, it will introduce banding (as you see on the right side). Web browsers will use dithering (left image) but the dithering looks good on this type of image. Dithering only looks bad on solid colors; it is actually necessary on continuous tone images displayed on 8-bit systems.
I hope this article helped you understand some of the issues, such as unwanted color shifting, unwanted dithering, and, in the case of continuous tone images, desirable dithering. I hope it also put your mind at ease about choosing browser-safe colors from your NetObjects Fusion Color Picker. It's the right thing to do, and it's made effortless for you! Color Resources [Editor's note: While web safe colors are still the best choice for large flat surfaces of color, sites that track site visitors and list what kind of screen size and color resolution their computers have now say that only 8% of site visitors can see only 256 colors. That means if you do choose a "non-web-safe" color, chances are that your site visitors will
be able to see it without dithering. That said, web-safe colors will still look more consistent even on different computers and monitors.]Visibone has free downloadable 216 color palettes for a
variety of programs, organized into something that
| ||
|  |
|
|
| |
 |
Click your right mouse button anywhere on your desktop to see your computer's Properties (or
click on Start/Settings/Control Panel, then double click on Display). Click on the Settings tab, and see what bit depth your monitor is set to display. Be aware that when you select High Color or True Color, your screen's resolution may be decreased automatically (meaning you'll see less on screen). It all depends on what kind of graphics card your computer has. Almost all newer computers let you have 16-bit color at a resolution of 800 x 600.
Under the Apple Menu, choose Control Panels: Monitors & Sound. Look to see what your Color Depth is set to.
