Colour Psychology in Web Design

Nicola Law

Nov 06, 2018 . 2 minutes read

Colour Psychology in Web Design

The way we react to colours can sometimes depend on our personal experiences and preferences, and also from what universal signals we know. Colour psychology is used extensively in all areas of design, as it is a way in which a company can convey a specific message to users. Colours release hormones in us which can fluctuate our emotions and behaviour, which can then result in negative or positive feelings. It takes only 90 seconds for a user to form a judgement upon a website, and up to 90% of this can be formed the colour of a site or product alone.

Sign up to our newsletter

We know we all have different opinions on colour due to personal preference, however, in web design, there are varied reasons why certain colours are used or avoided; 

Yellow

  • Bright yellow should be used with caution
  • Men aren’t likely to like it
  • Kids are attracted to it
Yellow Colour Example

Orange

  • Orange is warm and can be used without a sense of ‘danger’
  • Associated with fitness and energy
  • Kids are also attracted to it

Red

  • Portrays a sense of urgency
  • Some view this as ‘danger’ and aggression
  • Could also be viewed as luxurious -used within makeup brands etc.

Purple

  • Aimed towards women due to it’s femininity
  • Has no negative connotations
  • Portrays elegance and luxury

Black

  • Classy and corporate
  • Shows elegance and formality
  • Can be seen as a ‘heavy’ colour

Green

  • Linked with nature and well-being
  • Used for health campaigns
  • Approachable
  • Good for CTA buttons

Blue

  • Light blue suggests cleanliness
  • Dark blue suggests luxury
  • Suppresses appetite - not to be used for food campaigns

Pink

  • A soft and approachable colour
  • Often used to attract female users
  • Linked with baby products
  • Stimulates the ‘sweet tooth’

White

  • A pure colour
  • Portrays modernity, calmness and cleanliness
  • Popular in web design for backgrounds

Brown

  • Nature and earthiness
  • Lack of sophistication
  • Rarely used within design

Not only is colour an important part of web design, but also for the overall brand. The colours you chose must match the brand’s personality and also the meaning behind the brand itself. Usually, white and black should be used for backgrounds to make images and text more visible, also giving it a clean and sophisticated look.

Bright colours like green and yellow should be used for CTA buttons as they are more likely to have a higher click-through rate than colours like red. Website fonts should consider the colour of the site background, it’s vital that the font is legible and easy for the user to read.

Knowing your target audience is key when determining what colours to use within web design. A designer sometimes has to use a colour scheme from a company’s existing branding, but when starting from scratch they must consider colour psychology to determine what colours will attract the user, how the user will react to each colour and what colours complement each other.

It is unlikely that you will use only one colour unless you’re sticking to a monochrome theme, so it is important to consider only 2-4 colours. If you’re unsure of what colours to use, apps such as Adobe Colour CC and Color which provide ready-made colour palettes for you to choose from.

Quick Links