Colour harmonies: A beginner’s guide

When you build a website for your business, creating a colour palette is one of the first, and most important, decisions to make. In this post we share the basics of colour harmonies using the colour wheel, to help you create fantastic combinations from a single colour.

First, select your base colour and note the hex code (e.g. #DFE7FF). The base colour could be based on your company logo or current website/branding. Then head over to Adobe’s colour tool, and click the middle (base) colour square to select it. Paste your hex code in the ‘HEX’ labelled field and tap return on your keyboard to set it. From the Colour Rule menu, you can try all the combinations we touch on in this post.


Analogous schemes use three or more colours that sit next to each other in the colour wheel. These groups of colours work in harmony with each other, and are pleasing to the eye. Warm and cool colours will not usually be mixed in an analogous colour scheme.


Monochromatic schemes, like analogous, are perfect for creating a feeling of harmony and cohesiveness as they use a single hue as a base. The rest of the palette can be filled with tints (hue + white), tones (hue + grey), and shades (hue + black) of the base hue. A great example of a monochromatic scheme is the Facebook Messenger landing page. The website uses the recognisable blue across their menu, titles and call-to-action buttons.


Triadic colour schemes incorporate three colours equally spaced on the colour wheel. Triadic schemes provide some great contrasting hues and work best when one colour dominates. A good guideline for balancing your colours is the ratio 60:30:10 (base:secondary:accent).


This scheme is based on just two colours – your base colour and the colour directly opposite in the colour wheel. The second colour works well as an accent to highlight important areas of your page and provide some visual contrast. If you need more colours, select some extra tints, tones and shades of your base colour. It’s also important to manage complementary colours well to avoid jarring clashes. Keep plenty of white space, and try not to place contrasting colours directly next to each other.


Compound harmony (also known as split complementary) colour schemes are an alternative to complementary combinations and are made up of three colours. These include your base hue, plus two colours found opposite on the colour wheel. Compound colour combinations provide the visual contrast of complementary colours, but with less tension. This makes them much easier to apply! Like with Triadic combinations, remember the 60:30:10 ratio for balancing each hue.


Now that you’ve read about the various colour combination types and their benefits, why not have a go at creating your own website colour scheme?  Then head over to our post on implementing a colour scheme on your website: How-to: Apply colour to your website.