Jump to content

saila.com

Online media matters

Web Design

Using Colour on the Web

This is not meant as the definitive guide about colour on the Web, but rather a brief overview about how to effectively use red, green, and blue online.

Websafe colours

Initially, one of the limiting aspects of designing for the Web can be the 216-colour palette. The idea behind the Netscape-created colour-set was to maintain a consistent appearance for Web pages viewed on a Windows, Macintosh, or Unix machine.

To create a consistent Web site, it’s best to base the site’s colours on the Websafe ones. Luckily, most HTML editors now have that palette built in.

Go beyond

Moving beyond the Websafe palette provides a greater colour-depth for sites, but at the sacrifice of the cross-platform performance—some readers could see some garishly coloured site.

The Big-Two browsers can display a range of "unsafe" colours by simply declaring the colours name. For example, this text is coloured “Sienna”.

Another option is to convert regular RGB values (from a program like Photoshop), into hexadecimals.

Sienna, for example, is R:160,G:82,B:45 in RGB. As a hexadecimal number it is: A0522D. To use hexadecimal colours in HTML, be sure to prefix the number with a #, e.g., .

There are tools available to help calculate the number. The conversion changes the first set of numbers (red) into a two character hex number; does the same for the second set (green) and the third (blue).

A note on graphics

Websafe rust colour A dithered rust colour
Above is a Websafe rust-coloured GIF, it appears as solid colour. The sienna-coloured GIF appears dithered as it uses a mixture of two Websafe colours.

Using “unsafe” colours in GIF graphics could cause the colours to dither (a series of dots visually blend to mimic the original colour)

Choosing colours

Colour can be the quickest and most powerful way to create the tone of a Web site. The same practices used by interior decorators can be applied online.

For example, blues, greens and purples create a tranquil mood, while red creates a sense of energy and passion. About.com has a comprehensive chart on colour symbolism.

How colours work together is quite a complex science, but there are a number of good guides available offering a broad overview, including a comprehensive tutorial by the folks at the WebDesignClinic.

Contrast is key

There’s a reason why most Web site’s have dark text on a light background: reading online is not easy.

High-contrast colour-combinations like black on white, make the content stand out from the page, improving its readability (see an example of high-contrast text). That said, light text on a dark background creates the illusion the text being absorbed by the background.

Low-contrast colour-combinations make the text appear blurry to the reader (see an example of low-contrast).

Choosing the right colour-combinations for the text and background will also (unconsciously) improve a readers experience on the site.

Colours to avoid

Ever since Mosaic first appeared in 1993, blue text has been used to indicate a link somewhere, while purple has been used to tell the readers they’ve visited that link.

Because blue and purple text have such strong contains for readers, it’s best to avoid using these colours to highlight words online. Following that same logic, using those colours (or shades of them) for links will make a site seem easier to navigate.

Experiment

While colour theory and symbolism will increase your appreciation of how and why colour works, it is important to test out these theories in real life.

Like most things, the best way to learn how to effectively use colour online is by experimenting:

These colours can then be added to the site’s overall palette. Most sites use between five to ten colours throughout the pages. By limiting the palette to one set of colours, the overall site appears clean, well-planned, and professional.