The Colour Rule

Colours are like a small tickle for your brain. They can stir emotions, encourage better mind flow, and can even promote better focus, concentration and creativity. Because of this, colour has an actual impact on user experience.

Colour makes the first impression on most users (we say most because about 7-8% of the world is colour blind and about 8% of the world has visual impairment) and it can really set the tone for a website’s design. Colours used properly can create balance and symmetry for the site, keep the user’s attention, and can also help users with decision making.

Now, this blog post won’t go too far down the colour theory rabbit hole, but we want to talk about the “Golden Ratio” which is a fantastic colour rule for proportions. This rule actually comes from interior design, but it bodes very well with website design too.

The Golden Ratio is a 60-30-10 Rule

3 main colours is the goal for this Rule. A primary, secondary, and tertiary/accent colour. Although it seems like 3 colours isn’t too many, it’s enough to design an engaging website.

• The primary colour should be used for 60% of the design. It’s something usually neutral that allows for the other colours to stand out
• The secondary colour should be used for 30% of the design. This colour is the middle ground complementing both the primary and tertiary/accent colours
• And finally, the tertiary colour should be used for 10% of the design. This colour adds a nice “pop” and can grab the user’s attention (such as a button or icons)

Now keep in mind that although the 60-30-10 Rule is solely for 3 colours, shades of the main colours can also be used mindfully and sparingly. Some examples may include: 

• When a user hovers over a button, the colour of that button changes to a shade or 2 lighter to indicate that it is clickable
• A mainly white background website breaks up sections utilizing an off-white slightly greyer colour for opposing sections (for a list of different shades of white, refer to this clip from Modern Family of Cameron listing whites he did not order his dryer in)

When shades of the 3 main colours are used properly, all the colours and shades can complement each other nicely creating an impactful and well designed website

Website Colour Statistics

Now what colours are in favour of others you may ask? Here’s a list of colour statistics that will have you pondering website colours the next time you land on a site you are drawn to (or even dislike!)

• 46% of users prefer blue for a website colour making it the top choice (it’s also the most popular colour in the world)
• 30% of users prefer green, making it the second most popular colour for websites
• According to 23% of users, yellow is the worst colour for sites (sorry, yellow lovers)
• 39% of users say colour is the most important visual element on websites
• Colour can boost brand recognition up to 80%
• 10 million colours is what the human eye can perceive – That’s a lot!

Ready to enhance your online presence?

Contact Sland Studios