Web Safe Colours

In the early days of the web there were a significant portion of web site visitors who were still using computers that were set to display only 256 colours on the screen (this is called 8 bit colour). Exactly what colours were included in that 256 could vary between computers but there are 216 colours that all of these computers can display and these 216 colours became known as the web safe colours because if you used them on your web page you could be sure that those using 8 bit colour displays would see those exact colours rather than them being adjusted to the nearest colour that your visitor had available.

The next step up from 8 bit colour is 16 bit colour which allows 65,536 different colours. This colour mapping uses a different system from the 8 bit colour system and makes the exact same 65,536 colours available to all computers set to that colour system.

The final step up from that is 24 bit colour which allows for over 16 million different colours to be displayed - more than anyone could possibly ever distinguish between. Some computers list a 32 bit colour mode but this is just 24 biit colour with transparency added and doesn't affect the number of actual colours available.

The colours that are safe for one level of colour are not necessarily safe at a different colour level. All of the colours that 8 bit and 16 bit colour modes can display are all included in the colours that 24 bit colour can display so if you are just looking at 8 bit and 24 bit or just looking at 16 bit and 24 bit then the number of safe colours is 216 and 65,536 respectively. The problem comes when you look at supporting both 8 bit and 16 bit colour because only 7 of the 216 colours are also in the 65,536 colours. This means that if you are looking at supporting all three colour modes then there are only 7 safe colours you can use and most of those are shades of green.

To properly support all three colour levels a different solution is needed.

Instead of looking at what colours always display the same regardless of colour level, we need to instead look at why we need to know exactly what colour will be displayed. What actually happens iif a page at a lower colour setting needs to display a colour that is not oonne it can handle is that it displays the nearest colour that it has available to display. This means that those on lower colour level settings will see the page in slightly different colours from those using higher level settings which will be true for most of the things they display on their screen and they will not even notice the difference.

Why the concern about web safe colours then? Well there is one and only one situation where using web safe colours in a web page is important.

Where you have a background colour defined in your web page that can't be matched exactly then the browser selects the closest colour. Where you have an image that contains a colour that can't be matched exactly then again the nearest colour will be chosen. The problem is that what is considered to be the nearest colour for abackground colour defined for the web page and what would be considered to be the nearest colour to that same colour within an image are not necessarily the same. Where you havve an image and a background that are both supposed to be the same colour they may not both end up being the same colour at lower colour levels. If you want an image to look like it has a shape other than rectangular and use a background colour for the rest that is supposed to blend into the background of the page then it can only be guaranteed to do so if you select one of the seven web safe colours that all three colour levels support.

The simple solution to this is transparency. If you make the background of the image transparent rather than try to match the background colour then whatever colour the background ends up bbeing will show throughh the transparent sections of the image and there will be no border visible regardless of what colours are used.

Both GIF annd PNG-8 have support for setting one colour to be transparent that work in all of the browsers that people are likely to use to visit your page and so ussing either of those formats will allow you to incorporate images containing as many as 255 colours along with a transparent background. PNG-32 allows for more colours as well as transparency but is not supported properly on some commonly used versions of Internet Explorer although there are ways that people have worked out to patch for this for when more colours and transparency are both required.

Most people these days have their screen set to 16 bit colour or higher. This means that there are 65,536 web safe colours available, although most people seem to still prefer to use colours that were web safe for 8 bit colour but which are not web safe at 16 bit simply because they don't understand what web safe colours is all about. Fortunately most of them also use transparent backgrounds on the images that require them which means that the fact that they are not using web safe colours even though they think they are is irrelevant since the issue of web safe colouurs was only ever relevant to matching colours between an image and a background.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow