7 Colors Combination Mistakes to Avoid on Your Website

7 Colors Combination Mistakes to Avoid on Your Website

Choosing colors for your website is not about choosing colors that you like or combine well. It has to be an appropriate combination that strengthens the website and catches the attention of the reader. Nowadays a visually appealing color combination is undoubtedly an essential step for the success of a site.

A lot of people may think that choosing colors is something simple and less important than the content that is written. However, that is not how it works. Would you spend time reading something that disturbs your vision or that you have problems reading? You definitely wouldn’t! Before you start paying attention to what you are reading, you pay attention to what you are looking at. That’s the reason why color selection is so important. You can have an outstanding and exciting message, but if you don’t choose the right colors and make your content visually appealing, people may lose interest and may not read it.

In fact, a study called “Impact of Color on Marketing,” found that around 90% of buyers’ decision-making was solely related to color. The longer the visitor stay on your website, the more opportunity you have to engage with them and communicate your message.

Colors are compelling, and they have different meanings, express ideas, generate interest, and create different emotions. That can either engage you or make you want to stop looking at it.


Basic Color Schemes

To create the best color combination possible for your website, it is important to understand how does the process of color works. First of all, Blue, Red, and Yellow are the three considered Primary Colors. They are responsible for making the other colors. When you combine the primary colors, you create the Secondary Colors: yellow + red = orange; blue + yellow = green; red + blue = purple. Furthermore, when you combine a Primary with a Secondary color, you get the Tertiary Color, such as blue-green, red-orange and yellow-green. All these three kinds of colors, without the addition of white, are considered as Pure Color.

On the other hand, when you add white to the pure color, you get what is called Tint or Pastel Colors. These are not as intense as the pure color by itself. Another tool that is used by the designers is to mix black with a pure color that creates a Shade. Moreover, when gray is added to a pure color, you get what is called a Tone. This is often used when color is too intense, and you want to decrease the level of intensity.

Different colors have different meanings, and you can deliver additional messages using colors. You can check out “Color Communication for Design and Marketing” to understand the meanings of the purposes of the main colors that are used in web design.


To create an exciting website, web designers use strong use of contrast between colors, but this tool is something that has to be handled carefully. Otherwise, it can compromise the quality of the content.

Here’s a list of 7 of the most common colors combination mistakes that you should avoid when designing your website.


7 Most Common Colors Combination Mistakes on Your Website

  1. Neon

    One of the first things that people may think when they are developing a website is to create something that catches the attention of the reader. The Neon color can be fun, but also are aversive and very irritating to the eyes when used in the wrong way. They can be very intense, causing the annoyance and frustration. Because they are too bright, the colors can have problems with either light or dark background.

    A good way to solve the problem related to the Neon colors is to make use of a Tone. When you decrease the level of brightness from them, they will not be as intense as they were. It results in a less disturbing combination. One suggestion in designing your website is to limit your number of colors to two or three, or even four depending on the combination. It will make your content more visually organized and more engaging for the reader.

  2. Vibrating

    When you combine two high-saturated (intensity) colors, you have what is called Vibrating effect. For example, when you have a high-saturated color on the font and also in the background, it creates an aggressive and even uncomfortable situation for the eyes. It is difficult to read a text when there is this combination of vibrating colors.

    The best way to solve this problem between two high-saturated colors is to use a neutral color between them, such as gray, or also decreasing the intensity of the brightness of one of them.

  3. Light on Light

    This is one of the most common mistakes; sometimes people may think that a light background matching with a light text would make it easier and simpler for the reader. But a lot of times it becomes unreadable. That’s why you need the contrast to make the font or images distinguishable from the background. For example, if you have a light background, you should make use of a dark font. Sometimes it doesn’t look that nice, but at least you are readable. If you make use of light on light, there will always be a problem to read it.

  4. Dark on Dark

    This mistake causes the same problem of the light on the light; the combination of dark colors can make the text unreadable. Instead of using both dark background and font, try to make use of some vibrant color or a light one. This would make your website way more visually appealing and easier to read.

  5. Rainbow Colored

    Sometimes people can get too excited when they are designing a new website and try to use too many colors to differentiate from the others and make it more interesting. That is a common mistake; especially for people that do not have experience in the area of designing. However, a lot of times, less is more, principally when you are dealing with colors. Even though this diversity of colors catches the attention of the reader for a moment, in a short period, it will start to be disturbing. This is because people will realize that the exaggeration of colors makes it harder to read the message.

  6. Multiple Colored Boxes

    One of the tools of web designing is to make use of boxes, because it makes the content more organized and easier to read. However, you have to pay attention to the number of boxes and the number of colors that you use on them. If you make use of too many boxes, your content can become really disorganized and visually disturbing, especially if you use different kinds of colors on the boxes. This loses the reader before they find the main focus.

    One advice for those that are creating a new website is to make use of good contrast and avoid using two vibrant colors for it when designing the box.

  7. Colors That Should Not Go Together

    As previously mentioned, you have to be careful when you place two brightly colored hues together. This combination may cause a “visual vibration” which makes it hard for the reader to read it. You should avoid some color combination, such as: green and red; blue and orange; orange and yellow; purple and yellow; blue and green.

    If you are willing to use a combination of any of these colors, be sure to use a neutral color between them or to reduce the brightness of one of them.


As you can see, defining your webpage’s colors is not that simple, and it makes all the difference for the success of your business. When you are choosing the colors, be aware to avoid all these common mistakes above but keeping your business identity. Nowadays, in such a digital and competitive market, having a visual and engaging website is essential to its success.


Now we would like to hear from you. Have you had any problem with colors for your website? Let us know if you have any other colors we should avoid, or if you have any other questions. We will be happy to hear from you.

Leave a Comment

Your email address will not be published. Required fields are marked *