Colour is a very powerful tool that you can use to evoke emotions in your website’s visitors.
Selecting a good colour scheme is very important as it affects the way people think and feel about your brand, products and services. Something as simple as changing the hue or saturation of a colour can evoke a completely different feeling for visitors.
Warm Colours
Warm colours include reds, oranges, and yellows. These are the colours of fire, of autumn leaves, of sunrises and sets, and are energizing, positive and passionate colours. By using warm colours in your website design you can evoke feelings of passion, happiness, energy and enthusiasm.
Red
Red is a very hot colour and can be associated with strong positive and negative feelings. E.g. Love, passion, fire, danger, violence and importance.
In design, red can be a bit overwhelming if used too liberally, especially in its purest form. However, it can be a very powerful accent colour used to portray importance, passion and power. People are sometimes scared of using red in design due to its very strong associations, but red comes in many shades that can complement your design. Bright versions are more energetic and darker versions are more powerful and elegant.
Orange
Orange is a great substitute for red as it’s not as overpowering but still commands attention. It’s often considered a friendly, inviting and energetic colour. Orange can also demand attention as it’s often used for warning signs and at traffic lights. With more muted oranges associated with autumn and the earth.
Yellow
In design, bright yellow can lend a sense of happiness, cheerfulness, sunshine and hope. Softer yellows are commonly used as a gender-neutral colour for babies and children. Lighter yellows also give a more calm feeling of happiness than bright yellows. Darker yellows and gold-hued shades can look antique and be used in designs where a sense of stability is desired.
Cool Colours
Cool colours include greens, blues, and purples, are more subdued than warm colours. They are the colours of night, water and nature, and are usually relaxing, and reserved. Using cool colours in your designs can give a sense of calm and/or professionalism.
Green
Green can represent growth and new beginnings as well as renewal and wealth. However, green can also represent envy or jealousy, and a lack of experience. Green has many of the same calming attributes that blues have, but also incorporate some of the energy of yellow. In web design, green can have a balancing and harmonising effect, and is very stable. It’s appropriate for designs related to wealth, stability, renewal, and nature. Brighter greens are more energizing and vibrant, while olive greens are more representative of the natural world. Dark greens are the most stable and representative of affluence.
Blue
Blue is often associated with sadness, but also used extensively to represent calmness and responsibility. In web design, the exact shade of blue you select will have a huge impact on how your designs are perceived. Light blues are often relaxing and calming. Bright blues can be energising and refreshing. Dark blues are excellent for business websites or designs where strength and reliability are important.
Purple
Purple has long been associated with royalty; As well as creativity and imagination. Dark purples are associated with wealth and royalty, while lighter purples (like lavender) are considered more dreamy and romantic.
In design, dark purples give a feeling of wealth and luxury. Light purples are softer and are associated with spring and romance.
Neutrals
Neutral colours often serve as the backdrop in design as they’re usually combined with brighter accent colours. But neutral colours can also be used on their own often creating a very sophisticated design.
Black
Black is the strongest of the neutral colours, and technically a shade not a colour. Black can be either conventional or contemporary, traditional or alternative, depending on the colours it’s combined with. In design, black is mostly used for typography and other functional parts of a website, because of its versatility.
White
White is at the opposite end of the spectrum from black, but like black, it can work well with almost any colour. White is often associated with purity and cleanliness. It’s also associated with the health care industry, e.g doctors, nurses and dentists and can sometimes be seen as clinical. In design, white is generally considered a neutral backdrop that lets other colours in a design have a larger voice. It is very popular in minimalist website designs.
White space is often neglected and very important in design as a cluttered site with too much going on can cause confusion.
Grey
Grey is generally considered on the cooler end of the colour spectrum. It can sometimes be considered moody or depressing. Light greys can be used in place of white in some designs, and dark greys can be used in place of black.
Grey is generally a conservative and formal colour, but can also be modern. It’s commonly used in corporate designs, where professionalism and formality are important. Pure greys are shades of black, whilst other greys may include blue or brown hues.
In website design, grey backgrounds are very common, as is grey typography as it’s much easier on the eye and not as stark as pure black or white.
Summary
Understanding the basics of colour theory can make choosing your colour scheme for your website really enjoyable.
- Red (primary colour): Passion, Love, Anger
- Orange (secondary colour): Energy, Happiness, Vitality
- Yellow (primary colour): Happiness, Hope, Deceit
- Green (secondary colour): New Beginnings, Abundance, Nature
- Blue (primary colour): Calm, Responsible, Sadness
- Purple (secondary colour): Creativity, Royalty, Wealth
- Black (neutral shade): Mystery, Elegance, Evil
- Grey (neutral colour): Moody, Conservative, sophistication, Formality
- White (neutral shade): Purity, Cleanliness, Virtue
- Brown (neutral colour): Nature, Wholesomeness, Dependability
- Cream or Ivory (neutral colour): Calm, Elegant, Purity
Just for fun, some examples of what not to do:
If you’re feeling overwhelmed, confused or would just like a second opinion, feel free to give Fireworks a call, we’re here to help.