Which Colors to Avoid in Web Design

Advertising is a tricky business and it all depends on how you present yourself. Colors are the heart of any advertisement that decides how successfully it will promote your brand, merchandise or services. That is why using appropriate color tones have become imperative for today’s businesses in order to win the attention of your target audience because every product requires varying forms of advertisement.

If you are looking towards learning the fundamentals of color choice in your web design, this article will help you increase your knowledge on how to do it properly. The right color scheme can be the deciding factor in how successful your ad campaigns will fare, so executing the perfect combination is no easy task.

Importance of Color Schemes

The power of color schemes is something not to be underestimated. If given the right exposure, it can be harnessed to become your greatest strength in any web design. If used creatively, even the simplest of colors can be arranged to stir the minds and hearts of the target audience and win their attention. A color scheme that utilizes the appropriate combination of color hues not only boosts the ability to advertise but also improves the time a user spends on a website averagely.

However, choosing the wrong color schemes can be disastrous to say the least and can drown any product or service, regardless how big it is or what it brings to the table. Some advertisers opt for flashy colors to display their brands to capture the attention of their target audience. Although they may succeed in getting the heads turn in their direction, the audience will eventually lose interest in the long haul. A designer would only do this to distract the customer and mask inferior quality of the merchandise. This eventually ends up damaging brand image and reputation of the business.

In this article, we will cover which types of color schemes to avoid in online advertising. Our team has coined together a list of “NOT TOs” along with an alternative method for you to try.

Using one Color

Having just one color representing your entire website makes it both bland and uninteresting for your target audience. It is most unlikely that the audience will even try skimming it before moving to the next site which is developed with more appropriate color schemes.

Try this:

Adjusting color schemes accordingly is a critical task to ensure for a professional design, capable of drawing attention towards the important aspects of the website. Elements such as buttons, subtitles, quotations and hyperlinks should be issued colors accordingly to highlight their importance.

Picking the Wrongs Color

Choosing the wrong color for your web design can mean the difference of being ignored on a magazine rack or sold on sight. For a website that has a product to sell or even a service to promote, it can easily pick a hue from the exterior of the product or the philosophical property of the service. Either way, a profound representation of your website with what you’re offering helps build a connection with the user. Using a dark color such as navy blue for a web design made to sell beauty products will be disappointing.

Try this:

Before allowing your website to spiral into a costly catastrophe, use color theory to select those hues that are closely associated with the product or somewhat exhibit its characteristics. This helps the viewer to remain engaged to the website and even give the products a shot.

NEON Colors

Using Neon colors is not prohibited at all, but celebrating Holi with them on your web design could be stupid move. Neon colors are created by raising the intensity of the brightness by a tinge to make it stand out in the contrast.

There is no doubt they are funky and fun to be around in the design but just by the appreciable amounts. Using them incessantly on your template can really make the viewer’s eyes tear up, but also cause the text to bleed into the contrast disrupting their readability. If I’m not wrong, your objective is to engage the visitor not cause an epileptic seizure.

Try this:

However, if you’re really persistent, you can always remove the unnecessary brightness from the Neon colors so it makes the text a little darker and less intense. Also, if you have already decided to add Neon colors to the theme, make sure you use them for the smaller elements so the reader can easily see them.

Vibrating Colors

Now mixing or pairing colors with bad blood is like blurring your visitor’s vision intentionally. This happens when colors that are highly saturated interact with each other and ring a “vibrating effect” that makes a glowing motion. This vibrating effect is highly disliked by users.

By combining these brightly colored hues the vision becomes bothersome and produces an afterimage effect that messes up the vision. It not only prevents the user from reading the content but also makes one hell of a mess out of your text.

Try this:

Yet again it is not recommended that you combine vibrating colors with each other, but if so it necessitates, the best way to accommodate this is by introducing a neutral color in between the two bright colors so either one of the two becomes a darker shade.

Also, if you need to find which colors will vibrate you can put them side by side and you will notice:

  1. The High Saturation of color present in between them
  2. Complementary and spaced apart 180 degrees on the color wheel
  3. Little contrast appears when the colors are converted to grayscale
Rainbow Themes

To my opinion anything that breaks the rules of the color theory can be hazardous to your web design sooner or later. So let’s face it, rainbow colored websites just don’t work. Just imagine how many rules you have butchered just to create a rainbow themed template in your head right after reading this.

Rainbow colored web designs are not only unconventional but also misleading – if you know what I mean. You want to promote, advertise or sell something, but showing rainbows to your clients and visitors won’t help.

Try this:

However, if you are interested in producing a multicolor web design with more than 3 colors, use color blocking or card style for your template. This allows you to assign colors to categories block by block without compromising the color balance in the design.

Light Colors on White

Each time I see this mistake I realize how the customer tends to lose interest and moves on to the other website. Using a light color against a light color background is same as selling a sandwich filled with bread. You need to balance light with dark and set a reasonable amount of difference that allows the reader to smoothly scour the website instead of abandoning it. In the latest web design trends, the increase in use of header images is making this a common mishap.

Try this:

The best way to avoid this is compare the background color with the palettes on the color wheel. You can easily distinguish the right combination by checking the contrast friendliness with each other. A good mix will unite the content with the design and produce a natural appeal in your web design.

Experimenting with Detailed Backgrounds

This is probably the most lethal of mistakes regarding colors in web designs. Business owners hire designers to produce the best of their work and erect them a website that has what it takes to bring their business and revenues to the top. But that is where sometimes things go a little off balance. Website designers are always looking into new ways to impress their contractors and in that pursuit they often add excessive amount of color details in the background. Temporarily, it doesn’t look that bad, but when the design moves to the final steps with all its elements and content setting in, it becomes one ugly piece of template.

Try This:

The only way to avoid this debacle is instructing your web designer to refrain from adding color details in the background and keep your team in the loop if anything new is being tested or implemented in the original plan.

Pale Yellow and Bright Blue

Most designers are well aware that Bright blue and Pale yellow are terrible choice of colors when it comes to background of a website. Bright blue is intense and always aggressive towards any other color that comes in their domain. Pale yellow reacts differently and defeats the purpose of a background color by affecting the mood of the visitor and causing other hues to radicalize. Here is why you should never attempt using them.

Bright Blue as Background

Now I don’t mean to offend any bright blue color lovers by saying it looks terrible in as a website background, it’s just a fact that it can’t be, never will be, a good choice of color to set for the contrast. For one, bright blue too strong to be set against the website’s content and two, it leaves the designer with too little of options for combining it with another hue from the palette. It has a vibrating effect that brings it closer to Neon colors and if you did read what I discussed above, Neon colors are a big NOPE!

Try this:

You can use lighter shades of blue especially when you have a card style design to for your website. It will neutralize the vibrating effect as well as serve the need of having a blue color for the background.

Pale Yellow in Background

Adding a little bit of yellow to the headers and maybe some text of the titles might seem ok, but drowning it with the background can mean the difference of a highly visited website and a floating piece of garbage on the internet. It not only gives an unappealing hue, but reflects poor taste of the business towards its clients. Yellow has a sentimental significance for hitting a note of happiness and glee within the audience. Thus, using it without perspective can be irreversibly damaging to your website in terms of cost and loss of customers.

Try this:

You can use it with brown, dark red or orange to ignite a retro look and then use it later on other instances as well. A white background that has yellow tint can surprise your visitors if combined with the right color for the header and footer such as orange.

Ignoring Color Matching Tools

Color scheming isn’t an easy task though, as landing the perfect combination of colors to attract customers is easier said than done. This is because having in-depth knowledge about color mixing and what combination draws the preferred reaction from audience is an art very few people come to embrace. This leads to a heavy reliance on trial and error method, which is extremely risky for advertising. A single mistake can end up failing your entire campaign.

Fortunately, there is a solution to overcome this color scheme barrier, which presents itself in the form of a color matching tool which is built to combine different colors together with the results comparable to veterans of this field.

Try this:

Color matching tools such as Adobe Color CC tool are developed to simplify the selection process of choosing accent colors when you have selected what your dominant color is going to be. Although the tool may seem complicated, in reality it is designed to be both simple and effective.

Color matching tools are equipped with options to simplify color scheming such as:

  • Choosing dominant color around which to select accent colors
  • Choosing a photo around which to select accent colors
Importance of Accent Colors

Important information on the WebPages can be highlighted using accent colors to signify their importance. They may range from hyperlinks to other content on webpage that you wish to draw your audience’s attention to. It is advisable to stick with one or two accent colors, as greater number of accent colors end up creating confusion for website visitors.


While colors play an important role in giving a website its dress code and appeal, using them in correctly in your design templates is imperative if you seek to get a successful business running. Without the right hues at your side, your website will not just be a laughing stock, but also a costly disappointment.

Like the article? Share it.

LinkedIn Pinterest


  1. Great article about choosing web designing colors, I enjoyed a lot reading time

  2. Nice presentation on web design

  3. We’ve found a way to change with the times and adapt to the shift in the advertising landscape while still delivering amazing results when our clients need a creative print ad. We have grown our services
    to offer digital strategy in keeping up with advertising developments but we still remain attached to
    creative design and branding of traditional advertising.

  4. Thanks for the helpful information

Leave a Comment Yourself

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