Colors in Web Design: the Good, the Bad and the Ugly

Web design has evolved just like any other skill discovered and perfected by people: it had its infancy with awkward or cringe-worthy examples of design templates; it grew up into exuberance together with the development of more complex graphic design software and functionalities offered by programming scripts; and it has finally reached a mature stage. Clients are well aware of the wide-spanning possibilities of web programming, and designers have reached professional and creative maturity through years of working and specializing.

However, every once in awhile, we still happen upon a cringe-worthy looking website which certainly belongs in the wild 1990s, not in the 21st century. As astonishing as it seems, it is not a personal blog, but a company website. How do these websites still exist? How do they get created in the first place? The main issue with bad-looking websites is the color scheme used in designing them.

For this reason it is important to discuss this critical aspect: the good, the bad, and the absolutely ugly colors and color combinations in web design.

The Good

Analogous and Complementary Colors

A great design is built around a color scheme which uses both complementary and analogous colors. Complementary colors are situated across from each other in the color spectrum: blue and orange, red and green, yellow and purple, for example. Analogous colors are situated next to each other, such as blue and purple, or white and gray.

Complementary colors should be used in those areas of the page where you want to attract the viewer’s attention through the contrast these colors create. For the rest of the page, the color palette should focus on soothing analogous colors, to avoid creating eye fatigue.

Neutral Colors

White and black are considered non-colors, or neutral colors. This is the best combination for blocks of text, ensuring maximum readability and focus on the text without distractions. White and black are also a great color scheme by themselves if you want to achieve a clean, hi-tech and professional look for your website.

The Bad

Muted Colors

Light pastel colors are considered elegant and professional. They are, but in a good combination with a complementary color, creating a contrast between background and text or background and graphics. However, when your color scheme is light yellow on cream, or powder blue on white, your website becomes an overall bright patch of nothing. People would have to squint their eyes or adjust their monitor settings just to be able to read your message – and you can be sure that they will not bother to do that, with so many other great websites to pick from.

Bad Color Symbolism

Whether we are aware of it or not, each color conveys a certain emotion and meaning. Red is love, passion, excitement and food (thought to stimulate the appetite); yellow is youth, optimistic and conveys exuberance; green represents money, nature, tranquility and health; blue is calming and conveys professionalism; and black can mean a lot of things- from luxury, power, elegance and formality to mourning, evil, death, and mystery. Using a color in the wrong context is a kind of faux pas that will not go by unnoticed.

The Ugly

Textured Backgrounds

Textures are not bad per se. There are great looking, discreet textures which enhance the overall look of a website, even giving it a 3D look. But large, ungainly patterns which already look busy, with other graphics and text superimposed, are not just horribly unprofessional – they cause eye fatigue and will automatically turn a visitor away from the website.

Vibrating Colors

Vibrating colors occur when two highly contrasting colors are placed one next to the other or one superimposed on the other. These color combinations are actually painful to look at. Some examples are: blue and pink, green and orange, or red and purple. It is even worse when the selected shades are bright.

The Great Combinations

The art of creating an excellent chromatic palette for a website is selecting the combination of colors that convey the right emotions which the website should create. There are color combinations which complement each other, such as brown and orange, and strong contrasts to catch the viewer’s attention, such as black and yellow or red and white.

There are a few rules which, no matter how creative you wish to be, you should never break:

  • If the central focus of the page is the text, then you should add lots of white space, and create a neutral contrast between the font color and the background. The classic black and white of the printed book is an excellent choice;
  • Apply the 60-10-30 rule: the main color in your palette should occupy 60% of your design, the strongest color 10% and the complementary color 30%;
  • If the central focus of the page is an image or any other graphic element, use muted colors for the background.

In order to identify and create your own color palettes for any web design project, you should go back to the basics – the 12-spoke color wheel. Of course, you can also use the online Adobe Color CC tool, but every good designer knows that if you keep it simple and you stick to the basics, your creativity can experience a major boost.

And this concludes our incursion in the world of colors in web design. As a parting thought, remember that there are still some differences in the way various browsers and mobile screens display colors, so test your color palette on as many devices as possible to correct potential unflattering color combinations.

Read more: