Colouring Your Website: Part 1

Over 80% of our visual information is related to colour with elements like line, shape and textures conveying a relatively small percentage of information. It is therefore obvious that colour should be major factor when designing your website as it is a very visual medium. However, many web developers over look the essentials of colour in web design and by doing so, many times produce a final product that lacks the effectiveness and impact the website could have if the right colours and design had been used.

Although impossible to cover the whole domain of colour and its importance and application relating to web design, this article will serve as an introduction to lay a solid foundation for building an understanding of colour and how to colour your website.

The Basics of Colour

Colour is the brains interpretation of the result of the spectrum of light being reflected and absorbed off an object as received by our eyes. The spectrum of light that is visible to the human eye has six distinct colours (these are the colours of the rainbow, with indigo not always recognized as a separate colour). These six main colours are red, orange, yellow, green, blue, and violet.

The other 10 million colours the average human can distinguish are the result of the ‘mixing’ these colours together forming an almost endless list of different colours. The colour wheel is a great tool to help visualise and understand the relationships between colours and essential when relating to the use of colour in design.

The Colour Wheel

The Colour wheel is an illustrative organisation of colours, displayed in a circle and can be used to represent the various relationships found between different colours.

There are three primary colours: Red, Yellow and Blue. From these three primary colours it is possible to mix every basic colour and they will form the bases of the colour wheel. When two primary colours are evenly combined together, a secondary colour is formed. Green, Purple and Orange are the three secondary colours. The colour wheel diagram on the right represents the basic relationship between the primary and secondary colours.

By adding either white or black to primary and secondary colours, various hues or shades are formed and by combining all three primaries together even more colours will result.

Interpreting the colour wheel

The colour Wheel is not only a visual display of the primary and secondary colours, but is an indispensable tool for exploring the relationship between various colours and for eventually selecting colours to be used in design. Every colour has a unique quality and perception and when you can understand how various colours relate, you can combine colours in such a way that their unique qualities can magnify the visual information a design portrays.

The following are basic descriptions of the primary and secondary colours as they relate to their emotional and psychophysical (relationship between physical stimuli and their subjective correlates, or precepts) properties. A list of actions, objects and emotions have also been added to highlight each colour’s properties

> Red Energy, strength, passion, eroticism, cheerfulness, courage, element of fire, career goals, fast action, lust, desire, blood, vibrancy, driving forces, risk, fame, love, survival, war, revolution, danger, aggression, power, determination, emotional intensity, sex, provoking, dynamic, stimulating, bravery, good-tasting, force, leadership, drama, excitement, speed, heat, warmth, violence, attention, generosity, romance

> Yellow sun, intelligence, light, accelerated learning, memory, logical imagination, social energy, cooperation, organisation, breaking mental blocks, sunshine, joy, happiness, intellect, energy, cheerfulness, optimism, purity, enthusiasm, warmth, honour, loyalty, mental force, clarity, perception, understanding, wisdom, dishonesty, betrayal, jealousy, covetousness, deceit, disease, weakness, caution, cowardice, follower, curiosity, mellowness, confidence, humour, dreams, creativity, desire to improve, action, idealism, imagination, hope, summer, philosophy, uncertainty, restlessness, glory, enlightenment

> Blue good fortune, communication, wisdom, protection, spiritual inspiration, calmness, reassurance, gentleness, fluidity, water, sea, creativity, peace, calming, higher thoughts, mystery, sky, formality, travel, progress, quiet wisdom, freedom, betterment of humanity, love, trust, loyalty, intelligence, reassurance, artistry, compassion, inner strength, devotion, depression, sadness, tranquility, stability, unity, truth, understanding, confidence, acceptance, conservatism, security, cleanliness, order, comfort, cold, technology, harmony, depth, faith, heaven, piety, sincerity, precision, intellect, sadness, consciousness, speech, messages, ideas, sharing, cooperation, idealism, sincerity, empathy, relaxation, affection, inspiration, friendship, patience, contemplation, infinity, non-threatening, dependability

> Orange warmth, energy, balance, enthusiasm, vibrancy, vitality, expansiveness, flamboyance, excitement, business goals, property deals, ambition, career, goals, general success, justice, legal matters, selling, action, attention-grabbing, the sun, friendly, inviting, intense, joy, strength, endurance, steadfastness, tropics, quick movement, wealth of the mind and knowledge, charity, growing things, fascination, friendliness, happiness, beginnings, heat, creativity, autumn, determination, attraction, success, encouragement, courage, earth, mental and appetite stimulatant, emotional lift, assurance, social force, health, warmth, attractiveness, cheerfulness, mood-lightening, uninhibited, independence, amiability, constructiveness, self-assuredness, cheap, low-budget, fun kids colour, youth

> Green earth mother, physical healing, monetary success, abundance, fertility, tree & plant magic, growth, food, hope, personal goals, resurrection, renewal, youth, stability, endurance, freshness, nature, environment, tranquil, refreshing, quiet, hope, immortality, health, healing, good luck, renewal, youth, jealousy, inexperience, trees, grass, vigour, growth, harmony, responsiveness, generosity, safety, envy, misfortune, quietude, compassion, moderation, nurturing, diplomacy, calm, contemplation, joy, love, abundance, balance, self-control, hope, good omens, soothing, sharing, dependability, friendliness

> Purple influence, third eye, psychic ability, spiritual power, self assurance, hidden knowledge, dignity, high aspirations, royalty, spirituality, nobility, ceremony, mystery, transformation, wisdom, enlightenment, sophistication, cruelty, arrogance, intuition, dreams, unconscious, invisible, telepathy, empathy, imagination, deja vu, universal spirit, spiritual connection, deeper truth, nobility, wealth, extravagance, dignity, independence, magic, creativity, energy, self-confidence, ego, ambition, fame, luxury, big profits, richness, sensuality, elegance, contemplation, meditation, majesty, lesbianism, Wicca, New Age spirituality, paganism, conceit, arrogance, nausea

Although colour can be studied as a science, the application and use of colours in design and media is very much open to personal opinions and cultural interpretations. In ‘Colouring Your Website: Part 2’ we will have a closer look at the relationship between colours and how to build basic colour schemes for use with basic graphic and design.

NSD iMag - Articles