HEY

Participate in the next Webflow Challenge!

Colour theory in webdesign

Colour in webdesign is very important. How do you choose the palettes to use (titles, buttons, etc.)? Here is the theory of colors.

Updated on

11/9/2020

color in webdesign

How do you choose the colors to apply to your website (titles, buttons, etc.)? I'm asking you, because in fact, the choice is still quite difficult among the 16.8 million colours there are! So I think it's important for every designer to master the famous colour theory.

Before going any further, however, I think it would be better to go back to the base.

Understand colour jargon

Pulse ox, tones, temperature... All those words we often hear when we talk about images or colours. What exactly do they mean?

1. Primary colours: what are they?

They are the basis for all other shades. Indeed, our eyes actually only perceive these types of colours. They are 3 in total:

  • magenta
  • cyan
  • yellow

What about the others: pink, purple, orange...? These are just the combinations of these 3 primary colours. The results differ according to quantity, brightness and shades.

In fact, at the beginning, these 3 colours are called respectively: red, blue and yellow. But various studies have shown that they don't describe the colours well enough. Hence their new names: cyan, magenta, yellow.

2. RGB & Hex: What is it all about?

On the web side, the most used language is RGB&Hex (Red Green Blue and Hexagonal). For the RGB in particular, all colours are defined as a combination of 3 different values: red, green and blue shades. Here is their notation:

  • rgb(59, 89, 145): blue as the colour of Facebook
  • rgb(0, 0, 0): black
  • rgb(255, 255, 255): white

As for the hexadecimal color system, it converts each color into hexadecimal notation, which is as follows:

  • #3b599b: Facebook blue
  • #0000: black
  • #ffffffff: white

Facebook blue, for example, has a red tint of value 3b, green 59 and blue 9b.

3. A cold vs. warm colour

There are also two categories of colours:

  • warm colours: they are composed of a greater quantity of reds and yellows. The latter generally evoke a feeling of warmth and passion. They are also aggressive and bold, which is why they are used in error messages.
  • cold colours: They are more composed of blue and bring out something like: climate, ice, winter, water, night... They are also less aggressive and more soothing.

4. Colour temperature

We often hear about temperature in pictures. For example, I sometimes increase the temperature of an image. In more common parlance, I therefore increase the level of orange in the media in question.

Conversely, when a customer asks me to lower the temperature of an image, I reduce the brightness to give a cold impression.

5. Hues and shades

We speak of hue when we add white to a colour, while we say nuance when the added colour is black. So what are shades and tints for? They are the ones that allow you to create monochrome.

For example, if your base color is #8dbdd8 (a light blue), you can create a monochrome by choosing four other shades (two brighter blues and two darker blues).

6. Saturation and brightness in webdesign

Saturation describes the intensity of a color. If you increase it, the image will be richer but also darker. Reducing the saturation of an image makes it lighter and blurred. In terms of brightness, we talk about the perception of brightness in relation to pure white.

Now that you have a general notion of colours, here are some tips on choosing colour palettes.

color in webdesign

Uses the color wheel

All the colours are related and you can see it through the colour wheel.

You can see all 12 main colors on this wheel.

Look out! If some colours are made to be together, others do not go together at all. How can you be sure to choose the right ones? I use these 4 color schemes.

1. Monochrome

I talked a little bit about it earlier. Monochrome is obtained from a single base colour. So it creates harmony. Here's a little downside: this method risks giving a monotonous palette.

Here's an example based on purple:

color in webdesign

2. Complementary

It is based on two completely opposite colours (on the colour wheel), and therefore, very different. With this technique, you are more likely to create an impact for your site visitors, especially for calls to action.

Let's say the background of your page is green, the CTA button could be pink. When you put it like that, it sounds weird. But I assure you, they are literally complementary. See for yourself:

color in webdesign

3. Analog

Analogous diagrams contain three colors that are next to each other on the color wheel. The tones adopted are almost similar, creating a harmonious whole, a sense of cohesion and unity.

color in webdesign

4. Triadic

To create a triadic colour scheme, you must draw an equilateral triangle (with three sides of equal length) on the colour wheel. Then select the three colours at the three ends. This will give you a pattern that is as diverse as it is balanced.

How to use colors in webdesign?

Red

I no longer need to teach you that red is associated with warmth, energy, passion and love. It is also said that we see red when we are angry, and perhaps that is why it is referred to as the colour of blood, power, danger.

All this to tell you that red is unmistakable. It creates a significant effect on a brand's targets. Let's take the example of McDonald's; he uses red (and yellow) as the colour of his brand. There is also Netflix. For its CTA buttons, it does not deprive itself of it. Next comes Coca-Cola. It seems that he came up with the idea of giving Santa Claus the colour red.

So how can red be used in web design? Suppose you work for a bold and/or masculine brand. I strongly advise you to use red because it represents it well. Depending on the products offered by the brand, red could also be interesting: caffeinated drinks, sports cars, etc.

On the other hand, you are not obliged to apply red to the whole site, the product... It can be applied to certain elements in particular, CTA among others.

Photo by Siora Photography on Unsplash

Orange

This colour is less aggressive than red, but that doesn't prevent it from being remarkable. In most cases, it can be found in the construction and safety field (cones on the road among others). What exactly does it evoke in orange?

The warmth it emits reminds us of creativity, energy, youth and enthusiasm. The fact that Nickelodeon uses it to represent his trademark proves it. Likewise for Fanta, the orange perfectly brings out its fun side.

In Webdesign, I therefore advise you to use this color for sites that particularly target young people or for those who talk about creativity (and everything that comes close to it). As it is warm, it makes visitors feel like they want to take action, especially if it is applied to CTA's buttons or text.

Yellow

The sun, the summer, the sunflower, the heat... When I mention these 3 elements, you automatically think of yellow, don't you? It makes you happy, hopeful and positive. In other contexts, however, yellow can become irritating.

I told you about McDonald's earlier. Well, here again, I'm using the example because yellow is also one of the main colours used by the brand. It has obviously succeeded, because combined, red and yellow are both attractive. Even if you're just a few meters away from their logo, it's hard to miss it! There is also Best Buy; you know it? The label of its logo is also yellow, so that the small prices it offers are attractive.

When you create a website, don't forget the power of yellow. It's eye-catching, and so can be used to highlight a specific element of the design (in practical terms, it will be exactly like the Best Buy price tag). You still have to pay attention to the tones. While some evoke nature and well-being (warm or pale yellow), others give an artificial look (neon yellow).

Photo by Andrew Buchanan on Unsplash

Blue

Blue is known to be calm, serene and above all: professional. It does indeed evoke responsibility and intelligence. It is often associated with water, making it a refreshing colour. The level of tones can also make all the difference. Darker, it becomes sad. Hence the expression "the blues".

In short, blue goes hand in hand with gray, as you've probably noticed with many companies such as: Intel, PayPal, General Motors and many others. In addition, social networks love blue (especially Facebook). The reason is simple: this colour inspires confidence, especially since the personal data of several people are processed by these networks.

So, if your site is to inspire confidence in its visitors, you know what you have to do. Play with the blue and its shades!

Certainly, blue is a calm and soothing color, exactly adapted to certain activities such as therapy, meditation... However, it is also the color most appreciated by a large number of people (women and men, children and adults), you should take the opportunity to use it if you are targeting a large audience for your site.

Green

Growth, health, nature, spring... all this is found in the green. Wealth and finance also have a place in this color, in the United States. So you can choose these colours to represent companies that are involved in the environment, nature, finance, etc.

Sometimes green is also used when you want to create a colour balance. This is what Microsoft and Google, for example, did; they wanted to add green to the main colours of their logo. The result was a pure success.

Photo by Scott Webb on Unsplash

Brown

If I tell you about brown, what comes to mind? For many people, they think of the earth, which makes brown a natural colour. It is therefore obvious that it is very present in sites dedicated to agriculture, outdoor activities...

Besides, brown is linked to something ancient. This is why when a logo takes on this colour, it is to underline its traditional aspect. Here is an example of a company that uses it in its logo: ultrastjarna.

Violet

It is described as the colour of royalty, a prestigious and luxurious colour. In the past, the pigments that made it possible to obtain this colour were very expensive. Only kings and queens could obtain them, and thus, dress in this colour. It was even forbidden for anyone who was not a member of the royal family to wear it.

For sites that want to reflect luxury, purple can only be the best choice. Take for example Asprey, a British company well known in the production of luxury goods.

However, depending on the color you associate it with, the effect will be different. With gold, for example, the desired royal effect is at its peak. With pink, it will be more feminine. And many more.

White

Sites focusing on weddings, science and spirituality use a lot of white space. They evoke a sense of cleanliness and freshness. White also allows for a minimalist design, as it is simple, sober and modern at the same time: Apple is best placed to illustrate this.

White is mainly used as a background colour. Thus it can highlight other colours or elements. But also text content is more readable this way. If it is used as a secondary colour within a palette, it evokes different things depending on the accompanying colours: with pastels it becomes more feminine, while with black it contributes to a minimalist, design and classical ensemble.

Photo by Drew Beamer on Unsplash

Black

I mean, the black one. It implies force, luxury, evil, death and the unknown. It is also neutral, hence the choice of Channel and Dior in the colours of their logo (black and white). The whole thing seems intimidating, inaccessible...

It probably gives you an idea of how you're going to use it on the sites you create. Whether it is to bring out the luxury of a site or a product, to create a royal effect (by associating it with other colors), or for usual uses (text colors).

Conclusion

In short, how would you react if someone offers you the car of your dreams, but it's painted in a color that isn't very obvious (maybe it's a color you hate, or maybe it's just plain old-fashioned)? You'll be less enthusiastic, won't you? All of this is to tell you that colours make sense. They create emotion, so their choice requires real attention.

Come back to this page whenever you want. Did you come up with any ideas I might have forgotten? If so, what are they? Leave a comment below or send an email to hello@happydesk.be.
Kevin Palombo, Manager of Happydesk.

Coffee break

4 items you might like

FREE TRAINING

Register here to receive the free Discovery Training
.

Start by taking the Discovery Training, where you will learn the basics of Webflow and a taste of what to expect in the Start Weblow training.

Start the free training