Many computer users view the Web in 256 color-mode (also known as
8-bit), because either their computers dont have video cards
that support more colors, or their computers are set to view only
256 colors. Each operating system, for example, Mac OS, Windows, or
Windows 95/98 has its own fixed color palette that Web browsers use
to reduce color information for 8-bit video cards. When people with
8-bit video cards view your Website, their browser converts the images
to the palette used by their system by shifting the colors that youve
created on your site to colors it uses in its fixed palette. Often
this can greatly distort the color scheme you intended for your graphics.
Theres only one way to effectively avoid this problem
use a palette that is Browser Safe. Fortunately,
all system palettes have 216 colors in common. All color monitors
can display them and all browsers on all platforms will show each
of these colors as is.
The Browser Safe Palette
Color is displayed on your
monitor with a combination of Red, Green and Blue
values. The RGB values for each color within this palette are all formed from variations
of the RGB number values 00, 51, 102, 153, 204 and 255.
The hexadecimal code values for each color are all formed
with variations of the hex code values 00, 33, 66, 99, CC
These colors were chosen from a mathematical color cube based on
multiplying six values of six colors (red, green, blue, cyan, magenta, and yellow). This
is why the browser-safe palette is sometimes called the 6x6x6 palette. Its also
frequently called Netscape palette, Explorer palette, Color cube, Web color, and Web safe.
Whenever you see these terms, it usually refers to the colors browsers impose on end-users
viewing the Web on an 8-bit system.
If you design your Web graphics and color schemes with the Browser- safe color palette,
your site will not be prone to unexpected color shifting or dithering (which usually looks
like unwanted dots or speckles on artwork) on 8-bit systems. Look at these examples:
This image's palette has been shifted.
This is the same image, either displayed by itself, or with a display adapter
set to more than 255 colors.
Follow these general guidelines to create
Web color everyone will see as you intended:
Use browser-safe colors for text
If you dont use browser-safe colors when you select your sites background and
text colors, the end users browsers will convert the colors to browser-safe colors
for them (if their systems have a 256 color limit). As a minimum, your color schemes will
not display as you intended, and they might clash and look very ugly. Worse could be if a
browser converts your text to the same color as the background thereby making your page
Create graphics with browser-safe
Artwork with a lot of solid color (i.e. line art, illustrations, cartoons, logos, etc.)
are best suited to GIF files which display in 8-bit color. If you dont use
browser-safe colors with GIF graphics, the end users browsers will convert the
colors to browser-safe colors for them (if their systems have a 256 color limit). This
will cause the image to dither (ugly dots will appear in the solid colors of the image).
The examples below were taken from an article by Lynda Weinman titled, Web Color Wizardry.
The bottom logo was created with browser-safe colors but the top logo was not.
This image was created by Lynda Weinman.
Convert non-browser safe images to
the Browser Safe Palette.
You may want to use a pre-made graphic (for example, a copyright free graphic that you
have copied from the Internet) in your Web pages. If the graphic does not use browser safe
colors, you should convert it to the browser safe palette. How do you know if your graphic
is browser safe? In PhotoShop, choose:
Image >Mode >Indexed Color >Web Palette.
Observe the effect on your images colors -- if some of the original colors were not
browser safe, they will have been replaced by different, browser safe colors.
Save photographic images as JPEGs.
JPEG does not use a special palette since it is not an 8-bit format. Therefore, if end
users have a computer capable of displaying thousands or millions of colors, they will be
able to see all the colors in the JPEG image. If their monitor is only able to display
8-bit color, their browser will apply their systems palette to the JPEG image.
However, unlike GIFs, a photographic-type JPEG image displayed in a forced palette of 256
colors can look quite good. The same image in GIF format looks worse. The best advice is
to use JPEG format for images of photographic quality (or scanned images) and GIF format
(made with browser safe colors) for graphics such as line art, illustrations, cartoons,
animation, etc. which contain flat, solid colors. The following example comes from
Browser Safe Colors Website.
This is a JPG without browser safe colors
This is the same image, but using a browser safe palette and saved as a GIF
Your site will look much better if you design it to display correctly
over the widest range of operating systems and browsers. If you are going to pick your own
colors for backgrounds, type, text, links, and illustrations, choose browser-safe colors
to ensure that your graphics will display as you have intended. Understanding how browser
safe colors and graphics relate is critical to making good Web-design decisions for two
reasons: The predominant graphics file format, GIF which is 8-bit, and many viewers
monitors are 8-bit as well.