Colour scheming

Choosing colours for your website


color-theory-1-tb-662x0
Research suggests that most website colour schemes consist of no more than three colours: A dominant colour and two or more accent colours. However, this, and everything else that can be considered when designing the colours of your website, are subjective.

One of the most important decisions when it comes to website design in general, is the percentage of negative/white space. This decision will help in deciding readability and usability. Some research suggests that the bolder the colour scheme, the more white or empty space is needed to balance it out.

“Psychologists have revealed that people are susceptible on a subconscious level to color impressions and that over 60% of acceptance or rejection of a website is tied to this very fact.”

3-color-targeting-demographics

When trying to determine what colours will be present in your website design there a several things to consider. The most important thing to ensure is that any colours you choose serve the purpose of your website, rather than working against it. This needs to take into consideration both your audience and aim.

Warm colours

  • Red is a highly stimulating colour. It can incite passion, danger or, as some studies have shown, hunger.
  • Yellow warns and worries people. It is a useful colour for call to action buttons, such as ‘add to cart’. It can be used as a pop of energy, but can dominate a page if too much is used.
  • Purples/Pinks in darker tones are luxurious and rich. It appeals most to females, and lighter tones imply romance and care.
  • Orange is a bright action-inspiring colour, but it can be overwhelming. Studies have show that its also a ‘cheap’ colour, so should be avoided on sites that are selling products or services that are costly, but can inspire the impulse buying of cheaper items.

  4-milani-website18-amazon-kindle

Cool and neutral colours

  • Green inspires images of nature, and can also foster creativity. Because of this is it often used by banks and other more sterile businesses to create an impression of growth and environmentalism. It also works well as a more subtle call to action button.
  • Blue is serene and calming. It’s easily likeable and projects a sense of trust in a brand. It commonly used by banks for this reason, but leaves a negative impression when used on sites that are food-related.
  • Black implies expense and luxury.

7-paypal-website19-louis-vuitton

Colour palettes

The basic colour wheel can be used to map out and guide colour designs. And there are several ways to do this.

  • Monochromatic colour schemes take one colour and use it in all it’s forms. Light, dark, and everything in between. It is a subtle, clean and professional look, but see a little bit uninspired.
  • Analogous designs used colours that are next to each other on the colour wheel. This can give a harmonious look, while also allowing for creative colour pops.
  • Complimentary colours sit directly opposite each other on the colour wheel.color-theory-3-tb-662x0 Using this as a theme can be tricky as, because of the way the human eye usually processes colour, both colours will fight for dominance when in close proximity to each other.
  • Split-Complimentary colour schemes use one colour and the two that sit beside it’s complementary colour.
  • Tetradic (or double-complimentary) uses two sets of complimentary colours. Because this required the use of four colours rather than three, it is best used when there is one dominant colour and one of more that are used very sparely.
  • Triadic designs use three colours evenly spaced on the colour wheel.

Examples

The following images come from Canva’s ‘Design School’ blogs and are inspired by some of the colour palettes mentioned above. Even though they do not work strictly to the formulas, can you pick which is which?

imageT

imageC

imageA

imageSC

Here are 25 more examples, and 40 more ways people have effectively used colour in website design.

Take care

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s