The 216 colors of the Browser Safe Palette
John Weise
Digital Media Solutions
University of Michigan
Web Color Palettes
Gamma for the Web
Other Colorful Web Resources
Working with Web Palettes in Photoshop [separate
document]
Web Color Palettes
Many, if not most, Web users have computers that can display only 256 colors at once. Some PCs are limited further to 16 colors. Yet, it is very easy to create digital images that contain as many as 16.7 million colors. How good an image looks on the Web depends entirely on the capabilities of each user's hardware and software. Netscape Navigator, NCSA Mosaic, and Microsoft Internet Explorer actually use only the 216 colors that are common to Macintosh and Windows operating systems to display images. Lynda Weinman has dubbed this 216 color palette the Browser Safe Palette.
When a Web browser displays an image on a 256 color system, the image is drawn using the browser's palette of choice (most commonly the Browser Safe Palette). The results can be less than desirable, and will vary from browser to browser and platform to platform. Most seriously affected are images with broad areas of a single color, or flat color. Photos and other types of continuous tone images tend to look better.
There is no universal solution, though use of the Browser Safe Palette to create images goes a long way toward achieving predictable results. In general, if the Browser Safe Palette is used when preparing images for the Web, the images will look good, at least on Macintosh and Windows machines. Unfortunately, it is not quiet as simple as that. It is not always appropriate to use the Browser Safe Palette.
The Browser Safe Palette contains the 216 colors that are common to the system palettes of the Macintosh and Windows operating systems. It is used by Netscape Navigator, NCSA Mosaic, and Microsoft Internet Explorer.
The 216 colors of the Browser Safe Palette
Download the Browser Safe Palette for Mac or Windows. The palette can be loaded into Photoshop's swatches so that the colors can be used while creating images.
Truth is, very few images actually use all 16.7 million colors, and usually a reasonable job of image display can be done with 256 or fewer colors.
See also Working with Web Palettes in Photoshop.
Example |
| The image below was created originally without using the Browser Safe Palette. After the fact, the image colors were reduced. The first two images approximate the background color the best, but are dithered on a 256 color display. The third image is not dithered, but the color is not very accurate. On a display capable of thousands or millions of colors, the first image looks just like the original (accurate color, no dithering), and the last two look just like they do on a 256 color display. |
|
|
256 color adaptive palette without diffusion |
|
|
Browser Safe Palette with diffusion |
|
|
Browser Safe Palette without diffusion |
Again, the key with this type of image is to use Browser Safe Palette colors from the start. This eliminates surprises when the image is moved to the Web.
See also Working with Web Palettes in Photoshop.
When reducing an image to 256 or fewer colors, the image can be remapped to an adaptive palette which uses the most common 256 colors of the image. When the image is displayed by a Web browser on a 256 color system, the image is redrawn using the browser's standard palette (most likely the Browser Safe Palette). It seems logical that if the browser is going to remap the image anyway, that better color could be achieived by using the 216 color palette in the first place and never using an adaptive palette. However, this is generally not the case.
The biggest advantage to using an adaptive palette is that users with computers capable of displaying thousands or millions of colors will see an image far superior to what would be seen if the 216 color palette were used.
It is often possible to reduce an image to an even smaller number of colors, perhaps 128 or 64, and still get a great image with an adaptive palette. The benefit is a smaller image file size.
Example |
||
| On a 256 color display, the following sets of images will be of similar color quality. However, the first and third image of each set, which use adaptive palettes, will look much better on computers that can display thousands or millions of colors. And if you are concerned about file size, consider the third image of each set which uses only 64 adaptive colors. The adaptive palette images likely look better on a Macintosh than on a Windows computer, especially for the first set of images. Keep this in mind if preparing images on a Macintosh-- 64 colors may not do the job a 256 color Windows display. | ||
|
|
 |
256 color adaptive palette |
Browser Safe Palette |
64 color adaptive palette |
|
||
256 color adaptive palette with diffusion (32K) |
||
|
||
Browser Safe Palette with diffusion (18K) |
||
|
||
64 color adaptive with diffusion (22K) |
||
| In case you are wondering what a continuous tone image looks like without diffusion, here is the first photo, prepared with the Browser Safe Palette and no diffusion. |
||
|
||
Use thousands or millions of colors (16 bit or 24 bit color) when color accuracy is crucial. For example, art historical images that have been color balanced and are of exceptional quality need 24 bit color. This assumes that most of the users, or at least the most important users, have displays capbable of displaying millions of colors. 256 color displays can still show the images, but they will be dithered much like the adaptive palette images are. Use JPEG compression (JFIF file format).
Use the Windows 16 color base palette if you really need to cater to the lowest common denominator and you know that the majority of your users have computers that only display 16 colors. When using the 16 color palette, it is really necessary to design from the start with those colors.
Gamma for the Web
Gamma can be intimidating, but really it is just brightness control. How bright or dark an image appears on a computer display depends on several factors including the software gamma setting on the computer, the physcial brightness setting of the monitor, and ambient light (the light in the room, or on the beach if you're one of those non-existant, virtual-office-on-the-beach people that can only be seen on t.v.). So, gamma for the web is a pretty tricky issue since you can't adjust everybody's viewing environment.
In general, it is known that images prepared on a Mac will look too dark on a PC, and images prepared on a PC will look too bright on a Mac. One option is to shoot the gamma gap and use a brightness that is right in the middle. This way, images will only be a little too bright on the Mac, and a little too dark on the PC. The common gamma setting on the Macintosh is 1.8. And on a PC it is 2.5. So, shooting the gap would be about 2.2.
Monitor gamma can be set to 2.2 before preparing images for the Web. Photoshop 3.0 allows the global gamma to be adjusted. Select from the File/Preferences menu the Monitor Setup... menu item, and set the gamma to 2.2. Don't forget to set it back when you are done if you will be doing non-Web image work. With the gamma set to 2.2, adjust images so that they look good, and save them.
Photoshop for the Macintosh comes with a Gamma control panel that allows the gamma to be adjusted at the system level for all applications. It is worth installing and using because it allows the gamma setting to be tweaked visually for the physical working environment.
Images can also be adjusted after the fact, but this is a bit more complicated. Making Good Looking WWW GIFs or JPEGs for Multi-Platforms with Photoshop, provided by the Computer Graphics Systems Development Corporation (CGSD) goes through the steps for using Photoshop to retroactively adjust the gamma of images that are going on the Web.
In particular, Robert Berger's Why Do Images Appear Darker on Some Displays?: An Explanation of Monitor Gamma gives a good overview.
Other Colorful Web Resources
Lynda's Homegurrrl Page and the Browser Safe Palette
Victor Engel's No Dither Netscape Color Palette
Produced by John Weise at the Office of
Instructional Technology, University of Michigan.
Copyright © 1996-97 the Regents of the University of Michigan.
Photographs are Copyright © 1995-1997, John P. Weise. All rights reserved.
Please send comments to John Weise (jweise@umich.edu)
Created: April 26, 1996. Last Modified: Thursday, 08-May-1997 15:55:36 EDT
URL: http:// www.oit.itd.umich.edu/projects/DMS/answers/colorguide/index.html
