Using Adobe Color to create effective colour schemes for your web design

August 8, 2016
Posted in: Web Design

What’s your favourite colour?

Colour has the ability to evoke emotion, increase memory, inform audiences and attract attention. Each colour scheme can be a very powerful marketing tool if implemented correctly.  

Using a couple key brand colours is always a good idea, but those colours might need some help in order to reach their full potential. This is where we enter the magical world of Adobe Color. I’ve been using Adobe Color in my web design and branding process for years now, and it has become an integral part of how I choose which colours we will be using to trigger the correct reaction from the audience.  

A quick Google search told me that we can see about 1 million colours, so to say choosing colours is overwhelming is a bit of an understatement! Whether you are adding to a clients existing colour scheme or starting from scratch – nailing down a few colours can prove to be extremely challenging. Working with colour schemes created in Adobe Color can make this process a lot easier and yes, even fun! I mean, who doesn’t love playing with colour?

In this blog post I am going to demonstrate how the different colour rules work in Adobe Color using our Machine Pink #e22349 as our base colour.

An analogous colour scheme uses colours which are adjacent to each other. This colour scheme is pleasing to the eye and often found in nature, using an analogous colour scheme in your web design will ensure a comfortable and consistent website.

analogous color wheel   

A triad colour scheme consists of three colours which are equally spaced around the colour wheel. Triadic colour harmony is considered by some to be the best colour scheme. In web design, you can use the two lighter colours as background colours, the darkest colour for content and the lightest for highlighting.

Screenshot 2016-08-08 13.58.20   

A complimentary colour scheme consists of colours which are opposite each other on the colour wheel. The contrast in this colour scheme is very drastic – the most dominant colour can be used as a background colour in your web design while the opposite colour may be used to highlight the important information of the page (like in buttons or links).

complimentary colour scheme  

The compound colour scheme (also known as split complementary) consists of colours adjacent to your main colours complimentary colour on the colour wheel. In addition to the base colour, it uses the two “analogous” colours adjacent to its compliment. These colour schemes tend to have a less extreme contrast than fully complimentary colour schemes which result in a well balanced, more harmonious design. 

compound colour scheme  

To finish, I want to emphasize the importance of picking colours that harmonize visually and contrast effectively. Using Adobe Color is great if you are stuck and need some inspiration, but don’t be afraid to use the custom option and pull from the surrounding colours on the colour wheel!

Scott Buckingham

President / Owner
613-801-1350 x101
[email protected]
Scott is a WordPress expert who has worked on hundreds of web design and development projects. He excels at finding creative ways to solve technical problems. View full profile