Choosing the Right Colors for Your Website

 

Picking the right colors for your branding can be daunting. Color communicates on an emotional level. Good color choice can influence your users and create positive associations. Poor color choices could just make them go to another website.

In short, color is a fast and direct way to make a good first impression. While overwhelming at the start, you can nail down a color story with some basic knowledge of the science behind color theory.

Choosing a color is more than a matter of personal preference. Colors can have different meanings and can influence people in certain ways. Let’s look at some general meanings and what emotions they can trigger.

Warm Colors:

These can have an energetic effect on the visitor, but when they are used alone they tend to over-stimulate. It is a good idea to mix them with cool and neutral colors for balance.

Red—active, emotional, passionate, strength, love, intensity

Pink—sweet, romantic, playful, warm, compassionate, soft

Orange—warm, enthusiastic, success, determination, friendly

Yellow—youthful, lively, energetic, fresh, optimistic

Cool colors

These have a calming effect on the viewer, and that is why they are the most common colors used on websites. But be careful—if they are overused, they can also have a cold or impersonal feel.

Green—fresh, calm, relaxed, trust, peaceful, hopeful, healing

Blue—comfort, clarity, calm, trust, integrity, loyalty, reliability

Purple—glamour, power, nostalgic, luxury, ambition, spiritual

1

This web design achieves a sense of loyalty and trust using the color blue. Design by DSKY

Neutral colors

These are great to mix with warm or cool colors and they are often used to tone down primary colors and provide balance in web design.

Gray—respect, wisdom, patience, modern, longevity, intelligent

Black—powerful, bold, serious, elegant, luxurious, dramatic, formal

Brown—friendships, earth, home, outdoors, credibility, simplicity, endurance.

 

Now that we understand the meaning behind color, we can now choose a primary color.

In order to create a color scheme, your first priority is to establish a primary color for your brand. This should be determined from your logo or other branding materials that exist, but if that is not possible, use the color psychology we discussed above.

2

This web design pulls its primary color from the brand logo. Web design by Iconic Graphics

Developing tints and shades.

Once you have a primary color, you want to start choosing other colors to support it. Some websites can get away with using a single color for their design, but most of the time you’ll want at least a few shades or tints to work with.

It is not the best idea to use your primary color throughout the whole design. You can tone it down or brighten up the tint to create subtle contrast while still keeping the same base color. For example, the website below uses a lighter shade of their primary color for the background and their most prominent tint for the call to action buttons to make them stand out more.

3

If you want to use multiple colors in your design, check out an online color wheel. Color wheels are used in color theory to create and discover complementary colors. Below are some examples of some of the most common color theory structures in web design. 

5 6 4

 

 

The 60-30-10 rule.

Simple but effective, this rule helps your design archive a harmonious palette when you mix colors. For balance, colors should generally be combined in the proportion of 60%-30%-10%. You don’t always have to go with three colors, but it is a good number to be safe and balanced. Using this method, 60% should be the dominant color, 30% a secondary color and 10% an accent color. This proportion is pleasant to the human eye since it allows the visual elements to emerge gradually. 

 

Contrast 

Color contrast is a vital component of good color use. For example, if you need your users to pay special attention to a specific area of your website (such as a CTA button), you can make use of two highly contrasting colors such as blue and orange for your background and button. 

Be careful, if you use high contrast all throughout the site it will be difficult to read or look at the text. I would recommend that you use high contrast items when you want to highlight key items.

 

Working with images.

In some cases, it might be helpful to start your color selection process by looking at images. If you already have images in mind, you may be able to pull out the main colors from them. When working with multiple images, it can be hard to create color harmony in the design. There are several ways of balancing your images:

-Consider turning them to grayscale

-Adjust the vibrancy of the images to bring down the tone

-Use neutrals to balance the images

-Create a gradient overlay with the hues of the color palette that you’ve chosen for the web design.

Colors can be powerful when used correctly. They can promote emotions or actions from your users. While color is an important tool in web design, it is just one among many you need to create an outstanding website. Check out our other posts to get some more tips and tricks in regards to web design.