The web-safe palette

Introduction

Having a monitor which is set to display 256 colours means that only a limited and specific set of colours can be displayed. When set to 256 colours, your computer doesn't display any 256 colours - instead, PCs and Macs have a specific set of 216 colours in common.

The 216 colours are shown on the right. They are sometimes referred to as the browser-safe or web-safe palette.

The video card installed on your computer determines how many colours your monitor displays. With modern video cards you can change how many colours your computer can display (on PCs, choose Start -> Settings -> Control Panel -> Display -> Settings -> Color palette).

Monitors set to 15- or 16-bit colour pose a different set of problems in the display of colour on web pages; if it's available, choose a higher setting (e.g., 32-bit).

16 colours (4-bit)
256 colours (8-bit)
High colour 32,768 colours (15-bit)
65,536 colours (16-bit)
True colour (24-bit or 32-bit)

For instance, the square on the right is from the 216 palette. You should see it as a box of solid colour (RGB #CC00FF).

These two images started off as colours not chosen from the 216 palette (RGB #7A378B). The first one may look like a solid colour to you. However, the right-most image simulates how the colour will look when used in a graphic on a computer set to 256 colours. The image is spotted.

The effect is more apparent when the image is enlarged. The spotting is called dithering and is the result of the browser trying to reproduce a colour by placing available colours (that is, from a 256 palette) next to each other.

Dithering only happens to graphics and is only noticeable on areas of solid colour in GIFs, like buttons and page tiles. Dithering is not normally noticeable on photographic quality images.

Why these particular 216 colours?

There are several ways of referring to colour. When specifying colour on web pages (or for graphics used in web pages), the RGB (red, green, blue) colour system is used. The 216 colours come about from a 6 x 6 x 6 colour cube of RGB colour and is used by PCs and Macs.

RGB colour is referred to as values of red, green and blue. The values are given either as percentages, in decimal (0-255) or in hexadecimal (00-FF). For example, white is 100% saturation of red, green and blue. Black is 0% red, green and blue. Greys have the same percentage of red, green and blue. Bright pink is 100% red and 100% blue. RGB colour in HTML is normally referred to in hexadecimal.

Dec	51	102	153	204	255
Hex	33	66	99	CC	FF
%	20	40	60	80	100

The 216-colour palette is made up of every combination of red, green and blue for individual values of 0%, 20%, 40%, 60%, 80% and 100% (or hex 00, 33, 66, 99, CC, FF). Thus, any combination of these values of red, green and blue will be from the 216 palette.

So, Process Blue is 100% blue. In hex, it is #0000FF.

What you can do about it

When this resource was first written in 1996, most people didn't have video cards that could display more than 256 colours. Web designers were advised to apply the entire 216 palette to all GIF images.

Computers bought today should have video cards which will allow more than 256 colours to be displayed. However, there are still computers being used to browse the web that are limited to 256 colours.

Read our tips on how and when to use the safe palette if you want to design a site that doesn't look ghastly on old computers (or ones which aren't set up to display more than 256 colours) but which looks its best on computers that can display millions of colours. Then explore our colour tools.