Hey! Free yourself to discover the 'magic' trick that will propel your business on the Web

The theory of colors in web design

Web Design,Freelance,Business
color in webdesign

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

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

Understanding color jargon

Saturation, tones, temperature... All these words that we often hear when we talk about images or colors. What do they mean exactly?

1. Primary colors: what are they?

They are the basis of all other shades. In fact, our eyes only perceive these types of colors. They are 3 in total:

  • magenta
  • cyan
  • yellow

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

In fact, at the beginning, these 3 colors were called respectively: red, blue and yellow. But various studies have shown that they do not describe enough colors. Hence their new name: cyan, magenta, yellow.

2. RGB & Hex: what is it about?

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

  • rgb(59, 89, 145) : blue as the color 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
  • #000000 : black
  • #ffffffff: white

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

3. Cold vs. warm color

There are also two categories of colors:

  • Warm colors: they are composed of a greater quantity of reds and yellows. These colors usually evoke a feeling of warmth and passion. They are also aggressive and bold, which is why they are used in error messages.
  • Cold colors: 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. The color temperature

We often hear about temperature in images. For example, I sometimesincrease the temperature of an image. In more common language, I increase the level of orange in the media in question.

Conversely, when a client asks me tolower the temperature of an image, I reduce the brightness to make it look colder.

5. The shades and nuances

We speak of tint when we add white to a color while we say nuance when the added color is black. So what is the purpose of tints and shades? They are those that allow you to create monochrome.

For example, if your base color is a #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. On the other hand, reducing the saturation of an image means making it lighter, more blurred. Regarding brightness, we talk about the perception of brightness compared to pure white.

Now that you have a notion of colors in general, here are some tips on choosing color palettes.

color in webdesign

Use the color wheel

All colors are related and this can be seen by the color wheel.

You can see all the 12 main colors on this wheel.

Beware! If some colors 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 scheme templates.

1. Monochrome

I talked a little bit about this earlier. Monochrome is obtained from a single base color. It creates harmony. Here's a small caveat: this method may give a monotonous palette.

Here is an example that is based on purple:

color in webdesign

2. Complementary

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

Let's say your page background is green, the CTA button could be pink. Put that way, it sounds weird. I reassure you though that they literally complement each other. See for yourself:

color in webdesign

3. Analog

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

color in webdesign

4. Triadic

To create a triadic color scheme, you draw an equilateral triangle (with three sides of equal length) on the color wheel. Then you select the three colors at the three ends. The result is a color scheme that is both diverse and balanced.

How to use colors in webdesign ?


I don't need to teach you anymore that red is associated with heat, energy, passion and love. It is also said thatwe see red when we are angry, and that is perhaps why it is qualified as the color of blood, power, danger.

All this, to tell you that red is unmissable. It creates a significant effect on the targets of a brand. Take McDonald's for example; it uses red (and yellow) as its brand color. Then there's Netflix. For its CTA buttons, it doesn't shy away from it. Then there is Coca-Cola. Apparently, the idea of giving Santa Claus the color red came from him.

So in the context of web design, how can you use red? Let's say 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 don't have to apply red to the whole site, the product... It can be applied to some elements in particular, the CTA among others.

Photo by Siora Photography on Unsplash


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

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

In Webdesign, I advise you to use this color for sites that particularly target young people or for those that talk about creativity (and everything that comes close). As it is warm, it gives visitors a desire to take action especially if it is applied on the buttons or CTA text.


Sun, summer, sunflower, 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 use the example because yellow is also one of the main colors used by the brand. It has obviously succeeded, because combined, red and yellow are both attractive. Even if you are a few meters away from their logo, it's hard to miss ! There is also Best Buy; do 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 thus, can be used to highlight a specific design element (in this case, it will be exactly like the Best Buy price tag). You still have to be careful with the tones. If some evoke nature and well-being (warm or pale yellow), others give rather an artificial air (neon yellow).

Photo by Andrew Buchanan on Unsplash


Blue is known to be calm, serene and above all: professional. It actually evokes responsibility and intelligence. It is often associated with water, which makes it a refreshing color. The tone level 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 in many companies such as: Intel, PayPal, General Motors and many others. Moreover, social networks love blue (especially in the case of Facebook). The reason is simple: this color inspires confidence, especially since the personal data of many people are processed by these networks.

So, if your site needs to inspire confidence in its visitors, you know what you have to do. Play with 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 advantage of it if you target a large audience for your site.


Growth, health, nature, springtime... we find it all in green. Wealth and finance also have their place in this color, in the United States. So you can choose these colors to represent companies that are involved in the environment, nature, finance, etc.

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

Photo by Scott Webb on Unsplash


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

On the other hand, brown is linked to something old. That's why when a logo takes this color, it's to underline its traditional aspect. Here is an example of a company that uses it in its logo: ultrastjarna.


It is described as the color of royalty, a prestigious and luxurious color. In the past, the pigments used to obtain this color were very expensive. Only kings and queens could get it, and thus, dress with this color. It was even forbidden to wear it to anyone who was not a member of the royal family.

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

Depending on the color you combine it with, however, 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.


Wedding, science and spirituality sites use a lot of white. White evokes a sense of cleanliness and freshness. White also allows for minimalist design, as it is simple, clean and modern : Apple is the best example of this.

White is mostly used as a background color. Thus it can highlight other colors or elements. But still, text contents are more readable in this way. In case it is used as a secondary color within a palette, it is evoked different things depending on the accompanying colors: with pastels, it becomes more feminine while with black, it contributes to give a minimalist, design and classic set.

Photo by Drew Beamer on Unsplash


Finally, black. It implies strength, luxury, evil, death and the unknown. It is also neutral, hence the choice of Channel and Dior in the colors of their logo (black and white). The whole seems intimidating, inaccessible...

This probably gives you an idea of how you will use it on the sites you create. Whether it's 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).


In short, how would you react if someone offered you the car of your dreams, but it was painted in a color that wasn't very obvious (maybe it was a color you hated, or just plain tacky)? You won't be as enthusiastic, will you? All this is to say that colors have meaning. They create an emotion, so choosing them requires real attention.

Come back to this page whenever you want. Did you find any ideas that I forgot? If so, what are they? Leave a comment below or send an email to hello@happydesk.be
Kevin Palombo, Manager of Happydesk
Make the counter explode to reach 1M subscribers together (Pssst...it's in real time)
Together it's more fun

1 Million with you.

It's really amazing how our YouTube community can be a true source of inspiration for all of us. So if you're looking for a community that will give you a boost to reach your personal and business goals, you've come to the right place!
Certified 100%
ULTRA enriching and hair-raising!
Receive a mountain of gifts


We all keep our childish soul, so we like to receive lots of gifts, a montaaaagne of gifts, a galaxiiiiiie of gifts, a.... YOUHOU, are you still with us? Since you also love gifts, receive in your mailbox energy, strategies and tools (each one more grandiose than the other) that will generate results in your business.


Clearsome time for Thursday because an intergalactic surprise awaits you.
Propel your life & your business in 30 days!


The only one, the only one, the real one where all ideas can germinate, develop and succeed. Each phase of business development is thought out down to the smallest detail (even the smallest) to accompany you in your project.

Foundations, development, support, mutual aid, coaching, website, web tools and even cookies. Joining the Happy.webacademy is to be part of this ecosystem without risk, just jump in and let yourself be guided.
AI enabled to accelerate your transformation 🤖
12 Up-to-date modules
We give you crazy training with action plans, regular updates, access for life, and 24/7 support, 365 days a year. Everything you need (and more) to make your life, your business and your skills shine.
Your thruster
We make sure that you are always on top of your questions and that you can grow with a community that has the same dreams as you, and that you can meet super inspiring people.
Never again alone
Your Website!
Who better than Web experts to create a turnkey Website and sell your offers quickly without having to break your head with the technique. No more sleepless nights tearing your hair out, we've got you covered to accelerate your online growth!
We will create you
an Asteroid
12 months Free
We answer all your business, mindset and nugget questions. It's also the best way to get your daily dose of motivation, anything is possible!
Don't forget to bring
Strategy 3.0
The Web and e-commerce are evolving at an incredible speed, and if you don't keep up, you'll lose money. That's why we're going to share with you all our latest tips, discoveries and innovations (automation, artificial intelligence,...) so that you and your business stay on top!
2 Business Coaches
Kevin & Sophie, 2 coaches in the field for 10 years who will be there to motivate you, boost your mindset, and much more! Throughout your entrepreneurial adventure on the Web & in e-commerce, we will support you to validate opportunities or help you optimize your performance. You will NEVER be alone again!
Continuous monitoring
It's sometimes hard to take a step back from your work when you're just starting out (even after), which is why we'll always be there to review your work privately BEFORE you spend any money on advertising or influencers.
Creating a profitable business requires financial optimization. That's why we'll give you the tips we use so you can learn how to invest the money you'll earn in the long run to create wealth.