|About us||RCL 20||Projects||Colour Selector||Library|
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.
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.
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:
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.
You can avoid using colours from the 216 palette in your background tile graphic if you take account of the following:
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.
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.
Text tests on the simulated browser-dithered and solid "unsafe" colour are shown below.
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.
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.
The size of a GIF is determined by:
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.
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:
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.
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.
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.
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.
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.)
Copyright © Limitless Innovations 2022