Thursday, August 30, 2007


Ruby has helped me write beautiful code - more expressive and abstract - and hence more maintainable. I've become interested in enhancing my visual design skills to match!

One area of visual design that seems particularly subjective is colour (that's Australian for 'color').

This post is a summary of basic colour ideas researched up from the wild web.

Colour Matters!

On your website, use color to create the most functional user-interface design.
For example, use color to direct the eye to the most important areas on the page. The web designer must identify what ideal and normal sequences might entail: what the viewer should see first, where the eye should move next, and how much time the viewer's attention should be held by each area.

Keep colors to minimum. "Signal detection" theory means that the brain is able to understand and organize information when a minimum of colors and shapes exists within the visual field. Too many colors and shapes make it impossible to focus and find anything.

  • Use colour to direct the eye to important areas
  • Identify the sequence of focal areas (ideal & normal)
  • Keep Colours and shapes to a minimum
The main emphasis is on using colour as a means of focusing attention ...but which colours?

Which Colours?

This is where things get very subjective - the realm of psychology. Color psychology is a field of psychology devoted to analyzing the effect of color on human behavior and feeling.

This seems to be very culturally dependent - see Wikipaedia for a table of some common cultural (symbolic) connotations attached to colors in Western cultures.

  • Realise that colours will evoke behaviour & feelings in humans!
  • Keep in mind colour psychology when selecting your colours
  • It's subjective!

Using Colours For Focus

Let's move on to something less subjective - how to use colours to direct the eye. In order to understand this, you need to understand how colours relate to one another.

The Colour Wheel

An indispensible tool for selecting colour - the color wheel (or circle) is a visual representation of colors arranged according to their chromatic relationship. It essentially provides a method of selecting colours based on their relationship to one another.

There's a number of useful colour wheels you can user directly on the web - google 'em.

Here's a selection:-

Peter Piper's Pallete:
Uses a 'cross' rather than wheel, but shows 7 colours at once - each in varying levels of proporition.

The Color Wizard:
Select a colour - then it will show you related colours.

Digital Color Wheel:
Similar to the color wizard, it helps see which colors go with what. You can choose your primary or reference color, then move the mouse over the different color schemes – analogous, split complementary etc.

Random Color Generator:
Generates three random colours with a text block preview. Useful when you're totally stuck with designer's block!

Complimentary or analogous?

When complementary colours are used together, they seem to make each other brighter and more vivid. They are located opposite from each other on the colour wheel.

Analogous colours will tend to blend together, and provides a feeling of harmony. They are located next to each other around the colour wheel.

Passive or active?

The color wheel can be further divided into ranges that are visually active or passive.

Most often warm, saturated, light value hues are "active" and visually advance. Active colors will appear to advance when placed against passive hues.

Cool, low saturated, dark value hues are "passive" and visually recede. Passive colors appear to recede when positioned against active hues.


When using colours, realise that the proportions of each colour affect focal points, and can help draw the eye from one area to another
  • The color with the largest proportional area is the dominant color (the ground).
  • Smaller areas are subdominant colors.
  • Accent colors are those with a small relative area, but offer a contrast because of a variation in hue, intensity, or saturation (the figure).
Placing small areas of light color on a dark background, or a small area of dark on a light background will create an accent.

Summary of links:

Principles of design:

Colour tutorial:

Color and E-Commerce:

Learning to Use Color on Your Website:

Peter Piper's Pallete:

Random Color Generator:

The Color Wizard:

Digital Color Wheel: