This post may contain affiliate links which may give us a commission at no additional cost to you.
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.
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…
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.
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.
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.
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.
- What You Need to Know Before You Hire a Blog Designer
- How To Perfect Your About Me Page
- 5 Questions To Ask Your Blog Designer That Will Save You Time and Money
- 6 Blogging Skills You Can Put On Your Resume - Oct 4, 2018
- 5 Tasks Top Bloggers Do at the Beginning of Every Month - Sep 27, 2018
- 8 Simple Steps to Create Your First WordPress Blog Post - Apr 17, 2018
- 8 Secrets Every Food Blogger Needs To Know - Feb 9, 2018
- 9 Crucial Steps to Write a Killer Blog Post - Dec 27, 2017
- You Have A URL, Now What? Next Steps to Blogging Success - Aug 21, 2017
- How To Connect With Your Writing Tribe - May 31, 2017
- 3 Benefits Of Facebook Scheduling For Bloggers - Oct 7, 2016
- Creating Beautiful Website Color Combinations in Three Easy Steps - Aug 25, 2016
- 5 Tips for De-Stressing Your Blog Routine - Jul 6, 2016
- How to Run a Successful Blog Giveaway in 5 Easy Steps - Jun 14, 2016
- 10 Hacks For Your WordPress Blog - Jun 3, 2016
- How To Use Facebook Targeting On Your Page - Mar 18, 2016
- How to Ace Self-Care In Your Social Media Space - Jan 4, 2016
- 12 Delightful Design Ideas For Facebook Page Cover Photos - Dec 11, 2015