About us RCL 20 Projects Colour Selector Library
Colour Selector
Colour exploration tools
Preview text
Navigate colour
Mix colour
Make swatches
Blend colour
Colour schemes
About the Colour Selector
About this resource
Tool overview
Tool short-cuts
Palette layouts
Tool calculations
Other colour resources
About web colour
The web-safe palette
When to use the safe palette

When to use the safe palette

You may already know about the browser-safe palette and have always applied the whole 216 palette to GIFs. We have been advised to do this since 1996; however, it is no longer appropriate. Most people now have computers that can display more than 256 colours.

Although one should still take into consideration those that don't, there is no need to limit everyone to 256 colours. It is possible to design for computers that can only display 256 colours, as well as for those that can display more colours.

When colours dither

Dithering only applies to colour in graphics. Background colours set by bgcolor never dither. This is true of any colours set in HTML: bgcolor, color, text, link, alink, vlink (and their CSS equivalents).

Text and backgrounds coloured in HTML using RGB codes will always shift to the nearest colour in the 216 palette when viewed on computers that can (or are set up to) only display 256 colours.

Look at the test colours below.

[an unsafe colour]
A table cell with bgcolor set to #A5DDEB, which is not from the 216 palette. On computers which can show more than 256 colours, this colour will look different from the next colour.
[nearest safe colour]
A table cell with bgcolor set to the nearest colour in the 216 palette (#99CCFF). On computers limited to 256 colours, the previous colour will look like this when set as an HTML colour.

Text should be displayed on unditherable colours

If you want to set a background colour to your page of a single colour, just use bgcolor even if it's not from the 216 palette.

On computers that can only display 256 colours, the background colour will shift to the nearest colour in the 216 palette. There are several ways of finding out what the nearest colour is to any RGB value:

  • Use our tool, Navigate color. The nearest "safe" colour is shown for the currently-selected colour.
[Color palette dialog box on a PC
  • Set your computer to 256 colours (on PCs, choose 256 color from Start -> Settings -> Control Panel -> Display -> Settings -> Color palette).
  • Create a GIF of the desired colour then apply the 216 palette to it using the nearest colour method.

Once you know the nearest safe colour, change your web page or design to use the nearest safe colour and see if it looks acceptable with the text and images.

If you want a patterned page background then you will be using a background tile. For all those areas in the tile that text will be displayed upon, choose from the 216 palette. This is because text is hard to read when it is on a dithered background.

See the examples below.

The background to this text is a GIF set to an "unsafe" colour (#A5DDEB). On a high-colour setting, the background will remain a solid colour. It will dither on computers limited to 256 colours, as simulated next.
The background to this text simulates the dithering you'd see of the previous colour when it is used in a page tile. Automatic dithering patterns are usually noticeable, can be made up of numerous colours and make text hard to read.
The background to this text simulates the colour shift you'd see when the first colour was set as a background using just HTML (e.g., bgcolor, not a graphic. The "nearest safe" colour (#99CCFF) is noticeably different from the original colour but there is no dithering and the text remains legible.

Alternatively, see the next tip on how to incorporate "unsafe" colours into a tile image.

Don't use JPGs with solid colour as background tiles. JPGs use "lossy" compression, which means that colour almost always drifts and dithers. You don't notice this in complex images like photos, but it is noticeable on solid areas of a single colour.

How to make an unditherable "unsafe" page background

You can avoid using colours from the 216 palette in your background tile graphic if you take account of the following:

  1. The background tile should be a GIF.
  2. Text will always display on the same colour of the tile.
  3. This colour (any RGB colour) is made transparent.
  4. The page background is additionally set with bgcolor to the transparent colour.

The colour under the text will now never dither. Use the procedure above to make sure you're happy with how the page looks with the background shifted to the nearest colour when it is viewed on an older computer.

Make your colours dither

This image [ColorMixer colour] might look like a solid colour but it is actually made up of two colours from the 216 palette. It was created with ColorMix.

It was an online resource that allowsed you to create a "safe" GIF with a larger colour choice by mixing (deliberately dithering) 2 or 3 colours from the 216 palette. It was useful when you must have a non-safe colour as a background graphic to text. This mixing keeps the text legible on 256-colour displays whilst avoiding big colour shifts to the nearest safe colour.

Because the ColorMix dithering patterns used are small and consistent, the interference effect is small and the resulting image can often be used as a background to text without affecting legibility.

[an unsafe colour]
Our preferred colour - #A5DDEB - is not from the 216 palette.   
[nearest safe colour]
#99CCFF, the nearest safe colour to #A5DDEB.

[ColorMix 2] A ColorMix graphic of #A5DDEB by mixing two "safe" colours.    [ColorMix 2 @ 400%] The ColorMix graphic zoomed 400%

[dithered colour] What happens when you let the browser do the dithering.    [dithered @ 400%] The dithered graphic zoomed 400%

Text tests on the simulated browser-dithered and solid "unsafe" colour are shown below.

Our preferred colour (#A5DDEB) used in a background graphic. On computers limited to 256 colours, it will dither.
ColorMix's version of our preferred colour (#A5DDEB) created by mixing two "safe" colours. Text is still legible.
The "nearest safe" colour (#99CCFF) to the original colour - the shift on 256-colour displays when used in bgcolor.
The dithering you'd see of #A5DDEB when it's used as a background graphic.

When to apply the palette

The palette is only relevant to GIFs. The palette should be applied to solid colour whenever dithering would otherwise compromise legibility; this includes graphics containing typography or graphics which are used as backgrounds to HTML text.

GIFs should be used for buttons, typography and illustrations. JPGs should be used for photo-quality images. Photographs usually include so much variation that dithering is not noticeable. Converting photos to GIFs (unless duotones) always produces low-quality and larger images.

Vignettes (gradients of the same colour) always look bad when the 216 colour is applied. This also applies to drop shadows.

[the 216 palette] [text and drop shadow in 216 colours]

The text colour for the image on the left was chosen from the 216 palette. The entire image was then converted to the 216 palette using dithering (shown on the right).

[an adaptive palette] [text and drop shadow in an adaptive palette]

The text colour for this image was also chosen from the 216 palette. However, the original file was converted to a GIF by creating an adaptive palette (shown on the right). An adaptive palette is limited to 256 colours but it is made up of the colours used in the original image.

On computers that can't display more than 256 colours, the two text graphics look the same. On those that can display more colours, the text of the second graphic will remain the same but the drop shadow will look a lot better. If you always apply the 216 palette to all your images, they'll look bad on even high-colour displays.

The three test images below should help demonstrate the limitations of the 216 palette for vignettes.

[JPG vignette] [vignette in an adaptive palette] [vignette with 216 palette applied]
An uncompressed JPG (millions of colours). The same image saved as a GIF using an adaptive palette. It uses 200 colour slots. The JPG saved as a GIF by applying the 216 palette.

If your computer is set to 256 colours, the first two images will look like the third one. If they all look the same to you, a browser only uses the 216 palette in images on web pages. Use your browser to view the adapted GIF as it was intended (use your browser's Back button to return to this page).

Otherwise, there should be no noticeable difference between the above test JPG and the GIF saved with an adaptive palette. Since there aren't many shades in the 216 palette of any single colour, vignettes will always convert badly when the "safe" palette is applied.

See the section below on creating new images to find out how to use the 216 palette when creating graphics with shadows or vignettes.

How to apply the palette

The size of a GIF is determined by:

  1. the image dimensions
  2. the number of colours in the palette
  3. the number of colour changes when reading the image pixel-by-pixel, left-to-right and top down

When a palette is applied to images, one usually has the option to apply it by the nearest colour or the error diffusion (dithering) method. Dithering can produce better results for certain images but will always create larger files.

If you use Paint Shop Pro, save 216.pal; it is the 216-colour palette. Apply the palette to images using Colors -> Load Palette, selecting 216.pal as the palette.

Applying and reducing palettes is alway a process of trial and error; follow the steps below to get the best from your images. If you don't have an Undo feature, always keep the original image safe, or make duplicates of the image at each stage.

This checklist applies to existing images that didn't consider the 216 palette. See the next section for a guide on how to use the palette when creating new images.

  1. Apply the palette using the nearest colour method.
  2. If the results are poor, undo and apply the palette by dithering (or error diffusion).
  3. If the resulting file size is larger than you want, find out how many colours are actually used in the image (in Paint Shop Pro, for instance, this is under Colors -> Count Colors Used). If less than 30 colours are used, take the image down to 16 colours; again, try first using nearest colour and then dithering.
  4. If the image is acceptable in 16 colours, check the palette - you may have to edit certain slots as palette colours often drift by one or two points resulting in "unsafe" colours.
  5. If the image looks bad after applying the 216-colour palette and if the original image has more the 256 colours and you want to convert it to a GIF, convert the image to 256 colours using an adaptive palette. The manually change the colours in the palette for the most prominent (solid) colours.

Creating new images

[non anti-aliased text]
A graphic of non anti-aliased text of #3399CC.
[1000% zoom]
A 1000% zoom shows that the text is of just one colour.
[anti-aliased text]
The same text in the same colour with anti-aliasing.
[1000% zoom]]
1000% zoom shows more colours used for the text. Without optimisation, 64 colours are used in total. The graphic is four times bigger (2K).

Rather than applying the palette to new images you've created, choose colours from the 216 palette when creating new ones.

Choose from the 216 palette for at least the following graphical elements:

  • Type.
  • The background to type.

When creating a new image, it will most likely be a high-colour image. It will allow anti-aliased text and smooth lines and you will probably convert the finished image to a GIF.

Anti-aliasing (the effect of smoothing out the jagged edges of type and images) will increase the number of colours used in an image, most of which are unlikely to be in the 216 palette. Filters such as softening will also add to the colours used in an image; even though you may have started with a colour from the 216 palette, your final image could include 100s or 1000s of other colours.

  1. When you've finished creating your image save it as an uncompressed high-colour image (a TIFF, for example).
  2. Convert the image to a GIF and choose an adaptive palette. In Paint Shop Pro, this is using the Optimized Median Cut or Optimized Octree palette. Try using the Nearest colour reduction method first. If the image looks bad, undo and apply the Error diffusion method instead.
  3. Make a note of the palette and method you used.
  4. Save the file as a GIF and check the file size.
  5. If it is too big, reopen the original TIFF. Use the reduction method you made a note of but now take the GIF down to less than 256 colours, trying 128, 64, 32 and 16 colours. Each time, if the image still looks acceptable, save it as a GIF and check on the file size.
  6. When the image is the smallest it can be whilst remaining acceptable, now check the colours in the palette which are meant to be from the 216 palette. Paint Shop Pro tends to shift colours by 1-3 points (e.g., 102 will shift to 99). You therefore need to use a pipette tool to test solid areas of colour and edit the palette appropriately.

When to give images transparent backgrounds

Make images transparent when they're to be shown on a coloured background (that is, anything but white or black), even when on a solid colour.

[a button created on a coloured background]

When creating a button that will be shown on a coloured background, one sets the button background to the same colour (see the example on the right). The page background may then be set by an RGB value (using bgcolor) or with a background tile (using the background tag).

Web developers already know to make an image's background transparent when it's to be shown on a patterned background. However, the image background should be made transparent when it's going to appear on a solid colour other than black or white.

This is because there is a problem with Netscape (versions 3+, 4+ and 6+) on PCs when web pages are viewed on 16-bit displays (showing up to 65,536 colours). In these circumstances, the button background and cell or page background appear as different colours. (It is likely that a similar problem exists on 15-bit - High Color - displays.)

The problem is confounded in Netscape 4+ on PCs because some of the time the backgrounds appear different when the cell or page background has been set by bgcolor and other times the difference is only seen when a tile is used as the cell or page background. In both cases, however, tests indicate that the degree and direction of shift is the same and so the suggested workaround still applies.

The table below demonstrates this difference when the colour shift occurs between a button background and a background set by a tile. One column shows an ordinary button on a variety of cell backgrounds. The next column shows a transparent button on the same set of cell backgrounds.

The two test graphics - one has a transparent background
no transparency [non-transparent button on a white page background] [transparent button on a white page background] transparent background
The 16-bit simulations below apply to
Netscape versions 3+, 4+ and 6 on PCs
16-bit simulation
Coloured background
set with a background tile
[non-transparent button on a coloured page background set with bgcolor] [transparent button on a coloured page background set with bgcolor] The button background shifts to #9F309F but the cell background shifts to #903090.

There is a noticeable difference in backgrounds for the non-transparent button.

16-bit simulation
Coloured background
set with bgcolor
[non-transparent button on a coloured page background set with a coloured tile] [transparent button on a coloured page background set with a coloured tile] The background of both the button and the cell drift to #9F309F.

There's no noticeable difference between the button background and the cell background because they've all drifted to the same colour.

The same pair of graphics - they should look identical on True Color displays
Coloured background
set with bgcolor
[non-transparent button on a coloured page background set with bgcolor] [transparent button on a coloured page background set with bgcolor] Button and cell backgrounds set to #993399.

These four cells will look the same on computers which display 24-bit colour or higher.

Coloured background
set with a background tile
[non-transparent button on a coloured page background set with a background tile] [transparent button on a coloured page background set with a background tile]

These shifts happen because the 256 colour palette can't be exactly represented in 16-bit colour. The colours don't dither - they're just slightly different. The difference in shift between image background colour and cell or page background colour is likely due to a programming difference in Netscape in the relevant procedures which handle rendering for page images, tiled images and bgcolor colour.

This problem was described in detail in the WebMonkey article Death of the Websafe Color Palette? They discovered the shift of image backgrounds compared to cell backgrounds set with bgcolor.

The authors wrote: "We found that only 22 of the 216 colors we began with did not end up being shifted incorrectly in at least one viewing environment. So, it looks like we have roughly 22 colors that are really websafe -- Windows and Macintosh, Internet Explorer and Netscape Navigator, 8-bit, 16-bit, and 24-bit compatible for GIFs and bgcolor."

However, it isn't necessary to restrict your drawing palette to 22 colours if 1) you don't mind that most colours will shift (not dither) by a small amount and 2) you are able to make GIFs transparent on the background colour.

[button and white text on a transparent background] [button and white text on a coloured background

The main disadvantage of making images transparent is that they are often ugly or unreadable on the printed page when printed without the background colour, as shown on the right (the same button, but the right-hand button has a transparent background).

Finally, don't interlace transparent GIFs. There is a bug first seen in Netscape 3+ on PCs, which sometimes causes the edges of visible colour to be incorrectly displayed, even on white backgrounds - the edges appear exploded or smeared. This distortion goes away if the page is Refreshed.

How much do the safe colours shift?

[Graph showing the shift in RGB values in 16-bit colour]

The 16 bits of 16-bit colour are distributed as 5 bits each for red and blue and the remaining 6 bits for green. Because there are 5 bits for each of red and blue, there are only 32 (2 to the 5) possible red values and 32 possible blue values available. However, the 6 bits for green means that there are 64 possible values of green. This means that the red and blue components of RGB colour have larger gaps between them than the green component; that is, the shift is larger for values of red and blue.

The shift figures for the red, blue and green components of the standard 216 palette values are shown as a table and graphically. The shifts apply to foreground GIFs and are based tests in Netscape 4.7 on a PC.


For example, any combination of 0 (#00) or 255 (#FF) for red, blue and green will never shift. The greatest shift will be in the original safe colour where the red and blue components were 102 (#66) or 153 (#99) and the green was 51 (#33) or 204 (#CC), such as #993399, the test purple used in the button examples above.

Use bgcolor with body background

When using a background tile, always use it with body bgcolor to the closest colour even if that means not a colour from the 216 palette.

Since 1998, browsers tend to display the background tile last, giving priority to the text and images on the page. The background colour that will be displayed until your background tile is downloaded will likely be either white or grey. Page background colour set by body bgcolor, however, is displayed first.

If you have designed your pages assuming that your text and images will be displayed on a specific colour, they may be unreadable against the default background of white or grey (#C0C0C0). In addition, anti-aliased images will be displayed with fringing until the proper background is displayed.

[page using tile without bgcolor] [page using tile and bgcolor]

On the first demo page - which sets the background to a patterned tile with body background - the main text and image aren't readable until the background tile downloads.

The second demo page uses bgcolor with background. Setting a background by colour and tile means that text and images will look okay before the background tile is displayed.

Converting between hex and decimal


To convert between the hex and RGB values of the 216 palette, you only need to remember 6 numbers. All of the 216 colours are made up of RGB values where each value is one of:

All combinations of each set of 6 numbers are included in the 216 palette (e.g., this is #CC3366 or R:204 G:51 B:102.)