Which Colors to Avoid in Web Design

by Bradley Nice, Content Manager at ClickHelp.com — software documentation tool

Colors are the heart of any advertisement that decides how successfully it will promote your brand, merchandise or services. The power of color schemes should not to be underestimated. If used creatively, even the simpliest colors can not only boost the ability to advertise but also improve 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 of how big it is or what it brings to the table. For example, some advertisers choose flashy colors to capture the attention of their target audience. Although they may succeed in getting the heads turn in their direction, the audience will lose interest in the long haul. 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. I’ve gathered a list of “NOT TOs” along with an alternative methods for you to try.

Using One Color

In case only one color represents your entire website, 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:

Color schemes should be adjusted accordingly to be 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 Wrong Color

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. But using a dark color such as navy blue for a web design made to sell beauty products will be disappointing.

Try this:

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. Using neon colors 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 your objective is to engage the visitor not cause an epileptic seizure, here’s a tip:

Try this:

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. 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 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.

Rainbow Themes

To my opinion anything that breaks the rules of the color theory can be hazardous to your web design sooner or later. 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

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.

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.

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. 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.

Try this:

You should never attempt using them.

Bright Blue as Background

Bright blue is 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.

Try this:

You can use lighter shades of blue especially when you have a card style design 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. 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. A single mistake can end up failing your entire campaign.

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.

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.

Conclusion

While colors play an important role in giving a website its dress code and appeal, using them 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.


Have a nice day!

Bradley Nice,
Content Manager at ClickHelp.com — best online documentation tool for SaaS vendors