colour palette icon

Understanding colour harmony

All colour schemes are based on the principles of the colour wheel and the colours’ relationship through this. When choosing a colour palette for your website, referring to these ideas can be a useful way to find the perfect combination to achieve the look you are after.


This is made up of 3 adjacent colours on the colour wheel. Naturally, this is the most calming colour combination as it contains the least amount of contrast. It is often seen in nature, for example in green landscapes with different trees and grass or in autumn with the yellow/orange leaves.
analogous colours diagram


A complimentary colour combination focuses on contrast, choosing two colours on the opposite side of the colour wheel. Use colours like this if you want your designs to pop and be bold. 
complimentary colour diagram


A vibrant colour scheme made up of 3 colours spaced evenly around the wheel forming an equilateral triangle shape. Websites with these colour combinations will seem well balanced and bold as colours contrast but not quite as strongly as with complimentary colours.
triadic colours diagram

Split complimentary

Often seen in flowers, a split complimentary colour scheme will soften a complimentary colour combination by using colours on either side of the opposite colour. This well-balanced harmony, will highlight the primary colour and often be used to bring emphasis and a sense of depth to elements. Using  colours like this makes it obvious which colour you would like as your primary/highlight colour making it quite a beginner-friendly colour combination.
split complimentary colours diagram

Tetradic (Double complimentary)

Includes two complimentary colour pairs on the colour wheel. You have the option to pick colours that are far away from each other with higher contrast or closer together making for a calmer tone. Unlike with the split complimentary colour scheme, it is easy to create an imbalanced and confusing colour palette. Unless it is your aim to create a chaotic design, choose colours that harmonise well with each other so that when you use them on your website they give a sense of a cohesive hierarchy.  
tetradic colours diagram


You can't get colours that work together in a more balanced way than this. It can be difficult to emphasise specific elements of your design if you don't plan it out earlier but, done well, this colour scheme is bold, confident and gives a strong sense of harmony.
square colour harmony diagram
Image credits: