People are physically, psychologically, and socially influenced by colour. Colour has been found to have connections to health and it can help set the mood through which your designs are seen. Colour communicates meaning and so we need to be conscious of what meaning we’re conveying when we choose to use one colour over another. It’s not enough for a designer to use a colour simply because he or she likes that colour. Colour is a tool in the designer’s toolbox much the same as a grid or whitespace and it’s important to understand how to use that tool.
The first and perhaps most important thing to understand about the meaning of colour is that there is no substantive evidence that support a universal system of colour meaning. It’s not that colour themselves have specific meaning, but rather that we have culturally assigned meanings to them.
While some colour symbolism exists globally (red as the colour of a stop sign, yellow for caution), colour symbolism tends to be more common within a given culture than across different cultures (white is used for weddings in Western cultures and for funerals in Eastern cultures).
Even within a single culture individual differences will exist. You and I will not necessarily be affected in the same way by seeing the same colour.
The above means that it’s important to understand who your target audience is and how your audience attaches meaning to colour. Again it’s not that a colour has a specific meaning on its own. It’s that we’ve culturally assigned meaning to colours. Keep that in mind as you read some of the specifics about the colour mentioned below.
Warm Colour: For the sake of simplicity let’s define warm colour as red, orange and yellow. These are the colour of fire. They radiate warmth. Warm colours are more often associated with passion, energy, impulsiveness, happiness, coziness, and comfort. They draw attention and have the advantage of being inviting and harmonious.
Cool Colours: Again for the sake of simplicity let’s define cool colour as green, blue, and violet. These are the colours of water. Cool colours are more often associated with calm, trust, and professionalism. The are also associated with sadness and melancholy. The have the advantage of being professional and harmonious, but can also turn people off by the coolness they radiate.
Note: The demarcation point between warm and cool colours falls somewhere between yellow/green and violate red. Green and purple don’t fall neatly into either warm or cool camps. The tend to take on the properties of one or the other based on the surrounding context.
Red: is the colour of fire and blood. It’s emotionally intense. Red is associated with energy, war, danger, strength, power, determination, action, confidence, courage, vitality, passion, desire, and love. It can enhance metabolism, increase respiration, and raise blood pressure. Red has a high visibility and advances to the foreground. It is often used for buttons in order to get people to take impulsive action.
Yellow: is the colour of the sun. Bright yellow attracts attention, though it can also be distracting when overused. Yellow is associated with joy, happiness, wisdom, and intellectual energy. It stimulates mental activity and generates muscle energy. Yellow produces a warming effect, arouses cheerfulness and is often used to evoke pleasant feelings. Shades of yellow can become dingy lessening the pleasing effect.
Blue: is the colour of the sky and the sea. It has the opposite effect of red and slows metabolism, breathing, and heart rate. It’s seen as a masculine colour. Blue is associated with trust, loyalty, wisdom, intelligence, expertise, confidence, stability and depth. It creates a calming effect, suppresses appetite and has been considered to be beneficial to both body and mind. Blue is often used for corporate sites given the previously mentioned associations.
Orange: combines the energy or red with the happiness of yellow. It’s not as aggressive as red and calls to mind healthy food (citrus). . Orange is associated with joy, sunshine, the tropics, enthusiasm, happiness, fascination, creativity, determination, attraction, success, encouragement, stimulation, and strength. It can increase appetite and evokes thoughts of fall and harvest.
Green: is the colour of nature. It symbolises growth, hope, freshness, and fertility. In countries with green money such as the U.S. it evokes thoughts and feelings of financial wealth. Green is associated with healing, stability, endurance, harmony, safety. life, and well being. It can sometimes signify a lack of experience and is often used to indicate the safety of drugs and medical products in advertising.
Purple: combines the stability of blue and the energy of red. It conveys wealth and extravagance and is seen as the colour or royalty. It symbolises power, nobility, luxury, and ambition. Purple is associated with wisdom, dignity, independence, creativity, mystery, and magic. Light purple is seen as feminine and purple is a popular colour with children. Purple occurs less frequently in nature and some may consider it artificial. In Catholic cultures it is representative of death and in some Islamic nations it is associated with prostitution.
White: is associated with light, goodness, innocence, purity, virginity. It usually has positive connotations and is seen as clean and safe.
Black: is associated with power, elegance, formality, death, evil, and mystery. It denotes strength and authority, is seen as formal and elegant, and brings forth feelings of fear and the unknown.
Grey: is the colour of sorrow, detachment, and isolation. It connotes responsibility and conservative practicality. It’s a neutral colour and creates a non-invasive feeling. It’s associated with security, maturity, and dependability. It can be used to reduce the intense energy of another colour and to emphasise a willingness to comply. Some people who prefer gray many be seen as the lone wolf type or narrow-minded.
Brown: is the colour of the earth and tends to blend into the background. It’s associated with material things, order, and convention. It’s connection to the earth gives it stability. Brown can convey a solid and wholesome feeling.
The Visual Effect of Colour in Your Designs
Using colours that don’t work well together, using too many colours, or even not enough could drive people away before they have a chance to absorb your content. Ideally you should plan and choose a colour scheme from the start and you should be consistent in how you use colour in your design.
Colour is used to attract attention, group related elements, convey meaning, and generally enhance the aesthetics of your site. It can be used to organise your elements and create a visual hierarchy in your design.
A small dose of colour that contrasts with your main colour will draw attention. It will give emphasis. Repeating colours on elements like page headings gives an immediate visual cue that those headings are related.
Warmer colours advance into the foreground while cooler colours recede into the background. Your choice in warm and cool colours can affect the figure/ground relationship of your elements. Since cooler colours recede you may decide to use them for background elements and because warmed colours advance they make a good choice for elements in the foreground.
By mixing warm and cool colours you can create depth in your design. Consider Van Gogh’s Cornfield with Cypress above. Colour is not the only way Van Gogh gives depth to the painting, but notice how the colours add to the depth. The mountains, sky and clouds use cooler colours, while the cornfield uses warmer colours.
You might choose a warmer colour for the type on top on an image to ensure it’s seen. Naturally it depends on the colours in the image as it will be more important to make sure the text colour contrasts.
Darker colour tend to be seen first and carry more visual weight. A larger area of a lighter colour is necessary to balance the visual weight.
Highly saturated colour (pure hues) are perceived as more dynamic. They attract attention. Too many saturated colours can compete and cause eye fatigue. Desaturated colours lend themselves to performance and efficiency. They might be a better choice to help people complete a specific task. Desaturated/Bright colours are perceived as friendly and professional. Desaturated/Dark colours are seen as serious and professional.
Be careful about using too many colours. You want to limit colours in the same way you limit fonts. You need enough to be able to offer contrast, but not too much to lack similarity. 5 colours is generally a good maximum, though you can use more. The more colours you use the harder it will be to use them effectively.
How To Choose a Colour Scheme
Understanding the meaning behind colours is one thing. Choosing a colour scheme is another. Usually when deciding on a colour scheme you’ll begin with the dominant colour. This might come from existing marketing material like a logo or brochure.
Another way to choose dominant colours is to think of the words you would use to describe the company and the company site. What kind of emotional response do you want people to have when looking at your design. What associations do you want them to make with the site and the company behind the site.
McDonald’s for example uses red and yellow because those colours increase appetite and lead to impulsiveness. Perfect when you’re selling fast food. IBM on the other uses blue (as do many corporate entities) in order to associate feelings of trust and stability with their brand.
Think of the brand your design is representing and what kind of associations you want people to make and choose colours accordingly. I find it helpful to quickly brainstorm words that describe the brand and then consider colour meanings above.
The colour schemes we talked about last time also play a part in the associations. Just as an individual colour might convey a certain meaning, so too might the combination of colours convey meaning.
Monochromatic Colour Scheme
Monochromatic colour schemes look clean and elegant and are effective at establishing an overall mood. They produce a soothing effect and are very easy on the eyes. This is especially true when using blue and green. Monochromatic colour schemes tend to be very unified and harmonious. The downside is they can become monotonous due to the lack of hues. To combat monotony try to mix your monochromatic tones with pure white and/or pure black.
complimentary Colour Scheme
Complementary colour schemes look best when a warm colour is used against a cool colour. This creates an intrinsically high level of contrast and creates a dramatic look. Complimentary colours intensify each other and are extremely eye-catching and vibrant. The downside is they can be too vibrant and jarring and can actually cause the colours to appear to vibrate. Contrasting colours are typically bad for text. This is especially true at full saturation so be sure to use different tones of contrasting colours to lessen these negative effects.
analogous color scheme
Analogous colour schemes are similar to monochromatic colour schemes but they offer more nuances as they draw from a wider band on the colour wheel. They are often found in nature, are harmonious and pleasing to the eye, and can be very versatile. You typically want to choose one colour to dominate (the middle colour), a second to support the main colour, and a third colour for accents. Make sure to have enough contrast. Use tones, shades, and tints to add interest.
Triadic Colour Scheme
Triadic colour schemes offer a strong visual contrast while still retaining harmony and a richness of colour. They aren’t as jarring as complimentary colours. They can be vibrant even when the colours are unsaturated and they have stability because each colour in the triad balances the other two. There is a simple relationship between the colours which can be dynamic though also garish if not done well. Use one of the colour as the dominant colour and the other two for accents.
Split Complimentary Colour Scheme
Split Complementary colour schemes offer high contrast without the strong tension of complementary colour schemes. While it can be hard to harmonise the colours in a split complementary scheme they often make a good choice for beginners as they are difficult to mess up. They have more variety than complementary colour schemes, though they’re less vibrant and attention grabbing.
Tetradic color scheme
Tetradic colour schemes can be hard to harmonise and may look unbalanced. Tetradic colours make for a rich colour scheme with lots of variation. They are even more varied than split complementary colour schemes, though that also makes them less vibrant. Pay careful attention to the balance between warm and cool colours. Choose one colour to dominate and use the other colours in a supporting and more subdued way.
In any colour scheme make sure to use various tones, tints, and shades to avoid being boring or at the other extreme overwhelming. A great tip I picked up from the last of the recent Smashing Magazine series on colours is the following:
One of the simplest ways to create a professional looking colour scheme is to take a few tones, tints, and shades of a given colour (avoiding the pure hue), and then add in another pure hue (or close to pure) that’s at least three spaces away on the colour wheel (part of a tetradic, triadic, or split-complementary colour scheme) as an accent colour. This adds visual interest to your colour scheme while still retaining a sense of balance.
There’s a lot to digest here as there is with colour in general. A few key points to keep in mind when working with colour.
Color does affect us in several ways and while your design shouldn’t rely on colour alone, your choice in colour will be one of the first things people notice and could determine whether or not people leave quickly or stick around for more.
While there is no intrinsic meaning to colour, we’ve culturally assigned meaning to colours based on how and where we see them used most often.
In addition to meaning, colour can be used to impact your visual design in creating hierarchies and adding depth. Colour will impact your visitors beyond any meaning that is conveyed.
Not only do individual colours have meaning, the combination of colours into schemes transfer additional meaning.