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
ebookA delicious collection of 50 meaty main courses
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.

SPONSORED FEATURES

ES Rentals

    iJobs Job Widget
    iJobs General

    Recruitment Genius: Travel Customer Service and Experience Manager

    £14000 - £17000 per annum: Recruitment Genius: The fastest growing travel comp...

    Recruitment Genius: Cleaner / Caretaker / Storeman

    £15500 - £17680 per annum: Recruitment Genius: A position has become available...

    Recruitment Genius: Head of Sales - SaaS B2B

    £60000 - £120000 per annum: Recruitment Genius: This conference call startup i...

    Recruitment Genius: Web Developer

    £25000 - £30000 per annum: Recruitment Genius: This digital and print design a...

    Day In a Page

    Blairites be warned, this could be the moment Labour turns into Syriza

    Andrew Grice: Inside Westminster

    Blairites be warned, this could be the moment Labour turns into Syriza
    HMS Victory: The mystery of Britain's worst naval disaster is finally solved - 271 years later

    The mystery of Britain's worst naval disaster is finally solved - 271 years later

    Exclusive: David Keys reveals the research that finally explains why HMS Victory went down with the loss of 1,100 lives
    Survivors of the Nagasaki atomic bomb attack: Japan must not abandon its post-war pacifism

    'I saw people so injured you couldn't tell if they were dead or alive'

    Nagasaki survivors on why Japan must not abandon its post-war pacifism
    Jon Stewart: The voice of Democrats who felt Obama had failed to deliver on his 'Yes We Can' slogan, and the voter he tried hardest to keep onside

    The voter Obama tried hardest to keep onside

    Outgoing The Daily Show host, Jon Stewart, became the voice of Democrats who felt the President had failed to deliver on his ‘Yes We Can’ slogan. Tim Walker charts the ups and downs of their 10-year relationship on screen
    RuPaul interview: The drag star on being inspired by Bowie, never fitting in, and saying the first thing that comes into your head

    RuPaul interview

    The drag star on being inspired by Bowie, never fitting in, and saying the first thing that comes into your head
    Secrets of comedy couples: What's it like when both you and your partner are stand-ups?

    Secrets of comedy couples

    What's it like when both you and your partner are stand-ups?
    Satya Nadella: As Windows 10 is launched can he return Microsoft to its former glory?

    Satya Nadella: The man to clean up for Windows?

    While Microsoft's founders spend their billions, the once-invincible tech company's new boss is trying to save it
    The best swimwear for men: From trunks to shorts, make a splash this summer

    The best swimwear for men

    From trunks to shorts, make a splash this summer
    Mark Hix recipes: Our chef tries his hand at a spot of summer foraging

    Mark Hix goes summer foraging

     A dinner party doesn't have to mean a trip to the supermarket
    Ashes 2015: With an audacious flourish, home hero Ian Bell ends all debate

    With an audacious flourish, the home hero ends all debate

    Ian Bell advances to Trent Bridge next week almost as undroppable as Alastair Cook and Joe Root, a cornerstone of England's new thinking, says Kevin Garside
    Aaron Ramsey interview: Wales midfielder determined to be centre of attention for Arsenal this season

    Aaron Ramsey interview

    Wales midfielder determined to be centre of attention for Arsenal this season
    Community Shield: Arsene Wenger needs to strike first blow in rivalry with Jose Mourinho

    Community Shield gives Wenger chance to strike first blow in rivalry with Mourinho

    As long as the Arsenal manager's run of games without a win over his Chelsea counterpart continues it will continue to dominate the narrative around the two men
    The unlikely rise of AFC Bournemouth - and what it says about English life

    Unlikely rise of AFC Bournemouth

    Bournemouth’s elevation to football’s top tier is one of the most improbable of recent times. But it’s illustrative of deeper and wider changes in English life
    A Very British Coup, part two: New novel in pipeline as Jeremy Corbyn's rise inspires sequel

    A Very British Coup, part two

    New novel in pipeline as Jeremy Corbyn's rise inspires sequel
    Philae lander data show comets could have brought 'building blocks of life' to Earth

    Philae lander data show comets could have brought 'building blocks of life' to Earth

    Icy dust layer holds organic compounds similar to those found in living organisms