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.
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.
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.
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.
- Color Contrast Checker
- Color Contrast Check
- Luminosity Contrast Ratio
- Check My Colours
- Accessibility Color Wheel
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.
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.
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.
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.
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.