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

Have you tried new the Independent Digital Edition apps?
ebooks
ebookA delicious collection of 50 meaty main courses
Life and Style
ebookNow available in paperback
  • Get to the point
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

    Ashdown Group: IT Project Coordinator (Software Development) - Kingston

    £45000 - £50000 per annum: Ashdown Group: IT Project Coordinator (Software Dev...

    Ashdown Group: Editor-in-chief - Financial Services - City, London

    £60000 - £70000 per annum + benefits : Ashdown Group: A highly successful, glo...

    Ashdown Group: Junior Application Support Analyst - Fluent German Speaker

    £25000 - £30000 per annum + benefits: Ashdown Group: A global leader operating...

    Ashdown Group: Accountant - London - £48,000 - 12 month FTC

    £40000 - £48000 per annum + bonus + benefits: Ashdown Group: International Acc...

    Day In a Page

    General Election 2015: Ed Miliband's unlikely journey from hapless geek to heart-throb

    Miliband's unlikely journey from hapless geek to heart-throb

    He was meant to be Labour's biggest handicap - but has become almost an asset
    General Election 2015: A guide to the smaller parties, from the the National Health Action Party to the Church of the Militant Elvis Party

    On the margins

    From Militant Elvis to Women's Equality: a guide to the underdogs standing in the election
    Amr Darrag: Ex-Muslim Brotherhood minister in exile still believes Egypt's military regime can be replaced with 'moderate' Islamic rule

    'This is the battle of young Egypt for the future of our country'

    Ex-Muslim Brotherhood minister Amr Darrag still believes the opposition can rid Egypt of its military regime and replace it with 'moderate' Islamic rule, he tells Robert Fisk
    Why patients must rely less on doctors: Improving our own health is the 'blockbuster drug of the century'

    Why patients must rely less on doctors

    Improving our own health is the 'blockbuster drug of the century'
    Sarah Lucas is the perfect artist to represent Britain at the Venice Biennale

    Flesh in Venice

    Sarah Lucas has filled the British pavilion at the Venice Biennale with slinky cats and casts of her female friends' private parts. It makes you proud to be a woman, says Karen Wright
    11 best anti-ageing day creams

    11 best anti-ageing day creams

    Slow down the ageing process with one of these high-performance, hardworking anti-agers
    Juventus 2 Real Madrid 1: Five things we learnt, including Iker Casillas is past it and Carlos Tevez remains effective

    Juventus vs Real Madrid

    Five things we learnt from the Italian's Champions League first leg win over the Spanish giants
    Ashes 2015: Test series looks a lost cause for England... whoever takes over as ECB director of cricket

    Ashes series looks a lost cause for England...

    Whoever takes over as ECB director of cricket, says Stephen Brenkley
    Fishing for votes with Nigel Farage: The Ukip leader shows how he can work an audience as he casts his line to the disaffected of Grimsby

    Fishing is on Nigel Farage's mind

    Ukip leader casts a line to the disaffected
    Who is bombing whom in the Middle East? It's amazing they don't all hit each other

    Who is bombing whom in the Middle East?

    Robert Fisk untangles the countries and factions
    China's influence on fashion: At the top of the game both creatively and commercially

    China's influence on fashion

    At the top of the game both creatively and commercially
    Lord O’Donnell: Former cabinet secretary on the election and life away from the levers of power

    The man known as GOD has a reputation for getting the job done

    Lord O'Donnell's three principles of rule
    Rainbow shades: It's all bright on the night

    Rainbow shades

    It's all bright on the night
    'It was first time I had ever tasted chocolate. I kept a piece, and when Amsterdam was liberated, I gave it to the first Allied soldier I saw'

    Bread from heaven

    Dutch survivors thank RAF for World War II drop that saved millions
    Britain will be 'run for the wealthy and powerful' if Tories retain power - Labour

    How 'the Axe' helped Labour

    UK will be 'run for the wealthy and powerful' if Tories retain power