Blog Design

Creating Beautiful Website Color Combinations in Three Easy Steps

By Aug 25, 20163 Comments

This post may contain affiliate links which may give us a commission at no additional cost to you. As an Amazon Associate we earn from qualifying purchases.

When working with a new website design client, I am usually asked about two different design aspects immediately.

The first detail website clients concern themselves with is the font to be used when creating their website logo.

Once fonts are discussed, the next essential design component is the color combinations for their website. Many have, at the very leas,t an idea of color schemes they like, but some clients are completely clueless when it comes to color.

I like to start an open dialogue about colors with my clients.

First and foremost, I ask them to think in terms of popular and successful brands, such as Starbucks or Coca Cola.

Logos of Coca Cola and Starbucks

What do these two major companies’ logos have in common?

They use primary and dominant colors for their logos with Starbucks using green and Coca Cola using red.

These two very well known and memorable brands began with one color essential in mind — using dominant, primary colors in their logos.

But what does this have to do with website color combinations?

Find out now…

The colors of your website set the tone for your entire design. Learn how to create beautiful website color combinations with these steps (and a free tool)!

There are three basic steps for choosing beautiful website color combinations

1. Choose a dominant, primary color

The dominant color is pretty much your brand color, just as Coca Cola is a bright, fire engine red and Starbucks is forest green. If you have a dominant color in mind, awesome.

Primary Colors in rainbow

Originally found on Pixlr

If you don’t have a color in mind, use this list to help you find the right color based on what they symbolize:

  • Green – wealth, health, tranquility and nature. It is also probably the most relaxing color of the color wheel.
  • Yellow – youthfulness, happiness and even optimism. It can grab attention easily, but can also strain eyes if used too much.
  • Orange – friendly and creative. Thought of as the “take action color” and often used to attract impulse buying.
  • Red – passion, energy, excitement and possibly even danger. Most effective color for triggering strong emotions.
  • Pink – feminine, sweetness, innocence and even romance. Used mostly for woman and young girls in marketing.
  • Purple – wealth, royalty, success and even wisdom. Purple has traditionally had a soothing and calming effect.
  • Blue – trust, security, and even stability. Blue just happens to be the #1 color choice among both men and women.
  • Gray – neutral color used mostly for lack of emotion, technology, and logical reasons, as well.
  • Black – power, luxury and sophistication are at the core when black is used.

Where will you use dominant colors?

Once you have chosen your dominant color, you will ONLY want to use your dominant color in a limited number of places where you want your website readers to pay attention, or if you want them to perform certain actions, including menu headings, titles/headings, newsletter opt-ins, and call to action buttons.

Basically, your dominant color should POP to highlight where you want your readers to focus.

2. Choose 1 to 2 accent colors to compliment and create the right color scheme.

Not going to lie or sugar coat this, it can be pretty boring to have your website feature only one color.  So, this is why you want to choose 1 to no more than 2 accent colors for your website.

I know this can be an overwhelming chore if you aren’t sure. Thankfully, Adobe, the creators of Photoshop, Illustrator and more have a FREE Color Matching Tool you can use to help with this online.

Adobe Free Color Matching Tool

To take a look at it, click HERE. It is very simple to use and the middle selector is where you would choose your dominant color using a HEX color code, which most website builders, such as WordPress, Wix, Blogger and more use. Once the dominant color is filled in, the color matching tool will pick other colors in the corresponding boxes to help find colors that will work with the dominant color of your choice.

Where will you use accent colors?

Accent colors can be used for hover links, subtitles and/or secondary information on your website.

3. Choose a background color to finalize and complete your design.

When in doubt, I am a big believer in neutral or white for the backgrounds to keep a website clean and easy to read. This also helps to make your main content attention-grabbing.

However, there are a few times when you can get away with veering away from a more neutral background, such as trying to build a strong brand identity or for stylish or creative websites, such as fashion or design, where you would want a bit more flare or drama.

In these cases, you can most certainly refer back to the FREE Adobe Color Matching tool to find variations of your dominant color or even complimentary colors.

In Conclusion…

When picking a color scheme for your website, you need to not only take into account your own preferences, but also your potential readers, as well.

Picking a color scheme shouldn’t be done quickly or on a whim, but should be deliberated on by utilizing my three rules. Now go forth and have some fun color coordinating your website!  

If you need any further website color scheme assistance, please feel free to reach out to me.

Keep Reading

About Janine Huldie

Janine is a published author of the books, The Mother of All Meltdowns and Only Trollops Shave Above the Knee. She has been featured on The Huffington Post, Mamapedia, Today Parenting Team and SheKnows. She also writes at Confessions of A Mommyaholic, as well as running her own graphic design company at J9 Designs. She's busy with two beautiful, zany, energetic daughters and a husband, but still trying (key word) to keep it all in perspective by attempting to make the days and nights a little bit brighter. Find Janine, also, on Facebook, Twitter, Instagram, and Pinterest.