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.

	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.
	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.

• 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.

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 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.

	Our preferred colour - #A5DDEB - is not from the 216 palette.			#99CCFF, the nearest safe colour to #A5DDEB.
	A ColorMix graphic of #A5DDEB by mixing two "safe" colours.			The ColorMix graphic zoomed 400%
	What happens when you let the browser do the dithering.			The dithered graphic zoomed 400%

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

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 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).

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.

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

A graphic of non anti-aliased text of #3399CC.

A 1000% zoom shows that the text is of just one colour.

The same text in the same colour with anti-aliasing.

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.

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			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			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			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			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

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.

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?

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.

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.)