A Guide to choosing colors for your next web design!

Photo by Steve Johnson on Unsplash

If you are a web (or application) designer, choosing colors for your website may seem to be a bit complex if you’re not really ‘into’ the visual arts. Here is a comprehensive guide for all of you out there who want help deciding which colors to use for your next website (or application)!

The right choice of colors is really crucial everywhere. They prove an important role in determining the psychology of your end-user. If the right colors are not chosen, your website might be a disaster, as it would make the user quickly navigate away from your website. This makes it essential to use the right colors that give the right impression of what your website is about.

Photo by Marcus Dall Col on Unsplash

Black

Black represents power, elegance, mystery, and elegance. On the flip side, it may also represent death or evil.

Although black goes pretty well with any light color, be really careful with black in your web design! Note that, black is a very heavy color — meaning the visual weight of black is more than the rest of the colors. You can use black for text on a light background, but the vice-versa combination may not be very comfortable for the user’s eyes. If used properly, black dominates your website’s look.

Now, if you’re wondering — “I’ve seen black backgrounds on many websites” — I would recommend you go back on that website and observe if it really is black, or is it a really dark version of any other color!

Check out this website to see the effect of a black background!

Photo by Elena Joland on Unsplash

White

White represents elegance, purity, cleanliness, peace, spirituality, and minimalism. Wow! White can mean a lot of things, don’t you think?

White is probably the most widely used background color on websites. Because of its low visual weight, white can go along well with any other color. The fact that it tends to be pleasant to the eyes makes it all the more usable. It has less visual weight, so you can use it in more amounts in your design.

White is the way to go if you want a simple yet elegant web design. Using white, makes your website look decluttered. It gives clarity of what to focus on, on the page, to the user.

Go take a look at Apple’s website to see an example of the elegance portrayed because of white!

Photo by Kai Oberhäuser on Unsplash

Violet/Purple

Violet represents creativity, wealth, royalty, and imagination. Softer shades of purple may give a sense of romance or spring.

Unlike black or white, purple comes in many shades. Each shade gives a different outlook to your website. Purples can be great backgrounds as they make the page look rich. Be careful of the visual weight of the shade you are using though! You don’t want to use this color in excess.

Go take a look at Cadbury’s website to see purple in action!

Photo by Sergi Marló on Unsplash

Blue

Blue represents calmness, dependability, responsibility, and strength. It can also represent sadness — Monday morning blues!

Different shades of blue can mean different things! Lighter shades of blue can be used to show calmness or dependability. Darker shades can be used to represent power or strength. Decide which blue you want to use based on how you want your end-user to feel.

Check out Walmart’s website, which has blue as its primary color.

Photo by D. Jameson RAGE on Unsplash

Green

Green represents nature, freshness, growth, new beginnings, energy, and vibrance.

Green has very positive energy associated with it. Use this color if your website is related to nature or money. Green would also look good on a website related to food. If you are choosing a darker shade of green as a background, make sure to use a good contrasting color for the text! Adjust the amount of green on your screen with reference to the shade of green that you are using.

Go check out Shopify’s website and Grammarly’s website!

Photo by Markus Spiske on Unsplash

Yellow

Yellow represents happiness, brightness, optimism, and sunshine.

Yellow would be a great color to use in your website/app if you want your end-user to feel excited or happy. Ever felt happy looking at a smiley sponge ball? Yellow also quickly draws the user’s attention. Now you know why lane dividers are yellow! ;)

Take a look at Snapchat’s website (or even their app!).

Photo by Sheraz Shaikh on Unsplash

Orange

Orange signifies fun, friendliness, sometimes confidence, and power as well.

Orange is a risky color to be used extensively on your website. You can use it along with its contrasts to create an ambient effect though. Many people would not choose orange as their dominant color provided the heavy effect it has on your eyes. You can use it, however, for your call-to-action buttons, or sections that you want to highlight.

Take a look at this website!

Photo by John Matychuk on Unsplash

Red

Red represents passion, love, anger, danger, and more negative things overall. Being a very dynamic color, it can make your user feel a wide range of emotions — from passionate to energized to powerful to dangerous! Wow! What opposite emotions!

If you want to use red in your application, make sure to use it in fewer amounts. It has a high visual weight, making it very heavy for the end-user to look at and interpret.

Red is usually used to attract people’s attention quickly (such as the stop sign, or danger-signifying signs).

Take a look at Coca-Cola’s website! Notice how they have used red in appropriate portions only, even if red is their primary color.

I hope this article gave you useful insights and guidance regarding which colors to use on your website or application! If you liked reading this article, please do clap for it or let me know in the comments section! 😇

Thanks for reading!

For more such articles, you can follow me — Prajakta Sathe!