Our Guide to Combining Colours for Your Website Design – What to Know

A website is an extension of your profile, your brand, and your company. It is highly regarded as a part of your online presence that builds on the credibility of who or what you are offline—or behind brick and mortar walls. 

As websites try to build a “personal touch” for visitors, choosing the right colours in websites is increasingly playing a more prominent role in the overall look, effect, and feel of your online persona. This may be overlooked, but the role of colours in websites is to complement the copy, text, or testimonials that impart the messaging of your brand. Like any work of art, the website is considered a canvas that requires a more thought-out layout to match any visual, text, or file housed there. 

During the process of website design, it’s important for you to work with the right colours. Your web designer or web design agency will certainly be able to lend some valuable insight during this step, but it’s a good idea to have a basic command of the colour theory for yourself. 

Here are some of the tips to help you choose the perfect colour palette for your website design:

Apply the colour Theory

While website design is thought to be predominantly an art, the science behind colour theory is working hard behind the scenes to help web designers learn how they can evoke a certain meaning, feel, and effect with their colour selections. Good colour combinations complete the look while clashing hues drive the attention away from the subject. When done right, colour pairings can positively influence a visitor’s experience on your website. To some extent, advertisers have used this knowledge in creating impressions and then recognition over time. 

Think of famous brands and acknowledge how much of the colour stands out in the recall factor. For example, restaurants often use red and orange colours; banks and financial institutions are often blue; luxury products are typically packaged in black; hotels, on the other hand, are usually white, blue, black, or green. Some iconic brands owe their memorable insignia to their colours such as CNN for red, white and black, National Geographic’s yellow, and McDonald’s for the red and yellow combination. 

Choose a primary colour

While the choices for colours on your website can be as extensive as every shade available in the visible world, the most important action point is to establish the primary colour for your brand. Decide if your logo or other brand existing collaterals can be a starting point. If you’re starting from a blank slate, use colour psychology and association to select one.

Settle on complementary hues

Once you have chosen a primary colour for your website, the next step is to determine the appropriate colour scheme that goes with it. Although some websites can get away with just a single colour for their design, playing with few shades, tints, or even a gradient can work wonders, too. It’s a good idea to seek the guidance of an experienced web designer at this stage.

Using your primary colour throughout the whole design can play up consistency, but may also border on being bland. In case you want to play with shades of your base colour, tone the tint up or down to create subtle varieties on the website while keeping the primary colour. This can also work in your buttons, accents, widgets, or peripheries that tie the look together.

Select your colour tools

One of the best tools out there that many web designers use for colour selection is the Adobe Colour Wheel. This tool allows you to explore colour schemes for your website in a vast array of choices. With it, you can come up with colour combinations for your design projects. You will also be able to create, save, and access your colour themes. Offered as a feature in the Adobe Suite, this tool is also compatible with other programs such as InDesign, Illustrator, and Photoshop.

Follow the 60/30/10 rule

To create a harmony of colours on your website, a tried and true formula website designers often use is the proportion of 60/30/10. This technique is simple but effective for mixing different colours. Although you don’t have to always end up with three colours, this ratio is considered to be balanced. With this method, the primary colour covers 60%, the secondary colour carries 30%, and the accent colour finishes off the combination at 10%. This proportion is visually appealing to the human eye since it plays with balance, contrast, and synthesis of colours.

Apply high contrast

As web pages tend to have special places that need attention, leading the eye to the subject can be achieved by applying colour contrast. The optimal use of two highly contrasting colours—such as orange and green, or red and blue—for your background and button can set the parameters on where your viewer’s attention should land on. However, contrast should be used tastefully. Extremely high contrast all throughout the site will create confusing signals to your site visitors. As a general rule, use a mid-level contrast the design details and apply high contrast to highlight key elements. Review your page on the level of detail and in the bigger picture. If the colours lead their way to the details, then you’re on the right track in putting them to work!

Conclusion

We’re a Leeds-based web design agency. Whether you need a beautiful new website or help with your hosting, we’re here to give you a hand! Get in touch today for a consultation about your website-related needs.