It might sound crazy but 85% of shoppers say color is a primary reason they buy products. Color is a huge part of the impression your website design gives off. And it’s not something you want to leave to chance.
Building your brand website is a huge endeavor. As you bring together design elements for your site, you’ll want to spend time considering your website color scheme options.
Let’s walk you through everything you need to know about website color schemes, so that you can make a winning choice.
Table of Contents
Why are website color schemes important?
Your website color scheme is the palette of your brand’s personality. In turn, it also impacts how potential customers feel about your brand and their initial level of comfort when browsing on your site.
Yup, colors are pretty powerful.
But colors are also a big decision from a design point-of-view. When you choose a website color scheme, you’re also locking in key design decisions. By starting with the right color, your site can become more organized and the overall design will fall into place more naturally.
So, it’s essential to choose the perfect color scheme for your website so that you:
● Boost brand recognition.
● Give off the right impression to potential customers.
● Keep your site organized and the design professional.
Sound like a big decision? It is.
How to choose a color scheme for your website
1. Know what website color schemes are saying
Colors convey a lot. In fact, color psychology is a well-studied phenomenon that explains how different colors make us feel. Depending on your industry and brand, you’ll want to make sure your colors are giving off the right messaging.
Here are some common concepts for what certain colors make us feel:
● Black: power, sophistication, luxury and formality.
● Gray: seriousness, precision, control and lack of emotion.
● White: purity, cleanliness, newness and simplicity.
● Brown: dependability, earthiness and reliability.
● Blue: strong and reliable (dark blue), calming and friendly (light blue), refreshing and energizing (bright blue).
● Green: new beginnings, growth, wealth, stability and nature.
● Yellow: happiness, hope, calmness and timelessness.
● Orange: energy, creativity and changing seasons.
● Red: energy, power and elegance.
● Purple: abundance, creativity, imagination, luxury and romance.
As you can see, some colors may be more suitable than others depending on what you want to convey. These colors can also communicate powerfully in combination. For example, the famous McDonalds sign is red and yellow, which is energetic and “may even stimulate hunger.”
2. Get inspired by checking out website color schemes
Before you narrow down your color scheme choices, start by getting inspired. Make an inspiration board with designs that you like or think are closely related to your brand.
You might even consider making a Pinterest board with color and design elements that you think give off the right impression. Or you can save a list of links to sites you admire.
We’ll even help you out through 50 website color schemes examples, which give a taste for the wide range of amazing color designs.
As you’re getting inspired, you may find colors that you adore. Be sure to look up the hex codes when you do. You can do this easy-peasy using the ColorZilla extension to get the hex code on any site.
Take the time to look around and check out like-sites to see what your competitors are doing too. Of course your brand is unique, but you may get some ideas of what or what not to do with your own site.
3. Find website color schemes that fit with your target audience
Next up, it’s time to match your target audience with the right colors. This will ensure that you’re using colors that will charm your potential customers.
You likely already have a target audience in mind for your product or service (for example educators, or women aged 20-40). If you’re not sure, you should define your target audience ASAP. Who is your ideal customer?
Now that you have that down, let’s go over some color considerations depending on your target audience. These takeaways are based on a study compilation on favorite colors across different demographics, made by Neil Patel.
Colors everybody loves/hates
● Generally speaking, everybody loves blue. In fact, 33% of companies use blue as their primary color.
● Everybody hates orange and brown, which may be linked to being cheap. Use them sparingly or where it makes sense for your industry.
Colors women/men love/hate
● Women love purple (23% said it was their favorite color).
● Women prefer lighter shades and softer colors.
● Men prefer neutral colors, darker shades and brighter colors.
Colors by type of shopper/site
● For cheap deal shoppers: darker colors, reds, oranges, blues and blacks.
● For budget-conscious shoppers: blues and greens.
● For older, traditional shoppers: lighter shades like pink and sky blue.
● For ecommerce or content-heavy sites: neutral colors.
Of course, this information can guide you towards more suitable colors but you don’t have to follow it. Depending on your brand personality, industry and general preferences, you might lean towards different colors than outlined here.
4. Make sure your website color scheme works well with your industry
Colors also depend greatly on your industry. Some industries have the tradition of using certain colors, which enhance brand and customer feeling. At the same time, some colors just don’t go well with some industries (for example, brown for the food industry).
Below, you’ll find some common traditions for colors according to industry. (Takeaways have been sourced from Marketo’s True Colors infographic.) These should be taken as guidelines only. You know your brand best and this info will simply inform your ultimate color scheme choice.
Red
Popular for: Food, Tech, Cars, Agriculture
Questionable for: Household, Health Care
Unpopular for: Energy, Finance, Airlines, Clothing
Purple
Popular for: Finance, Tech, Health Care
Questionable for: Airlines, Clothing, Food, Household, Cars
Unpopular for: Energy, Agriculture
Blue
Popular for: Energy, Finance, Airlines, Tech, Health Care, Agriculture
Questionable for: Household
Unpopular for: Clothing, Food, Cars
Green
Popular for: Energy, Finance, Food, Household, Tech
Questionable for: Health Care, Agriculture
Unpopular for: Airlines, Clothing, Cars
Yellow
Popular for: Energy, Food, Household
Questionable for: Health Care, Agriculture,
Unpopular for: Finance, Airlines, Clothing, Cars, Tech
Orange
Popular for: Tech, Health Care
Questionable for: Food, Household, Agriculture
Unpopular for: Energy, Finance, Airlines, Cars, Clothing
Brown
Popular for: Clothing, Cars, Agriculture
Questionable for: Energy, Food, Household, Health Care
Unpopular for: Finance, Airlines, Tech
Black
Popular for: Clothing, Tech, Cars
Questionable for: Household, Agriculture
Unpopular for: Energy, Finance, Airlines, Health Care, Food
White
Popular for: Clothing, Health Care
Questionable for: Energy, Airlines, Tech, Household, Cars, Agriculture
Unpopular for: Finance, Food
As you can see, popular and unpopular colors range by industry. You’ll at least want to take a look at traditions for your industry and how you might follow or break from them.
5. Fill out your brand personality with primary, secondary and background colors
Now that you have a better sense of what colors may be best, it’s time to select your primary, secondary and background colors.
First you’ll want to decide on your primary color. This is the essence of your brand personality. Can you imagine Starbucks without its quintessential green?
Your choice of primary color will be the heart of your brand. It will be used in your logo and across your website and brand materials. It should convey the feelings you want to communicate to potential customers.
After choosing your primary color, you’ll also want to decide on other key elements:
● 1-2 secondary/accent colors: these are typically more powerful colors that are used in only a few areas of your website, including buttons, banners, subheadings, active menu items, and content headlines.
● 1-2 background colors: this is typically black, white or gray. Otherwise you risk hurting the eyes.
Not sure how to choose your secondary/accent colors? We recommend creating a strong visual hierarchy by using a color wheel tool. Adobe Color has a great one so you can plan your secondary colors and try them out on-screen.
6. Bring out the best of your brand personality
After you’ve chosen your primary, secondary and background colors, you’ll want to make sure that your website color scheme is coherent. As you design your website, the same types of headers and banners should have the same colors. This is essential for achieving a coherent and beautiful design.
Of course, your website color scheme is just one element of your brand personality. You’ll also want to work on creating a logo, choosing image/graphics, organizing your navigation menu and hitting the right brand style for your content.
To jumpstart the process, this checklist of best practices can help you turn your web design from good to great.
All these elements are glued together by your amazing website color scheme. Building your brand personality means taking every design decision within that framework.
More website color scheme resources
Your website color scheme is a vital decision for your brand personality and overall web design. By following our six steps for choosing a winning website color scheme, you’ll get colors that work with your brand and industry, and stand out from the crowd.
If you need an extra hand with your website color scheme, you can always hop over to Create a Pro Website for more in-depth guides on everything related to web design.
