Network: Web design

While most designers work on high-end machines that can display millions of colours, many people surfing the Web are using computers with only the 256-colour palette.

Colour is the gremlin in the works for the World Wide Web. The problem is that not all computers are created equal, especially when it comes to colour. On your high-end professional machine, you design a brilliant Web site with bold colours, drop shadows, anti-aliased text, and 3-D buttons. Then on the machine across the hall it looks like a grainy colour photo that's been left out in the sun too long.

If you have been working in Web or multimedia design, you have probably come across the 216 "safe" colours. These are the only colours that are guaranteed to display correctly on Macintosh and Windows computers. Why? Well, it has to do with how different computers display colours.

The painter George Seurat developed the technique of "Pointillisme." He placed small dots of paint from his palette on to the canvas close together to create the illusion of a continuous image. Computer screens work a lot like that, placing dots of colour on the screen.

The more colours at your disposal on the palette, the easier it is to fool your eye. Seurat only had a few dozen colours in his palette, while many computers have a set of 256 specific colours in their palettes. Some computers will have thousands or millions of colours in their palletes. It all depends on the quality of the monitor, the video card and the amount of computer memory.

If you create an image on a machine that has thousands of colours in its palette and then display it on a machine with only 256 colours in its palette, any colours in the image not in the palette of 256 will either be replaced by a closely matching colour or dithered by trying to mix colours on the screen visually. This rarely gives a very satisfying result and ends up just looking grainy.

The problem is compounded by the fact that Macs will have one palette of 256 specific colours and Windows machines have another palette of 256 specific colours. The 216 safe colours represent the common colours between these two palettes.

It's actually not that hard to remember all 216 safe colours, not by name of course, but either on the RGB or hexadecimal scales. Both scales use a list of three separate values. The first value tells the computer how much red to mix in the colour, the second is green, and the third is blue. To be browser safe, for RGB you can use 0, 51, 102, 153, 204 or for hexadecimal 255 or 00, 33, 66, 99, CC, and FF in any combination in the three slots. So 153 0 102 is the same as 990066 and produces a reddish purple.

Why limit yourself to just these 216 colours? While most designers work on high-end machines that can display millions of colours, many people surfing the Web are using computers with only the 256 colour palette. Any colours not in their palette have to be matched or dithered and will more than likely destroy your design. To stay consistent, some designers adhere to the safe list like it was the 11th commandment, never allowing impure colours into their designs.

In practice, though, 216 colours is not a lot of colours. Photographs, anti-aliasing and 3-D effects all look pretty sad with only these colours. And just try to match a company's signature colour! That's why a lot of designers figure "why bother?", and use whatever colours they want regardless of how it will appear on "low-end" computers.

This is my advice: try to compromise. Stick to the browser-safe colours when you can, but don't become a fanatic. There's no need for you to pander to the lowest common denominator, but consider everyone's viewing pleasure. Here are a few simple things you can do to compromise:

If you are setting the background, text, or link colour for a page, use a safe colour.

If you are creating a graphic with a large area of solid colour, use the safe colours.

If you are creating a graphic with gradients or anti-aliasing, make the predominant colour a safe one, ensuring that at least the largest area of colour will stay undithered.

Reduce the number of colours to as few as possible in your image. This will not only help alleviate dithering, but will make for smaller and thus faster loading graphics.

Use the safe colours unless there is a good design reason not to.

There are no hard statistics that report how many Web surfers have 256 colours, but they are likely to be enough of your audience to be worth a little extra effort and thought.

If you have any suggestions, gripes or other comments about this article, please contact Jason Cranford Teague at mshadow@dircon.co.uk

PROMOTED VIDEO
Have you tried new the Independent Digital Edition apps?
Life and Style
ebooksA superb mix of recipes serving up the freshest of local produce in a delicious range of styles
Life and Style
ebooksFrom the lifespan of a slug to the distance to the Sun: answers to 500 questions from readers
Arts and Entertainment
Robert De Niro, Martin Scorsese and DiCaprio, at an awards show in 2010
filmsDe Niro, DiCaprio and Pitt to star
News
i100
News
In this photo illustration a school student eats a hamburger as part of his lunch which was brought from a fast food shop near his school, on October 5, 2005 in London, England. The British government has announced plans to remove junk food from school lunches. From September 2006, food that is high in fat, sugar or salt will be banned from meals and removed from vending machines in schools across England. The move comes in response to a campaign by celebrity TV chef Jamie Oliver to improve school meals.
science
Sport
England captain Wayne Rooney during training
FOOTBALLNew captain vows side will deliver against Norway for small crowd
Life and Style
Red or dead: An actor portrays Hungarian countess Elizabeth Báthory, rumoured to have bathed in blood to keep youthful
health
News
peopleJustin Bieber charged with assault and dangerous driving after crashing quad bike into a minivan
News
peopleHis band Survivor was due to resume touring this month
News
people'It can last and it's terrifying'
Life and Style
fashionModel of the moment shoots for first time with catwalk veteran
Sport
Radamel Falcao poses with his United shirt
FOOTBALLRadamel Falcao's journey from teenage debutant in Colombia to Manchester United's star signing
Life and Style
fashionAngelina Jolie's wedding dressed revealed
Latest stories from i100
Have you tried new the Independent Digital Edition apps?
Independent Dating
and  

By clicking 'Search' you
are agreeing to our
Terms of Use.

ES Rentals

    iJobs Job Widget
    iJobs General

    Front-Office Developer (C#, .NET, Java,Artificial Intelligence)

    £30000 - £45000 per annum + benefits+bonus+package: Harrington Starr: Front-Of...

    C++ Quant Developer

    £700 per day: Harrington Starr: Quantitative Developer C++, Python, STL, R, PD...

    Java/Calypso Developer

    £700 per day: Harrington Starr: Java/Calypso Developer Java, Calypso, J2EE, J...

    SQL Developer

    £500 per day: Harrington Starr: SQL Developer SQL, C#, Stored Procedures, MDX...

    Day In a Page

    Chief inspector of GPs: ‘Most doctors don’t really know what bad practice can be like for patients’

    Steve Field: ‘Most doctors don’t really know what bad practice can be like for patients’

    The man charged with inspecting doctors explains why he may not be welcome in every surgery
    Stolen youth: Younger blood can reverse many of the effects of ageing

    Stolen youth

    Younger blood can reverse many of the effects of ageing
    Bob Willoughby: Hollywood's first behind the scenes photographer

    Bob Willoughby: The reel deal

    He was the photographer who brought documentary photojournalism to Hollywood, changing the way film stars would be portrayed for ever
    Hollywood heavyweights produce world's most expensive corporate video - for Macau casino

    Hollywood heavyweights produce world's most expensive corporate video - for Macau casino

    Scorsese in the director's chair with De Niro, DiCaprio and Pitt to star
    Angelina Jolie's wedding dress: made by Versace, designed by her children

    Made by Versace, designed by her children

    Angelina Jolie's wedding dressed revealed
    Anyone for pulled chicken?

    Pulling chicks

    Pulled pork has gone from being a US barbecue secret to a regular on supermarket shelves. Now KFC is trying to tempt us with a chicken version
    9 best steam generator irons

    9 best steam generator irons

    To get through your ironing as swiftly as possible, invest in one of these efficient gadgets
    England v Norway: Wayne Rooney admits England must ‘put on a show’ to regain faith

    Rooney admits England must ‘put on a show’ to regain faith

    New captain vows side will deliver for small Wembley crowd
    ‘We knew he was something special:’ Radamel Falcao's journey from teenage debutant to Manchester United's star signing

    ‘We knew he was something special’

    Radamel Falcao's journey from teenage debutant to Manchester United's star signing
    'I’ll tell you what I would not serve - lamb and potatoes': US ambassador hits out at stodgy British food served at diplomatic dinners

    'I’ll tell you what I would not serve - lamb and potatoes'

    US ambassador hits out at stodgy British food
    Radio Times female powerlist: A 'revolution' in TV gender roles

    A 'revolution' in TV gender roles

    Inside the Radio Times female powerlist
    Endgame: James Frey's literary treasure hunt

    James Frey's literary treasure hunt

    Riddling trilogy could net you $3m
    Fitbit: Because the tingle feels so good

    Fitbit: Because the tingle feels so good

    What David Sedaris learnt about the world from his fitness tracker
    Saudis risk new Muslim division with proposal to move Mohamed’s tomb

    Saudis risk new Muslim division with proposal to move Mohamed’s tomb

    Second-holiest site in Islam attracts millions of pilgrims each year
    Alexander Fury: The designer names to look for at fashion week this season

    The big names to look for this fashion week

    This week, designers begin to show their spring 2015 collections in New York