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?
Life and Style
ebookNow available in paperback
ebooks
ebookPart of The Independent’s new eBook series The Great Composers
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: Technical Presales Consultant - London - £65,000 OTE.

    £65000 per annum: Ashdown Group: Technical Presales Engineer - central London ...

    Recruitment Genius: Physiotherapist / Sports Therapist

    £20000 - £50000 per annum: Recruitment Genius: A Physiotherapist / Sports Ther...

    Recruitment Genius: Sales Executive / Advisor

    £8 - £9 per hour: Recruitment Genius: Sales Executives / Advisors are required...

    Recruitment Genius: Warehouse Operative

    £14000 - £15000 per annum: Recruitment Genius: An opportunity has arisen for a...

    Day In a Page

    Homeless Veterans campaign: Donations hit record-breaking £1m target after £300,000 gift from Lloyds Bank

    Homeless Veterans campaign

    Donations hit record-breaking £1m target after huge gift from Lloyds Bank
    Flight MH370 a year on: Lost without a trace – but the search goes on

    Lost without a trace

    But, a year on, the search continues for Flight MH370
    Germany's spymasters left red-faced after thieves break into brand new secret service HQ and steal taps

    Germany's spy HQ springs a leak

    Thieves break into new €1.5bn complex... to steal taps
    International Women's Day 2015: Celebrating the whirlwind wit of Simone de Beauvoir

    Whirlwind wit of Simone de Beauvoir

    Simone de Beauvoir's seminal feminist polemic, 'The Second Sex', has been published in short-form for International Women's Day
    Mark Zuckerberg’s hiring policy might suit him – but it wouldn’t work for me

    Mark Zuckerberg’s hiring policy might suit him – but it wouldn’t work for me

    Why would I want to employ someone I’d be happy to have as my boss, asks Simon Kelner
    Confessions of a planespotter: With three Britons under arrest in the UAE, the perils have never been more apparent

    Confessions of a planespotter

    With three Britons under arrest in the UAE, the perils have never been more apparent. Sam Masters explains the appeal
    Russia's gulag museum 'makes no mention' of Stalin's atrocities

    Russia's gulag museum

    Ministry of Culture-run site 'makes no mention' of Stalin's atrocities
    The big fresh food con: Alarming truth behind the chocolate muffin that won't decay

    The big fresh food con

    Joanna Blythman reveals the alarming truth behind the chocolate muffin that won't decay
    Virginia Ironside was my landlady: What is it like to live with an agony aunt on call 24/7?

    Virginia Ironside was my landlady

    Tim Willis reveals what it's like to live with an agony aunt on call 24/7
    Paris Fashion Week 2015: The wit and wisdom of Manish Arora's exercise in high camp

    Paris Fashion Week 2015

    The wit and wisdom of Manish Arora's exercise in high camp
    8 best workout DVDs

    8 best workout DVDs

    If your 'New Year new you' regime hasn’t lasted beyond February, why not try working out from home?
    Paul Scholes column: I don't believe Jonny Evans was spitting at Papiss Cissé. It was a reflex. But what the Newcastle striker did next was horrible

    Paul Scholes column

    I don't believe Evans was spitting at Cissé. It was a reflex. But what the Newcastle striker did next was horrible
    Miguel Layun interview: From the Azteca to Vicarage Road with a million followers

    From the Azteca to Vicarage Road with a million followers

    Miguel Layun is a star in Mexico where he was criticised for leaving to join Watford. But he says he sees the bigger picture
    Frank Warren column: Amir Khan ready to meet winner of Floyd Mayweather v Manny Pacquiao

    Khan ready to meet winner of Mayweather v Pacquiao

    The Bolton fighter is unlikely to take on Kell Brook with two superstar opponents on the horizon, says Frank Warren
    War with Isis: Iraq's government fights to win back Tikrit from militants - but then what?

    Baghdad fights to win back Tikrit from Isis – but then what?

    Patrick Cockburn reports from Kirkuk on a conflict which sectarianism has made intractable