How to choose colors for a website?

Whenever you decide to create a website there are many tough things to consider and color choice is surely one of them. Color is an essential part of user experience and can lead to both – success and failure. So how do you choose colors for a website and what does it say about your business, products, and services? With tons of research done and books written on color palettes, there are essential rules that we must know and take into account.

Background vs Text Color

One of the most basic things you should decide when starting to build your website is what colors you are going to use in your site background and text. Here you need to remember one simple rule: create a strong contrast between the background and text color. If you are choosing light background color then make sure your text is dark enough to be readable for all of your visitors, including people with disabilities.

Using images as a background is another thing to take into account – make sure your text is big enough and is clearly visible on chosen images or images (if we do talk about slideshow). Avoid speckled images as it will be much harder to choose a color for text that will fit there perfectly.

Color Palettes and Color Theory

How many colors should I use on my site? Well, it depends on the mood you want to create and your site visitors. Nevertheless, according to research, it is recommended to stick to 3 to 5 colors when planning and building your site layout. This will give you enough flexibility to point out important parts of your site and avoid the speckled effect which distracts users a lot.

But what colors should I use and how to find the right ones? According to color theory, there are several methods, also backed up by some great online tools, which will help you choose exact colors that look good together. Here are a few most popular methods for choosing colors for your website:

Analogous – it is a simple method stating that you should choose colors that are close to one another like red, pink, and orange. Such colors are in the same mood and will help to deliver this mood from your site to customers.

Monochromatic – you should choose one color and use lighten/darken effect to build your color palette. Some Analogous methods will help to deliver the mood of the website in a straightforward way.

Triad – as the title of the method suggests you should focus on 3 colors – the colors are located on the 3 opposite parts of the color circle forming the Mercedes sign. This approach allows for building a colorful color palette which could be great for Landing Pages.

Complementary – using the base from Monochromatic, the Complementary method states that you should choose 2 opposite colors from the color circle and manipulate them with lighten/darken parameters to build up your color palette. Such an approach could fit great for online tools, huge websites, and platforms where you do not want to use too much different colors.

In addition to these methods, there are more available all across the web with explicit documentation and even examples you could use for your next website. The last thing to mention is that you should take into account nature which is a powerful source of inspiration and color palettes. Keep in mind that all color methods are actually based on our observations of nature and so should you look for natural colors and natural color combinations.

Color Association

We tend to associate colors with different feelings, moments from our life, and moods they cause. What comes to your mind when we talk about passion? You would answer ‘red’ and so do your site users. This is why it is important to use proper color to give the feeling you want to tie with your brand, products, and services. Users will likely feel relaxed on your SPA site if you stick to white and blue instead of yellow or black. Below you will find an explanation of the pros and cons when it comes to choosing colors for a website:

• Red: energy, passion, excitement, power; also implies aggression and danger.
• Blue: coolness, spirituality, freedom, patience, loyalty, peace, and trustworthiness; can also imply sadness and depression.
• Yellow: light, optimism, happiness, brightness, joy.
• Green: life, naturalness, restfulness, health, wealth, prosperity; in certain contexts, can imply decay, toxicity.
• Orange: friendliness, warmth, approachability, energy, playfulness, courage.
• Violet: wisdom, sophistication, celebration.
• White: purity, cleanliness, youth, freshness, peace.
• Black: power, elegance, secrecy, mystery.
• Gray: security, maturity, reliability.
• Pink: romance, a feminine color.
• Brown: comfort, strength, stability, credibility.

Landing Page vs Platforms

Once you have decided on the approximate palette and mood there is one last thing to consider – should you use low or high-saturation colors? High saturation colors will surely drag user attention to a specific part of your website so you will likely use them for buttons, call to action, and promo blocks. On the other hand, aggressive colors will work as a distraction and will constantly disturb your user from browsing the site.

Here you need to understand the purpose of your site – is it a quick resource to generate potential leads or a website you want your customers to spend some time browsing around? If you are working on a Landing Page do not be afraid to incorporate high saturation colors that will grab the user’s attention and will make him push the “Purchase” button or at least remember your site. But if you are working on an informative site like a blog or even an online tool you may want to use low saturation colors which do not put pressure on the user and he will not get sick from seeing this big red button over and over again.

Of course, you should remember that there are always exceptions and in some cases, you can use high saturation colors in platforms and tools as well if you want to point the user to something really important.

Color Resources

Even if you are good with colors there are a few tools that could make your life easier or maybe serve as an inspiration for your next website.

Adobe Kuler – it is one of the most popular color palette sites where you can quickly set up your own color palette based on common color choice principles. In addition, it has a huge inspirational database of user-created and rated color palettes you can choose from. A powerful tag system and amount of content allow finding the right palettes not only by color name but also meaningful words that describe your website, like ‘relax’ or ‘eco’.

Color Hailpixer – a small, yet very inspirational resource which will allow you to find color with just a drag of your mouse. All you have to do is drag the mouse cursor around the browser window and see different colors without any interference from the outside. In addition, you will see color code as well so you can quickly book it for later use.

Design Inspiration – an interesting approach for finding not only website colors but also determining the mood of your site through associating chosen colors (up to 5) with images and graphics.

In addition to those resources, you should also check other inspirational resources like Behance, Dribbble, Awwwards and so on which can lead you to some really nice ideas. And of course, do not forget about the color picker as this could be one of your main tools when talking about colors for a website.