If you want to have a cohesive identity that works on your website, product packaging, your printed media, advertising and marketing materials, then it pays to spend some time on your branding before jumping headfirst into designing a website. Getting a logo and brand colours together should be one of the first things you do when starting a new business because so much else will depend upon it.
But how do you choose colours that will work with your product or service and that will make it stand out from the crowd? It’s certainly a good idea to employ a professional to help you with your branding, but if you’re on a budget, and are attempting this yourself, here is some advice to get you heading in the right direction.
The Colour Wheel
The natural order of colours in the spectrum is red, orange, yellow, green, blue, indigo, violet. Join the ends of the spectrum together and you get the colour wheel – an indispensable tool whether you’re choosing colours for clothes, wall paints or logos and websites.
Use a colour wheel to select colours that complement each other. We suggest you start with the complementary mode which just deals with two colours that will go together well. Use one as a main colour and the other as an accent. For more subtlety, use colour that are adjacent to each other in the wheel.
Monochrome
All shades in a palette that are derived from the same colour hue at varying degrees of lightness and/or saturation.
Analogous
Colours that are next to each other on the colour wheel.
Complimentary
Colours opposite each other on the colour wheel. Opposites definitely attract in colour theory.
Triadic
3 Colours that are equally spaced apart in the colour wheel.
Primary
3 colours that cannot be created from blending other colours. Red, Yellow, Blue
Secondary
3 colours that can be made by mixing the primary colours. Purple, Green, Orange.
Tertiary
Intermediate colours between the primary and secondary colours on the wheel. Red-orange, blue-green, yellow-green, yellow-orange etc
Greyscale
Shades of grey only
Split complement
Like complimentary, but the colour on one side of the wheel is split into the two shades adjacent to it.
See the Colour Pickers section below for more on Hue, Tint and Shade.
Colour Tools
Adobe Colour Wheel Tool
Try out the Adobe Color Wheel – it’s a great free tool that allows you to experiment with the various combinations of colour harmony mentioned above.
Adobe Colour From Image
An easy and effective way to create a colour palette is using an image. Adobe also features Colour From Image at their colour website and it’s the best automated method we’ve used.
Colour Pickers
You’ll probably be used to using in-app tools like a colour-picker. You can learn a lot about colour from the various different models that they use.
Hue/Colour
On a colour slider this may be measured in degrees as in 0-360 deg. Basically, it’s simply the colour spectrum but without thinking about light/dark or pale/strong.
Saturation/Tint/Intensity
How strong or pale a colour is. Muted colours have low saturation, strong colours have high saturation. Take saturation all the way down and you’re left with a shade of grey.
Luminosity/Shade/Brightness
How light or dark the shade is. A light red can be called pink, but a dark red can be called burgundy or maroon.
Colour meanings / emotions:
Red: danger, passion, love, sex, anger, blood, strength, villain, sporty.
Green: fresh, natural, environmentally friendly, financial, safety, medicine/first aid, envy, greed
Yellow: sunshine, joy, cheerful, attention, energy, children, intellect, sickness
Orange: warmth, friendly, bargain, autumnal
Purple: regal, feminine, power, wealth, luxury,
Blue: nature, water, sky, masculine, tranquil, professional, depth, trust
Pink: feminine, love and passion, vibrant, youthful
Brown: boring, earthy, natural, sand, soil, wood
Black: power, elegance, sophistication, formality, death, evil, mystery
White: Purity, light, goodness, innocence, cleanliness.
How to choose colours
Now you know a bit more about colour harmony and have a few tools to help you, it’s time to start thinking about the colours that will be right for your brand. First, think about the kind of adjectives that might be used to describe your product or service. Do they fit particularly well with any of the colour meanings above? A few examples: a nursery might choose pastel colours or bright primary and secondary colours. A formal-wear shop might choose purple, black or gold to bring a feeling of opulence and class. A wedding website might have lots of white and use black script fonts to create an elegant and clean look. An outdoor pursuits company might use neutrals and greens. A sports car company might use reds, blues, black and silver for an expensive and sporty feel. If you think about the kind of associations your product or service brings to mind, you should be able to come up with some colours that work. Check out our logo examples below to get more ideas.
Another way to go about this is by answering a series of questions… Should your branding and website be light or dark? Should it use brightly coloured or muted tones? What is the first colour that comes to mind? Once you’ve chosen a primary colour, use a colour wheel and then choose an accent colour, whether it’s a contrasting or monochrome tone. Occasionally, you might choose a third colour too.
Use the colour tools above to refine your colours. Pay attention to the lightness and intensity of your chosen colours. Even particular shades of a colour can become memorable. Everyone recognises the blue shade that Facebook uses. Twitter uses a lighter blue. LinkedIn is different again. They’re all blue, but they’re all distinct shades and have become associated with the branding for each of those social media platforms.
Clashing Colours
What about colour combinations you should avoid? Well, whilst there are no real hard and fast rules, there are arguably colours that look good together and colours that don’t. This is most often experienced in the realm of clothing, but it is certainly also a feature of website design too! When choosing colours that go together, it’s important to match tones. For example, there are cool tones and warm tones – they don’t tend to mix too well. There are muted colours and saturated colours – they don’t always mix well either. When we think of clashing colours, we usually think of two or three very bright colours with high contrast that are all competing for your attention. For example a hot orange and a bright pink together are quite startling! Some bright colours, when used on the screen together, can have an almost dazzling effect which makes them hard to look at.
Examples of Colour Use in Logo Design
Deluxe Web
Let’s start with our logo colours. Yellow-orange and greys. The way gradients are employed in this logo turns these colours from flat to shiny. It’s a good example of how pattern and texture can transform colours. Grey becomes silver, yellow becomes gold. Yellow and grey is a long established pairing. In nature it often signifies a warning; in this case it’s used to imply opulence.
Cadbury's
Cadbury’s uses purple to convey luxury, indulgence – a product of quality and extravagance. In this Dairy Milk logo, the Cadbury’s script is in gold – another luxurious colour. The white provides a clean and innocent offset.
Shell
The colours here were chosen because there were a large number of Spanish settlers in California – these colours were taken from the Spanish flag to appeal to them.
Coca Cola
The red in the Coca Cola logo signifies energy, passion, excitement, but this colour has also been found to stimulate the appetite as well as result in impulse purchases! Hmm, no wonder they’ve done so well. The white script provides a good contrast. Imagine if it had been black – that just wouldn’t have worked here.
Tesco
The Tesco colours are taken from the British Flag where the company is based. People are usually patriotic for their country, and this appeals! Red and blue in this combination are bold and confident.
Starbucks
The green and white logo of Starbucks is certainly a mysterious one. Apparently, the green was introduced to symbolise growth and prosperity of the company as it became more popular. The shade of green used does nod towards the colour of American currency, but it also denotes freshness.
BP
The new BP logo uses the firm’s original colours, but the logo has been reworked into a sun/star which lends it a different meaning to the shield it replaced. The effect of these colours seems to convey something about renewable energy and an eco vibe.
FedEx
FedEx were using various colour combinations in their logo until they consolidated them all into this one purple and orange version which was the most recognised one. (I have to confess I hadn’t even noticed the arrow formed by the E and X before I started this post. Clever.) The colours used are split complement. The whole feeling is modern, authoritative, yet simple.