[email protected]

Color Combinations from Hell – Death Sentence for Your Designs

In order to design effective websites you need to know basic color theory rules. These rules can save you from crucial mistakes, but today we’d like to draw your attention to those errors made by someone else.

Colors to avoid in web design

People are visual, so when they see a badly designed website they just run away. They won’t look for your ‘Buy Now’ or ‘Sign Up’ buttons because there is somebody with more user-friendly website waiting for them somewhere on the web. You have a lot of competitors, so don’t reduce your chances to generate conversions.

Most of the bad web design examples from this post were created long ago. Nobody cares about their redesign and they just exist. Meanwhile there are relatively new websites that were designed by some “professionals” who appear to have eyes at the back of their heads. Of course some designs below are hands-down ugly, some are better – still, all of them could have been made with more insightful colors approach. It’s very strange to see these sites because nowadays most people have an unlimited access to the web where they can learn everything (and the color theory too).

So after analyzing some fatal color combinations of the worst web designs we came to the conclusion that we have to warn you against using these combinations.

Shades of Green, White and Yellow on a Green Background

Green is a fantastic color that indicates balance and harmony. But when you place it as a page background you are at risk of creating a creepy design. That might sound harsh, but a few people can create a nice looking website with green as a background and nobody can do it well if this background is supplemented with green, yellow or white texts without padding.

Green and yellow are placed too close to each other on the color spectrum which causes yellow to melt into the background. It makes the entire design look inaccurate. Moreover yellow and white texts are almost unreadable when they are placed on a green background.

Frankly speaking red and blue are also bad for green spaces. Take a look at the following examples and you’ll see that these colors are too strong for each other.

Military Corruption

Colors to avoid in web design

Roger Art

Colors to avoid in web design

l.a. Eyeworks

Colors to avoid in web design

Light Objects on a Light Background

In order to get more site visitors involved, you need to make buttons and calls to action more visible and texts more readable. People shouldn’t think on what’s been written there on your pages – they expect clearness. That’s where contrast is needed. The most important elements should stand out, so that people understand what you want from them and what they can get from you in return.

Look at the screen shots of websites that combine colors that are too light. The overall look of these pages is dull: all elements are blending and texts are almost impossible to read.

Relogic

Colors to avoid in web design

Bierzto

Colors to avoid in web design

The Taste Consultancy

Colors to avoid in web design

Milkzzz

Colors to avoid in web design

We understand that it can be hard to find proper colors combination, especially when you are a beginner. So if there is a need you can find a suitable palette by using one of the following colors checking tools. All of them are free.

Too Bright Color Combinations

When choosing colors that are too bright your website will suck! Whether you use 2, 3 or 10 colors it can still look bad. For sure vivid tones grab people’s attention. They work well when creating buttons, menus or other important layout elements, but when the entire website is designed with one or several neon tones – that’s just a regular tastelessness. Moreover when people see a lot of colorful boxes and texts they don’t know which one to click, so all your calls to action are useless.

Yale

Colors to avoid in web design

Valley Isle Aquatics

Example of bad color combinations

Accept Jesus

Example of bad color combinations

Mindy Meyer for NYS Senate

Example of bad color combinations

Bright Textured Website Backgrounds with Colored Texts

Background is something that makes your web pages more attractive and design elements more noticeable. It shouldn’t distract visitors’ attention from the on-page information. However some designers do everything the wrong way. They choose the most vivid and neon color mixes and supplement them with colored texts. In the end the website looks like a real nightmare with unreadable texts and spooky images that irritate people a lot.

In case you want to have a textured background try not to place texts and images directly on it. Use some shapes with high opacity to block everything underneath. However, it would be better to avoid such extremes as highly textured backgrounds.

Constellation Seven

Example of bad color combinations

High Calling Cocker

Example of bad color combinations

Cloud 9 Walker

Example of bad color combinations

Colorado Ranger

Example of bad color combinations

Water Equipment Technology

Colors to avoid in web design

Vibrant Tones on a Black Background

Black is a very strong color that inverts other tones and makes them look too bright even if they are not really so vivid. People are used to mixing black with any colors without a doubt because it always goes well. However computer screens and mobile phone displays have different color rendering and it can happen that your design will look unexpectedly bad.

You should be careful using bright tones (red, blue, green, purple, pink) on a pitch black background. It creates an aggressive look whether you add text or images. Neon colors shine too strong and complicate texts readability.

Fiber Optic Products, Inc.

Example of bad color combinations

Pengun

Colors to avoid in web design

Graham Masterton

Example of bad color combinations

The Rent Is Too Damn High

Colors to avoid in web design

Stereo and Alarm

Example of bad color combinations

Too Many Colors in One Design

You probably know that too much of anything is bad. It’s especially important in the color theory. Too many colors are not just bad looking – they annoy and irritate potential customers. It even happens that rainbow colored web pages are decorated with blinking and sparkling elements. Some designers think it might be impressive and it is really so! However people are too much impressed and want to close the weird window/tab right after they enter it.

Web designers from all over the world conclude that it’s better to make designs with only 3 colors. It’s hard to argue with this statement after viewing really bad web design examples from below.

1001 Pens

Example of bad color combinations

Ingenfeld

Example of bad color combinations

Bavarian Brathaus

Colors to avoid in web design

Who Is Penny Juice

Colors to avoid in web design

Ling’s Cars

Example of bad color combinations

Blue Background with Any Colors

Bright blue is a bad background color. It doesn’t matter which colors you choose for texts and other page elements – blue will still be too strong for them. It makes all texts look badly readable and eyes quickly get tired of it.

There is also a psychological reason not to use too much of bright blue: BSOD screens have blue backgrounds. Nobody likes viewing them unexpectedly because usually it means that your computer has crashed and needs your help. Blue websites can be associated with the Operation System crashes, so people will try to stay away from them.

Space is the Place

Example of bad color combinations

Hosanna

Example of bad color combinations

Industrial Painter

Colors to avoid in web design

Indiana.edu

Colors to avoid in web design

ann.davlin
Ann Davlin is an inspired blogger who works at MotoCMS - a company that brought you an advanced website builder. That's who she is by day. But as the night falls she turns into a superhero web surfer restlessly browsing through thousands of funny cat pics and videos. If you want to discuss either of that feel free to connect with her on Twitter and Google+. Cheers!
More articles by ann.davlin

Comments are closed.

Related Posts