How to Choose a Good Color Scheme For Your Website

how to choose color for websiteChoosing a good color scheme for your website could be a scary thing- especially if you’re not confident about your color coordination ability, or feel that you’re not a skilled designer.

My husband is slightly color blind, which makes him very nervous whenever he tries to pick a color for anything!

What about you?

  1. What color should you use for your logo or headline?
  2. Do you know how to pick complementary colors that combine well?
  3. Which part of your website should you use color?

Picking and mixing color can be a tricky game.

The result can look harmonious, or like a scene straight out of a horror film!

If you avoid any colors, your website can look uninspiring and forgettable. If you use too much color on your website, you risk making it look tacky.

In addition to not understanding how to pick the right template design, learning how to use color on your website is one of the biggest challenge any DIY website owner can face. This is especially true if you don’t have a natural aptitude for color and design.

If you are drawing a blank on what and how to use color on your website the right way, this post can help you.

Using color can be simplified once you know the right steps to take.

So, we’ve put this guide together to show you, step-by-step, how to:

  1. Choose the right dominant color for your website and brand.
  2. Combine complementary colors to create your perfect color scheme.
  3. Choose a background color that works for you.
  4. Use color in the correct places on your website – like a pro.


Let’s get started!
By the way, if you don’t have a website yet and you’re looking for the right website builder, take a look at our website builder comparison chart where we break down and score each website builder. See which one might work well for you.

Or, why not take a quick look at our favorite website builders in this simple chart below:

Best All-Around Website Builder

4.7out of 5

Top Choice
Ease Of Use

4.5 out of 5 stars

Help and Support

5 out of 5 stars

Design Flexibility

4 out of 5 stars

Value For Money

4.5 out of 5 stars

Design-Oriented Website Builder

4.3out of 5

Ease Of Use

3.5 out of 5 stars

Help and Support

4 out of 5 stars

Design Flexibility

5 out of 5 stars

Value For Money

3 out of 5 stars

Easiest To Use Website Builder

4.1out of 5

Ease Of Use

3.5 out of 5 stars

Help and Support

3.5 out of 5 stars

Design Flexibility

4 out of 5 stars

Value For Money

4.5 out of 5 stars

 

How color can improve your website and brand identity

When I ask you to think of Coca-Cola, what is the first thing that jumps into your mind?

Well, wanting an ice cold bottle of Coca-Cola might be one of them.

Then, an image of the iconic red coke logo may come to your mind.

how to pick website color - coke
Source: www.coca-colacompany.com

It’s pretty hard to think of Coca-Cola without seeing the color red. The color red is as much a part of Coca-Cola as its famous soda.

Did you know the decision of Coca-Cola to use red as their brand color was not accidental?

The color red serves two critical purposes:

#1  The fire engine red allows Coca-Cola to stand out from their competitors on store shelves; and

#2  Every color has different feelings or emotions attached to it. When people see the color red, it triggers emotional responses like excitement, boldness, love, and passion. These are precisely the feelings that Coca-Cola wants you to associate with its soda.

website color picking - coca cola
Source: us.coca-cola.com

When you pick the right color for your website, you are doing so much more than just make it look appealing — You are creating a memorable brand.

85% of shoppers place color as a primary reason for why they buy a particular product.
80% increases in brand recognition when using color. Brand recognition directly links to consumer confidence.

Source: Kissmetrics

By now, you should be thinking “Wow, color is like magic! Why aren’t more people using it to their advantage?”

Well, because most people don’t know how.

So, in the next section, we will show you 3 easy steps you can follow to start using color to your advantage on your website.

 

3 steps to using color on your website – the right way

There are 3 main colors you need to consider when you are designing your website:

  1. Choosing a dominant color as your brand color
  2. Choosing 1 to 2 accent colors to create a color scheme for your website
  3. Choosing a background color to complete your design

That’s pretty much it!  Don’t worry, we’ll show you how to pick them along with some examples — let’s keep moving forward!

#1 Choose your Dominant Color

The dominant color is your brand color – like the fire engine red for Coca-Cola.

This color will help bring out certain emotions or feelings when people arrive on your website – just like passion, excitement, boldness and love for Coke.

This is the color that you want your audience to remember when they think of you.

If you already have a logo, make sure one of the primary colors of your logo is using your dominant color (if you’re not sure how to create a good logo, see this guide).

However, if you don’t have a dominant brand color in mind yet, here’s how to pick one:

Meaning of Colors: How to choose the right color for you

Big companies don’t pick their dominant / brand colors by accident. It’s strategically chosen to be used as part of their branding and marketing initiatives.

Different colors have the abilities to attract specific types of shoppers, and can even alter consumer behaviors.

psychology of color for websites
Click to Enlarge

Source: Kissmetrics

You can also use various colors to your advantage so you can attract the type of customer you want.

We’ve created a handy infographic to help you choose your perfect dominant color. See if you can find the color that best represents what you stand for!

personality of color for websites

Now that you have a good idea of what certain colors mean, which one best matches your business, or how you want your website visitors to feel when they see your brand?

If you’re not quite sure yet, that just means you should take some time to reflect on your brand and the type of customers you want to attract.

Are you trying to attract younger, more energetic customers? Or sophisticated individuals with more disposable income? Are your products / services catered to male or female?  Are they more suitable for a certain age group?

Not all colors are right for your business.  For example, if you are selling yoga mats, using purple (wealth, royalty) or black (power, luxury) might not be the best choices. You might want to consider using green (health, tranquility), gray (simplicity, calm), blue (peace, calm) or even red (passion, energy).

Go ahead and take a few minutes to jot down some ideas.


The Differences Between Guys & Girls – Their Color Preferences

Okay, different colors appeal to different types of people, but did you know men and women generally prefer different colors as well?

Which gender does your business or website target? — Is it women? men? or both?

color influence on gender
Click to enlarge image

Source: Infographic: How Colors Affect Conversions & Gender and Color

You can create a very powerful and targeted brand color by studying the table above.

By using color combinations that are favored by either male, female, or both, you can alter their perceptions of your brand – subconsciously.

For instance, based on studies, you can see that both men and women like blue and green.  Both genders also dislike orange and brown.  So if you are targeting both genders, the research says that it would be more advantageous to consider using blue or green as your dominant color (or at least accent color – more below).

This is helpful intelligence to have!

Let’s take it one step further.

How you use color for your brand or products / services, can also be influenced by what emotions your target audience is drawn to.  

Let me explain.

color-of-brand-attract-different-customerA lot of times, people purchase specific products / services as they subconsciously want to project a certain personality to others.

Being seen strutting down the street with a new expensive purse, or hanging out in a hipster coffee shop, or being seen in a trendy new lounge, all quietly communicate certain characteristics about a person.

Do you get my point? A lot of personal decisions are reflections of who they feel they are, and what they want others to see. It’s an identity people associate with and want others to know about it.

So, if you want to attract people who identify with nature and tranquility, use green. If you want to attract those who want to be seen as youthful or optimistic, try yellow. If your target audience wants to be seen as powerful or luxurious, try black.

Get it?

Take a few minutes and think about your ideal audience, and what they aspire to be identified with. What do they want and how do they want to be seen?

A lot of psychology here, but it’s important for you to consider when building your brand.


How to use your dominant color on your website

Now that you have a dominant color, you want to use color in the right places on your website.

Color attracts a lot of attention, so you don’t want to insert it everywhere.

Here’s a general rule of thumb:

Only use your dominant color in a limited number of places where you want your website visitors to pay attention to, or if you want your visitors to take certain actions (such as call a phone number, fill in a contact form, sign up to a newsletter, etc).

Basically, your dominant color is supposed to “pop” – really highlighting where you want your visitors to focus on.

where to use dominant color on website
Source: Wix.com

#2 Choose your accent colors

It is pretty boring to have just 1 single color throughout your entire website.

To make your design more interesting (and professional), you need accent colors to highlight attention-worthy parts of your website like quotes, buttons or subtitles.

Color mixing and matching actually scare a lot of people because it’s not always easy or intuitive to tell which colors blend well together without a good understanding of color theory, and a lot of trial and error.

But, who has time to get a Ph.D. in color theory?! – Not me.

Thank goodness there is a shortcut that everybody can use!!  It’s a color matching tool that can help you combine colors like a pro!

How to use a color matching tool to help you select your accent colors

Once you have your dominant color, it’s really easy to find your accent colors by using color matching tools like Adobe Color CC tool.

Adobe Color CC looks complicated, but it is actually a pretty simple tool to use.

We’ve created a short tutorial to show you how to use it to build your color scheme from one of two ways:

(Click below to open tutorial)

Step1: First – get the color code of your dominant color from ColorPicker.com. The color code is located directly above the color square box.

Once you have the color code from ColorPicker.com, insert it into the “HEX” box in the Adobe Color CC Tool. Make sure you insert the code into the HEX box in the middle column:

how to choose color for websites
Source: color.adobe.com

Once you’ve done that, the Adobe Color CC Tool will display your color, along with a few other complementary colors.

Step2: On the left-hand side of the Adobe Color CC Tool, you will see the following Color Rules:

  • Analogous
  • Monochromatic
  • Triad
  • Complementary
  • Compound
  • Shades
how to choose color for websites
Source: color.adobe.com

Click on the Color Rules to see the various color schemes and pick the one you like. All the colors presented will work well with each other.

Step3: Fine tune your color scheme by dragging on any one of the color selectors.

It’s important to never move the middle color selector with a small arrow so to keep your dominant color constant.

how to choose color
Source: color.adobe.com

Step4: Copy your color scheme codes at the bottom of the tool.

These hex color codes are the color codes that you can use for your website – they will all work well with your dominant color.

Website builders such as WordPress, Wix, Squarespace, Weebly, etc, all give you the option to insert HEX color codes to style certain parts of the website.  You can see our website builder comparison chart here.

how to choose color
Source: color.adobe.com

Use a photo to create your color scheme

If you don’t have any ideas on which color you want, you can create your color scheme based on a photo of your choice.

A lot of times, it’s easier to find a color scheme you like online and mimic it.

Adobe Color CC allows you to upload any image and it will automatically generate the color scheme based on the colors in that image.

Step1: Upload your photo

adobe color cc 5
Source: color.adobe.com

Step2: Choose from 5 different color mood on the left side of the tool:

  • Colorful
  • Bright
  • Muted
  • Deep
  • Dark

Click on the various color moods and see which color scheme you prefer.

adobe color cc 6
Source: color.adobe.com

Step3: Fine tune your color scheme by moving the color selector around the photo.

how to use adobe color cc
Source: color.adobe.com

Step4: Copy your color scheme codes at the bottom of the tool.  These are the color codes for the color you can use for your overall web design.

Click on the color wheel icon to see the color codes of your color scheme.

Website builders such as WordPress, Wix, Squarespace, Weebly, etc, all give you the option to insert HEX color codes to style certain parts of the website.  You can see our website builder comparison chart here.

adobe color cc 8
Source: color.adobe.com
adobe color cc 4
Source: color.adobe.com

How to use your accent colors on your website

Now that you have your complementary accent colors, you can use them to highlight secondary information on your webpages.

These are content / items that are not the main focal points of your page, but you still want them to stand out.

For example, they may be the subtitle, secondary buttons, information boxes, background color, etc.

Try to limit to only 1 or 2 accent colors. If there are too many accent colors, they will create too many focal points that may confuse your visitors.

where to use accent color on your website
Source: Wix.com

#3 Choose your website background color

How to choose website background colorHave you ever painted a house before?

If you have, then you will probably have some experience with picking a wall color – and you will know that choosing the right wall color can be a challenge.

You want the wall color to make the room to feel comfortable. The color should be soothing enough that you can spend hours in the room without having the color overwhelm you.

At the same time, you don’t want the color to be so boring that the room feels completely sterile.

Choosing a background color is actually a lot like choosing a wall paint color!

You want your website visitors to feel comfortable browsing your website. You don’t want to annoy your visitors or make it challenging to absorb your content by using overly bold or bright background colors. At the same time, you don’t want your website to be so blasé that your audience’s eyes just glazed over any important things you want to say.

How to choose the right background color?

If you were to pick wall colors for a trendy retail store and a summer cottage, would you pick the same colors for them?

Probably not because each space serves a different purpose, so the color you choose should be different.

For example, in a retail clothing store, you might want to use bold colors to draw shoppers to the racks of clothes. You want the wall color to contrast with the merchandise shelves so shoppers can instantly know where to look when they enter the store.

In contrast, you probably want to feel more relaxed in a cottage vacation house. You want your wall color and decor to have a soothing and relaxing effect. You want everything to blend in so you can focus on the breathtaking landscape view from the over-sized window.

In a very similar way, the background color of your website depends on what you want your visitors to focus on.

Simply put, the color you choose as your background color completely depends on the purpose of your website.


Type #1 – Content Intensive Information Websites & eCommerce Websites

Have you ever noticed that most information websites or ecommerce websites usually use white or a neutral background color?

eCommerce Website
eCommerce Website (drinksoma.com)

eCommerce Website
eCommerce Website (stikwood.com)

Food Blog
Food Blog (pinchofyum.com)

Film Production Company
Film Production Company (dingobill.com)

This is because the purpose of these types of websites is to promote ideas or products.

The focus is on the content or products, rather than the design of the website.  The background color is only a backdrop to help make the content more visible and readable.

The best color scheme to use for information intensive and ecommerce websites is a white or light background, with bold dominant & accent colors. The bold dominant and accent colors give the website personality and focal points, while the plain background color keeps your visitors’ focus on your content or products.


Type #2 – Corporate / Business Websites

Corporate / business websites usually have two purposes — Promoting the brand or its services.

Depending on which purpose your business website wants to focus on, your background color will be different.

Promoting a Brand

When you want to build a strong brand identity, you should use various shades of your dominant or brand color as your background color.

This is because color is closely tied to brand recognition (remember our example of Coca Cola above?) When you use a variation of your dominant/brand color as your background, you are reinforcing your brand and makes it more memorable to your audience.

If you have a very bold brand color, using it as your background color can be too overwhelming. If that was the case, consider choosing a less intense shade of your brand color instead. Use Adobe Color CC tool to generate different shade and brightness of your dominant color.

how to choose website background color corporate website branding
justactions.org

how to choose website background color business website branding
sbjdanebury.com

Promoting a Service

If you want the value of your service or your portfolio of past projects to be the focal point, use white or a neutral background color.

Just like content intensive and ecommerce websites, you don’t want your background color to take the focus away from your content or the message you want to communicate.

By choosing a neutral or white background, your content will naturally become more attention grabbing.

how to choose website background color business service
zengenti.com

how to choose website background color business service
charddevelopment.com


Type #3 – Stylish & Creative Websites that are Graphic Intensive

For websites used in fashion, design, restaurant, beauty and creative industries, the world is your oyster.

There are really no rules as to what background image or colors you should use. You can use a black menu bar to create more drama; Or you can use all the colors of the rainbow to create an inspirational background image.

how to choose website background color restuarant
theeddynyc.com

how to choose website background color creative
cafefrida.ca

how to choose website background color design
studiolovelock.com

how to choose website background color luxury
gillemore.com

Honestly, here you can break all the rules and use any color you like as long as you keep this 1 rule in mind — “Never choose a background that makes your text or content hard to read.

Your perfect background color is one that allows your content to be the focal point while working harmoniously with your dominant & accent colors, and makes your audience feel good while browsing your website.

When in doubt, use white or very light gray as your background color. While it might not be the most inspiring color, you know your content will always shine through.

 

Conclusion & Key Takeaways

Choosing the right color scheme for your website should never be based on your favorite color, or on a gut feeling.

A good website design is one that always put its audience first.

Choose color and design that appeals to your target audience, so you can make a memorable connection (subconsciously), and stand apart from your competition.

Picking color schemes should not be random at all. Instead, it should be a series of organized, objective, matching exercise:

(1) Matching your brand with the right dominant color; (2) matching the dominant color with accent colors using the Adobe tool; and finally (3) matching the background color with your dominant & accent colors.

By following our 3 matching steps above, you can create a good color combination for your website – even if you don’t have a good sense of design and color coordination!

Don’t be afraid of injecting some color into your website and have some fun with the process!  Just remember not to let your color overpower your content!

Other Guides:



Found This Guide Helpful?

Question – Did this guide benefit you? Leave a comment below. 

Do you know anyone who can benefit from this guide? Send them this page or click on the share buttons on the left.

You’ll be helping us out by spreading the word about our website, and you’ll be helping them out!



Website Builder Expert aims to provide you with honest data. That’s why we conduct our own research and obtain direct, personal insight. Click here for further information.

Claim your free guide & exclusive deals

Top 8 (free or dirt cheap) tools I use to build great websites, plus hand picked deals with top builders and regular newsletters!

Insert your email

100% privacy, we will never spam you! Unsubscribe at any time.

About Connie

Connie

Designing and creating your website (especially your first one) is not a simple task. If you're a designer like me, then you're already way ahead of the game. But what if you're one of the 99% of business owners who are not technical or creative? I want to share my website design expertise with you to help you build a professional looking website to grow your business.

116 comments

Your email address will not be published. Required fields are marked *

  • Avatar
    angel
    Amazing content. Really amazing. Thanks. Helps a lot.
    1 reply
    • Lucy Carney
      Lucy Carney
      Hi Angel, Thanks so much for your comment! So glad it helped, Best, Lucy
  • Avatar
    Laurent
    Very great guide, thank you.
  • Avatar
    Harsh Chopra
    Very Interesting and informative article. What fee do you charge fro consultations?
    1 reply
    • Lucy Carney
      Lucy Carney
      Hello, So glad you found the article useful! Unfortunately we don't offer consultations - hopefully our articles and reviews can be of help, but if you want a personalized consultation you'll need to look elsewhere. Do let us know how you get on with your project though! All the best, Lucy
  • Avatar
    opy
    Very informative for newbies designer like me. thanks a lot
    1 reply
    • Hannah Whitfield
      Hannah Whitfield
      Hi Opy, Thanks for your comment, and good luck with your designs! All the best, Hannah
  • Avatar
    Jeffery Clanton
    I'm really surprised at the information in this article. I came in with zero knowledge and feeling very unsure. Now I'm walking away with notes and a great bit of confidence in how to approach choosing colors for websites. Thank you and great job!
    1 reply
    • Charlie Carmichael
      Charlie Carmichael
      Hi Jeffery, Thanks for your comment. We're happy to hear you found the article so useful. Best of luck! Charlie
  • Avatar
    Nas
    Hi Very impressed with article . Any colour recommendations for an interiors ( curtains and blinds ) business . Thanks
    1 reply
    • Charlie Carmichael
      Charlie Carmichael
      Hi Nas, Thanks for your comment. We'd recommend light colors such as pale blue as it gives customers a sense of calmness and simplicity. Hope that helps! Charlie
  • Avatar
    Deborah Ann Davis
    Excellent info! Thanks!
  • Avatar
    Arusyak Karapetyan
    Very useful!!! Thank you!
    1 reply
    • Charlie Carmichael
      Charlie Carmichael
      Hi Arusyak, Thanks for your comment, we're glad you found it useful. Feel free to share the article on your social media - you never know who else it may help! Charlie
  • Avatar
    Naman Modi
    Nice post. I was checking constantly this blog and I am impressed! Very useful information particularly the last part I care for such info much. I was seeking this particular information for a long time.
    1 reply
    • Charlie Carmichael
      Charlie Carmichael
      Hi Naman, Thanks for the feedback. We're glad you found what you were looking for! Feel free to share this article on your social media - you never know who else it may help. Charlie
  • Avatar
    Andy
    Highly impressed with the way you explain each and every thing in detail many of my concepts are clear after reading your awesome guide Very informative.
    1 reply
    • Dan Barraclough
      Dan Barraclough
      Hi Andy, Thanks for the positive feedback - feel free to share our articles on social media! Best, Dan