The look of your website is largely determined by the use of colours. But colours also have the function of guiding your website visitors. By applying contrast, you make elements that are important stand out. Think of buttons that stand out because they have a different (striking) colour compared to surrounding elements.
In this article, we explain how to put together a colour palette that suits your brand. Based on colour theories and with the help of some handy tools, you too can create a colour palette that makes your website stand out.
Our associations with colours
Each colour evokes certain feelings or ideas. This often happens without you even thinking about it. If you are creating a website or want to give a brand a distinctive look, it is useful to know what colours do to people. Think: what do you want your visitors to feel? And what behaviour do you want to provoke?
Below you can see what colours often radiate:
- Green: wealth, nature, health, a sense of abundance
- Yellow: creative, cheerful, optimistic and approachable
- Black: stylish, powerful, sometimes sombre, but also full of control
- Pink: warm, gentle, sincere and caring
- Orange: playful, sociable, freedom
- White: clean, bright, calm and pure
- Purple: loyal, luxurious, a touch mysterious, creative and chic
- Blue: logical, reliable, peaceful, professional and calm
- Red: exciting, full of energy, powerful and sometimes dangerous
- Brown: safe, natural, protective and supportive
Of course, not everyone needs to experience colours in exactly the same way, but this overview can help you make choices. The right colour will make your message come across better - without the need for extra words.
Use the 60-30-10 rule
The 60/30/10 rule helps you use colours in a smart and balanced way. 60% of your design consists of a main colour, 30% of one or more spot colours and 10% of a striking accent colour. So you don't necessarily have to choose just three colours - you can use two colours as spot colours, for example, as long as the overall distribution remains balanced. This approach creates calmness in your design, makes important elements more visible (such as buttons or links) and gives structure to your website.
This guideline is not only used for web design, but also interior designers use it, for example.
Examples of colour use according to the 60-30-10 guideline
Below are some examples of websites built using the 60-30-10 guideline.
Revolut uses blue as the main colour, white as a spot colour, and black as an accent colour.
Douwe Egberts uses beige as its main colour, white as a spot colour, and dark red as an accent colour.
Tony Chocolony uses blue as the main colour, yellow as a spot colour, and black and white as accent colours.
Choose contrasting colours
Compose your colour palette based on contrasting colours. Text and elements such as buttons should be clearly visible in relation to the background colour on which they lie. For example, white text is easy to read when the background is dark. But if you combine two light colours, for example, one colour may fall away in relation to the other, making text difficult to read or making a button unnoticeable.
The WebAIM website states a handy contrast checker. The tool gives a score indicating whether the contrast is high enough to meet accessibility requirements.
Tools to create a colour palette
The website Coolers and the Adobe colour wheel can help you put together a colour palette.
Creating a colour palette with Coolers
You use Coolers' tool in the following way:
Start the generator
Go to coolors.co and click on "Start the generator". You will now see a row of five colours. Press the space bar to generate a new palette. Each time you do this, you get a new combination of colours.Fixing colours
See a colour you like? Then click the lock icon under that colour to lock it. If you then press the space bar, the locked colours remain the same and only the other colours change.Customise colours
Click on a colour to view and adjust the colour code. You can change the colour manually by entering a different code or by using the sliders.Add or remove colours
Want more or fewer than five colours in your palette? Click the plus icon to add a colour or the cross to remove a colour. You can have a maximum of ten colours in one palette.Extracting colours from an image
Got a picture with nice colours? Click on the camera icon to upload an image. Coolors automatically extracts the most important colours from the image and turns them into a palette.Check contrast
Use the built-in contrast checker to see if the colours in your palette have sufficient contrast. This is important for readability, especially for people with visual impairments.Save or export palette
Are you happy with your palette? You can save it if you create a free account. In addition, you can export the palette in different formats, such as PNG, PDF or SVG.
Adobe colour wheel
This tool gives you an easy way to choose colours that go well together. Here's how it works:
Choose a colour harmony
Above the colour wheel you will see different options such as analog, monochromatic, complementary or triad. These are ways in which colours can be combined with each other. The tool automatically adjusts your colours based on the style you choose.Drag the circles on the wheel
In the centre, you see a large colour wheel with five circles. You can drag those circles to adjust the colours. The tool makes sure that the other colours move along nicely, so that the palette stays nicely balanced.View colour codes
Below you can see the corresponding hexcode (such as #f8eddb). You can copy those and use them on your website.Extracting colours from an image
You can also upload a photo (click on the camera icon at the top left) and Adobe Color will automatically extract the best colours from it. Super handy if you want to match colours to a logo or mood image, for example.Save or export your palette
Have you created a nice colour palette? Then you can save it (if you have a free Adobe account) or just copy the colour codes to use right away.
Conclusion:
Choosing the right colours for your website may seem difficult, but with a little knowledge and the right tools, you can go a long way. By using contrast, applying the 60/30/10 rule and taking into account the associations people have with certain colours, you too can put together a colour palette that suits your website and business.
