How to Choose a Good Color Scheme For Your Website

Last updated on January 15, 2019

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
Top Choice

4.7 out of 5

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.1 out 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.3 out 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


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


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


#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)

#1 Using your pre-selected dominant color to build your color scheme

Use your dominant color to create a color scheme

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

Once you have the color code from, 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


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


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


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


#2 Using a photo as inspiration to build your color scheme

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


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


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

how to use adobe color cc


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


adobe color cc 4


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


#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 (

eCommerce Website

eCommerce Website (

Food Blog

Food Blog (

Film Production Company

Film Production Company (

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

how to choose website background color business website branding

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

how to choose website background color business service

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

how to choose website background color creative

how to choose website background color design

how to choose website background color luxury

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.



About 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.



About 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.

Leave a Reply

111 Responses to How to Choose a Good Color Scheme For Your Website

  1. #


    Very impressed with article .
    Any colour recommendations for an interiors ( curtains and blinds ) business .


    • 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!


  2. #

    Excellent info! Thanks!

  3. #

    Very useful!!! Thank you!

    • 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!


  4. #

    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.

    • 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.


  5. #

    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.

    • Dan Barraclough

      Hi Andy,

      Thanks for the positive feedback – feel free to share our articles on social media!


  6. #

    Thanks! Very helpful

  7. #

    one of the most awesome complete simple articles I had ever read about a topic.

  8. #

    I must have read 30 articles about website colours and this has been the most helpful. Thank you so much!

  9. #

    Fantastic article. Enjoyable & very useful read. Just as perfect as a beautifully matching color theme.

    • Charlie Carmichael

      Hi Seng,

      Thanks for your flattering comment. We’d love it if you shared the article across your social media – the more people we can help the better!


  10. #

    Thank you for brevity of presentation!

  11. #

    Choosing the right color for your website is really a big deal and only a expert web designer can make the right decision because it should create nice look and feel for the customers to browse throughout our website. Recently I went through Dezvolta’s website and I was inspired by the colors they have used to design their website.

  12. #

    Great article!

  13. #

    Very helpful, thank you!

  14. #

    Thank you for your articles. I find them useful and with lots of interesting facts.
    HOWEVER I am a bit disappointed by your bias towards only online web-builders.
    As your appealing to the whole spectrum of website designers I would have expected (hope for) a bit more attention for the very good “not-online” (and much more flexible) web design programs.(Magix-Xara, Wesite X5 Pro etc.)

    Unfortunately it creates the impression of commercial interest in promoting online websbuilders, especially Wix.
    Actually I have a WIX subscription, but prefer to use Webste X5 for its flexibilty and pro templates. Plus that am not dependent on online providers. The final product is mine forever.

    • Charlie Carmichael

      Hi Jacques,

      Thanks for adding to the conversation. We’re yet to branch out into the field of offline web design programs as they limit the work you can do on your website to just one computer and tend to be more complex to use, which doesn’t suit non-tech savvy folk. It’s definitely an area we may explore in the future though and you make some great points about their flexibility.



  15. #

    Owe My … Speechless .. This is an unbelievable article ! Clear, condensed and chock full of information. Thank you so much!!

    • Fred Isaac

      Thanks Alan, glad we could help!

  16. #

    Thank you for.that very educational article.It was a toss-up on a few colour combinations for my educational website

    I ended up using a heart as the icon, and the little bit.of pink/red in the heart In used for all my headings. The rest in green with white letters. The black cyan royal blue combo discussed on a few websites related to colour was tempting, as I am targeting a high end market for educational services.

  17. #

    Thanks! I am ready to refresh my long-standing (re out-of-date) site. Thanks for getting me warmed up to make the changes!

  18. #

    This was great help! Thank you!

    • Fred Isaac

      Great stuff Kaavya, thank you for the comment.

  19. #

    Thank you for such a helpful articular, much appreciated.

    • Fred Isaac

      No problem Danish, glad you found it useful!

  20. #

    you came to the rescue!!! i guess the Law of attraction really did it again 🙂
    thank you!

    i was just thinking about hiring somebody to fix my website and a new logo ( still thinking about that logo part).

    but with these tips i think i can manage for now.

    • Natasha Willett

      Hi Mozes,
      Glad we could help.

      • #

        You’ve no idea how much you helped. Grateful to you!!

  21. #

    HI guys,

    i want to offer 7×12 Open Training space for only 99 members in my gym. Functional Training without any Machines (no global gym style) in im not sure which kind of colors I want to use for my webpage.

    any suggestions ?

  22. #

    Thank you for such a helpful articular, much appreciated. I would like to do a website for my bed and breakfast in the Caribbean I am not on the sea. What colours do you suggest swaying toward blues? Thank you

    • Natasha Willett

      Hi Frances,
      Thank you for your comment, while colour schemes are really important, I’d personally look at how it works with your branding. Blue for your location sounds like the perfect choice – maybe complementing it with a dark yellow?
      Good Luck,

  23. #

    This was a ton of great information! Just the simple main and accent color help was huge for me! Thank you!

    • Fred Isaac

      Hi Shelley,

      Glad you found the content useful – good luck with your website!

  24. #

    great article and quite the Aha! moment for me. I am however undecided if I totally agree on never using one’s gut feeling in choosing a colour. I think several of the times when I have been undecided between several colour schemes my gut feeling has always been the tiebreaker. I even think guts are indispensable to any creative work, besides, in the end, its all about the emotions and feelings that we want to arouse in the end user.
    Ps: am fairly new to this web design business so am willing to accept any rhetoric that argues against my disposition.

    • Fred Isaac

      Hi Peter,

      You should certainly go with a color scheme you’re happy with, but also think about what color suits your website and the type of person that will be visiting it.

      Hope you’re happy with your choice!


  25. #

    awsome article. and i’ve got a question. i wanna make a music website. what color do you recommend me to select?

    • Fred Isaac

      Hi Sarah,

      Thanks for the comment!

      I would suggest this largely depends on the type of music you are promoting on your website. A good move would be to find some examples of music sites you like and try to emulate them.

      Hope this helps!


  26. #

    Great article to know about what color will be perfect for websites.

  27. #

    this information is of great help to me!!!, Could you give some tips about to build a money website?, I mean, the one I want to have is for bitcoin and usd earnings through PTC, mining, tasks etc, What color and style should this have?

    • Tom Watts

      Hi Karina,

      As far as I’m aware there isn’t a color scheme specifically for a ‘money website’.

      The first thing to consider is: what colors are your logo? These should form the basis of your palette. Even better if they are primary colors as red,yellow, and blue encourage people to make purchases.

      Otherwise, if your website will be encouraging people to sign up and perform tasks like blockchain mining, you’ll want to think about the colors that encourage people to take action.

      Red, Orange, Black, and Royal Blue encourage impulsive clicking and purchases. Navy blue and Teal are better for people on a budget.

      Likewise think about what attitude you want your website to have? Should it appear urgent and energetic? Or perhaps calmer and more collected?

      You can read more about all of this in the graphics towards the top of the guide.

      Hope that helps,
      – Tom

  28. #

    all i need to start in single page…..thanks

  29. #

    Thank you, very usefull article

    • Tom Watts

      Hi Kukan,

      Glad to know you found the discussion helpful!

      Feel free to share on your social channels if you think others might benefit too – it’s a nice way to pay it forward.

      Thanks for reading,
      – Tom

  30. #

    Hi there!

    You hit me, right! I will not based the website’s color with my favorite color. haha

    I keep on exploring colors and themes because my readers are mostly teens, though. It surprises me.

    Thank you for the insights.

    • Tom Watts

      Hello Lisa,

      Glad to hear you found the discussion useful.

      Best of luck with your website building + thanks for reading,

      – Tom

  31. #

    Thank you
    It was quite clear guide to choose color.

    • Tom Watts

      Hello Mehdi,

      Good to know you found Connie’s advice helpful!

      Feel free to share if you like – you never know who else might benefit!

      Thanks for reading
      – Tom

  32. #

    Thank you so much! This color guide was very helpful.

    • Tom Watts

      Thanks for reading Sara, good to know you found Connie’s advice helpful!

      – Tom

  33. #

    I am doing some research on choosing website colors. This article was very informative. It was well layed out and provided helpful examples and links. Thanks!

    • Tom Watts

      Hi Barb,

      Great to know the discussion proved helpful to you!

      Feel free to share on social media if you think others might benefit too! 🙂

      Thanks for reading
      – Tom

  34. #

    Wonderful wonderful article. Straight to the point and was just what I needed for the job

    Thanks man. Great article

    • Tom Watts

      Hey Sigala,

      Thanks for your kind feedback.

      Feel free to share this discussion on social media if you think others could benefit too – we really appreciate you helping to spread the word!

      Thanks for reading,
      – Tom

  35. #

    Thank you, Connie. I found this to be very helpful, an eye opener. I do have two questions:

    1. I could not keep the dominant color stable on the Adobe CC page. There must be a trick…

    2. More important: I am at the stage of choosing a theme for my website. It will be a personal website with a travel section, a poetry section and an opinion blog. At the moment my main concern is the travel section. When writing it in Word, I played around with various background colors for each page (post), sometimes using white or yellow letters whenI chose a dark background like dark blue or purple. My photos came out nice against this background.
    So, how does the “theme” affect this? What requirements do I need from the “theme”? I looked at a theme called “simple blog” and my friend told me the colors are not right – too white. Can I put whichever color scheme I want on any theme, or do the themses dictate the color scheme and I should choose the appropriate theme accordingly?
    Also, since I’m going to have three different entry buttons for my site, I want to have the freedom to design each differnetly. For the poetry , for example, I’d like to have a frame (you know, classical with floristic design etc. black and white) around each poem, but I do not know which themes allow for that kind of background designing.

    Thank you very much for this very informational article. I found it enlightening. And thanks for your time.


    • Tom Watts

      Hi Orit,

      I haven’t heard of the dominant color proving unstable before? You usually select the central color (your dominant shade) and it should stay static while you teak the shades either side of it.

      It might be worth trying a different browser so see if that improves the pages performance as older browsers may struggle to handle the dynamic on-page content. If this doesn’t work, I would advise contacting Adobe to see if they can help rectify the problem.

      The ‘theme’ of your website is essentially the color-palette and having one can be handy in unifying color-schemes with complimentary shades. Bear in mind though that it also comes down to what you like and how you want your website to look.

      Try not to treat a theme as something that is set in stone, but rather a guiding hand. If you think you have the right shades for your site and they look good together then use those shades. If you try and design a theme that will please every one of your users then you will struggle as you can never please everybody.

      Also I would say that I disagree with your friend that a theme can be ‘too white’ – some of my favorite sites use only black and white as colors, the sparseness can be very clean and easy to navigate. After all there’s a reason why most websites have a white background!

      Long story short, use the colors and design that most appeal to you. Take into account the color personalities in the discussion above, see which ones compliment the aim of your site and go from there.

      I hope that helps,

  36. #

    This article was very interesting. I am currently in the process of redesigning our website template, and changing the color scheme is something that desperately needs to be done. My manager is always telling me that most of our shoppers are middle aged women, but our logo is ORANGE!! I, personally, hate orange (I am a young woman but my sister’s favorite color is orange, so who knows =P). I saw that orange was in the “women’s hated colors” group. How am I supposed to build a complementary color scheme for a target market where my color is at a disadvantage?

    I have been trying a few things (our current website is a light blue color, which isn’t bad, it just clashes with the logo…), and I really like either the yellow/orange as my dominant color and dark gray/blue as my secondary color, or medium blue as my primary, and dark (a bit unsaturated) orange as my secondary. But it’s still orange. And it still looks odd to me. Am I just stuck trying to make a bad color look good? Or is there something I can do?

    • Tom Watts

      Hi Haley,

      From my point of view I wouldn’t say you’re fighting a loosing battle – orange has lots of great qualities. The above research should be a taken as a rule of thumb rather than gospel. Orange, while looked upon less favorably by certain demographics, is still a powerful color for accents and buttons, or any site looking to promote a friendly and enthusiastic personality.

      It’s funny that the blue and orange are clashing for you as they are one of the most potent color combinations going. They are immensely popular as complimentary colors not just on websites but in movies too – you won’t be able to stop spotting blue + orange together onscreen now, sorry!

      From the sounds of it, you’ve got a decent mix of colors, but it could be worth trying a slightly different shade of orange if possible? A lighter orange is usually more palatable than a darker one.

      Also, don’t forget to make the most of your white space too – there’s no reason why you can’t have a white background with accents of color on links/buttons/etc to make them stand out a bit?

      Hope that helps,
      – Tom

  37. #

    Great article – thanks

    One question though – for my secondary color’s that will be used for secondary information, do I pick a color that is on the lighter side or darker side of my primary color. e.g. if I have a blue as primary the Adobe tool shows a darker blue to the left and a lighter to the right.

    Which one do I use for secondary elements?

    • Tom Watts

      Hey Ferdi,

      Glad to hear you found the discussion useful!

      The great thing about color schemes is that it comes down to your personal preference! The Adobe tool gives you an idea but it really comes down to which colors you prefer – does the light blue or darker blue work better with your primary color?

      If your primary color is a darker shade of blue then I’d personally opt for a lighter blue to highlight secondary elements, or if my primary color was lighter than a darker blue will stand out more.

      Hope that helps,
      – Tom

  38. #

    I didn’t see brown. Why not?

    • Tom Watts

      Hey Shaye,

      We’ve actually got brown in one of the charts above – unfortunately though, it is just one of those colors that isn’t too attractive to look at on a screen!

      – Tom

  39. #

    Great article, Connie! Our team loves the infographic showing which colors men and women are typically attracted to – super helpful! Nice Branding Agency wrote a similar article about choosing the right colors for your brand:

  40. #

    That was very awesome post

  41. #

    This is great! I really needed this!

  42. #

    Now my headache is gone. Trying to design a website for my old man’s company, i have been weighed down all along not by the technicalities but the option of color to pick. I have decided the dominant color should be blue (facebook blue) all along but cant just decide on the other color to add. and how to even use the colors. Am much better with colors now

    • Jeremy

      Thanks! Glad this guide is helpful to you!

  43. #

    Thanks for sharing such information i really like your all WARM color combinations that all are excellent really good stuff for junior website designers and illustrator designers.

  44. #

    Thank you so much for such valuable information that you are sharing with us here. This page simply is like an eye opener. At start i thought , it just combination of mine or clients favourite colours but this is all new science. Every shade to choose for any part of the website must have a purpose to serve that website message. I don’t reply that much on pages ,but here could not resist myself to thank you for your efforts and generosity.

    • Jeremy

      Hi Aniket,

      Thanks for taking the time to comment. We really appreciate it! We’re really happy to hear that you found this guide helpful.


  45. #

    Nice tips!.

    • Jeremy

      Thanks, Clement. Glad you found this guide helpful!


  46. #

    Excellent information. Thank you. Wishing you a great time ahead.

  47. #

    Jeremy, I’m learning so much needed info to make plan to create my website to market my NFiction book! I’d told you in a recent email that I wasn’t sure if it’d be fair to share your info beyond one of the free writing groups I participate in.

    But after just spending more than an hour absorbing info here which you so kindly sent me in an email on Dec 8th, I’m going to share you with my regular FB family. I wish I had the funds to hire you, but I’ve been benched since March 2015 due to copper poisoning and not yet back to work. I’m educating myself to build a website so I can work from home.

    I’m so very grateful for you and so many others willing to present info for those of us struggling to succeed online when lacking tech skills and capital to invest!

    Thanks again!
    Terri Pata

    • Jeremy

      Hey Terri,

      Thank you so much for your comment. I did read your email the other day and I appreciate that you shared our guides with your friends and family! Thank you so much!

      I hope you get well sooner.


  48. #

    Hi Connie Wong,

    This Blog is really very informative and glad to read this.

    • Jeremy

      Thank you, Apeksha. I’ll be sure to pass on your kind message to Connie!


  49. #

    This was really helpful and well-written, thank you! As a web designer I like this methodical (and repeatable) approach. Staring at the infinite color wheel in Photoshop can be totally overwhelming! By doing a bit of writing first and using these steps, my color choices will be easier to make and more effective. Yeyyy!

    • Jeremy

      Hi Rachel,

      Thanks for your comment and feedback. So glad to hear that you are also finding this guide helpful!


  50. #

    such such a good and useful

  51. #

    Upto to know i was wondering how to select colors but after reading this post i have clear idea now what to do and what to not thanks for such a good article 🙂

    • Jeremy

      You’re very welcome, Atif! Glad you found our guide valuable.


  52. #

    Thanks for the article. Simple and focused

    • Jeremy

      Thanks for your feedback! Glad this guide is helpful to you.


  53. #

    AWESOME. very informative and interesting. Thanks for not only telling your audience what is right and not right, but showing the tools and how to use those tools. Makes the whole idea come full circle and makes it a win – win for the the writer and the reader. Cheers.

    • Jeremy

      Thanks for your compliment, Rocky! Glad you found our guide helpful.

      Please do share this guide by clicking on the social sharing buttons to the left.

      If you’re interested in other design guides, we have more here. Hopefully you’ll find them helpful too!


  54. #

    Thank you for allowing me to read this information, which has really helped a lot.
    Thank yoy

    • Jeremy

      Hi Kathleen, thanks for your comment and thanks for letting us know that you found this guide helpful!

      We have a lot more design tutorials here, if you’re interested!


  55. #

    Thanks for the advice! I’d been messing around with my website for hours trying to find a color scheme that worked, but nothing seemed quite right. Using your tips, though, I’ve finally found a few schemes that look great! (I don’t usually leave comments on websites, but I just had to tell you what a life-saver you are! I was afraid I’d never get my site to look presentable.)

    • Jeremy

      Hi Sarah,

      Thanks so much for your comment, and letting us know that our guide was helpful to you!

      Do share our resources with others by clicking on the social sharing buttons to the left side of the guide! I’d really appreciate it!


  56. #

    Really Helpful and very good initiative you have to taken to explain about choosing color for website.

    • Jeremy

      Thanks so much, Dattatray!


  57. #

    I’ve been struggling with color combos since I wasn’t really born a designer. This article helped me a lot. Thanks. 😀 I hope you could also post an article with a topic “how to choose fonts for your website”.

  58. #

    Pretty powerful post. Thanks for putting in such detail.

    • Jeremy

      Thanks, Matt. Glad you found it helpful!


  59. #

    Thank you Jeremy for a complete and illustrative information. I would like to suggest for playing with colors for website.

    • Jeremy

      Thanks for sharing this additional resource Jessica.


  60. #

    AMAZING! What more can be expected in a single article.

    • Jeremy

      Thanks, Manish! Hopefully this discussion helps you with your website!


  61. #

    Excellent article, and an especially well-researched, clearly explained tutorial on the basics of color theory. One little tip I’d add is that you can probably find an old-fashioned color wheel tool at your local crafts store detailing the primary colors, secondary colors, complementary colors etc.

    • Jeremy

      Good tip, Rishad! I totally remember those color wheels!


  62. #

    Hi Jeremy,

    I love your article, especially the part of primary and secondary colors with a website sample.

    So people can understand where to place the colors.

    I’ve just recolor my website to give a branding image. I’ve written down my process in simple steps how I found the primary color and how I implemented the color scheme.

    I will hang around to learn from you, your articles are so easy to read.

    • Jeremy

      Thanks Rudy. Glad you were able to take action to update your color scheme!


  63. #

    Connie and Jeremy,

    This website and all the information is absolutely incredible. I have been pondering the idea of creating a website for a very long time now but the lack of confidence and so much mixed information out there did not help my confidence………that is ’till now.
    I stumbled across your website this morning and I must say that it has renewed not only my confidence but also my enthusiasm to build a website and start my own business. With all the comprehensive but easy to understand information, it is a god send for someone like me who has limited experience in setting up a website and the technology involved.
    Everything is here. All in one place. The only thing missing is that I didn’t find you sooner. Thank you, Thank you, Thank you!

    • Jeremy

      Thanks so much for your kind feedback, Virginia! Glad you are finding our discussions here helpful to you.


  64. #

    Omigosh, that was just the best thing ever. I was clueless about how to choose colors. What a brilliant tool and explanation of how to use it to get the best response from the site’s intended audience. I had good instincts in the colors I’d already begun with, but now I understand them more, and am way more confident in my choices, plus I have a few extra shades to go along with them, and a much clearer sense of where and how to use them on the site.

    Connie and Jeremy, this is just the best site ever for designing a web site from scratch!

    • Jeremy

      Thanks, Wendy.

      When we first started out 6 years ago, we never thought of color as “a thing” that can impact our messaging to our website visitors / potential customers. We just picked whatever we thought was nice!

      While that’s not entirely bad (since Connie has a pretty good eye for color and design, like you), we were really impressed when we started to understand the psychology behind color. Coke didn’t use red by accident – that sort of idea, you know?

      Using color to send the right message to people, or influence people’s decision making process, sounds a bit devious – but it’s not! It’s one of those things that can really help companies brand themselves!


      • #

        😎 Cool