Whether you’re building your new site’s brand from scratch, or are rethinking the palette of your existing website, this guide will help you choose the right color scheme.

Why website colors are important?

Of course, the main element is that people are more visual orientated than based on words or language. 90% of people remember a brand name, 75% the brand logo (even sometimes not in detail) after they have seen it 5-7 times, and only 2% the actual spelling of a company name.

Colors boost brand recognition by an average of 80% and the same applies to your website. Your Website is your identity and should reflect back into your brand colors.

1/3 of the world’s top 100 brands include the color blue in their logos.

none

• A study shows 85% of people claimed that color has a major influence on what they buy.
• The color impression is responsible for 60% of the acceptance or rejection of a product.

But let us talk more about our website, how do we progress to move forward.

Step 1: Choose a Primary Color

The best way to decide on a primary color is to think about the vibe of your product or service and peruse colors that fit that vibe to find one you like. If you already have a colored logo, it makes sense to have a primary color that matches your existing branding.

Different colors are used to convey various emotions, so it’s good to choose one that matches the intention of your business or brand.

Green – Represents wealth, health, tranquility, and nature.

The easiest color for the eye to process so it has relaxation effects. Green is the No.2 most preferred color by both men and women.

Yellow – Represents youthfulness, optimism, and cheerfulness.

Often used to grab the attention of the audience. Yellow can put a strain on the eyes, so you want to use it sparingly.

Orange – Represents friendliness, enthusiasm, and creativity.

Promotes people to take action: Buy & Subscribe. Orange attracts impulse shoppers.

Red – Represents passion, energy, urgency, excitement, vibrancy, and danger.

Often used to create a sense of urgency for people to buy. Effective in triggering strong emotional reactions. Restaurants use it to stimulate appetite.

Pink – Represents feminine, sweetness, innocence, fertility, and romance.

Often used to market services and products to women and young girls.

Purple – Represents royalty, wealth, success, and wisdom.

Often used in beauty or anti-aging products. Purple has a soothing and calming effect on people.

Gray – Represents neutral, simplicity, calm, futuristic. & logic.

It lacks emotion and is associated with technology, industry, precision, control competence, and even sophistication.

Blue – Represents trust, security, stability, peace, and calmness.

Often used by businesses and banks to create a sense of security & trust in the brand. Blue is the no.1 preferred color by both men & women.

Step 2: Choose Your Additional Colors

A good starting point for choosing additional colors is to consider color complements. Every color has a counterpart that makes it “pop,” and these are known as color compliments.

For example, if you’re using a predominantly green website, a good idea is to implement red calls to action or use red to highlight important features that you want to catch the eye of any readers.

Try to only have one or two colors on top of your primary color otherwise, it may look cluttered.

Using a color wheel will help you find colors that work together. Complementary colors are located directly opposite from each other, and the three primary colors are on the triangle points.

Step 3: Choose a background color

This is important although an easy choice to make since it really boils down to two options.

Choice 1

A more muted version of your primary color in order to solidify your branding. This will require a white or grey overlay on the background in order for text to show up.

Choice 2

The more common choice is to have the whole website be an off-white color. It’s inoffensive, and won’t stop anything – text, images, or links – from jumping off the page.

Step 4: Choose a typeface color

The easy option is to choose black, but purely black typefaces aren’t that common. A black typeface on a white background can lead to reader eye strain, as there’s a 100% contrast.

While explicitly colored typefaces should be reserved for highlighting links and important bits of information. You can use gray or gray-tinted colors to give your website a softer, more inviting look. There isn’t much room for experimentation, but it can be worth coloring bits of your text for that finishing touch.

Tips for choosing website colors

Use consistent saturation

One thing you can do to strengthen your brand is to use various colors with a similar saturation. Saturation is another way of saying a color’s brightness, and using it across various colors keeps them visually consistent like Innocent has done in the infographic illustrated below.

Use the same color, but vary the saturation 

Everything being a single color related to a brand can become a bit stale, so it can be fun to take your primary color and play with the saturation a bit – as TechCrunch has done with their social sharing buttons.

Useful Resources to find the Color for your Website

Coolors – A website that helps you grab a premade color scheme and implement It Into your website.

Color Safe – this analyzes your website and gives you technical feedback on how effective your color scheme is for those with colorblindness or poor monitors.

Easy Color Theory – An earlier Skillz Blog article is highlighting the variety of colors in layout and color spacing.

The infographic below was put together by WebsiteBuilderExpert. WebsiteBuilderExpert is one of the greatest sources when it comes to website styling and technology, read more details in the infographic below on “How to Choose a Color for your Website”.