Remember back in your early school days, when having a 64-count box of crayons to choose from was the ultimate in creative freedom?
Today choosing even just two or three colors to use for your website can seem like a daunting task…
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.
Colors work on a subconscious level and make us feel a certain way, that’s why this is an important step. We all relate to colors in different ways. For example, I would never use a strong red for my brand or on my website because I just don’t like how that color makes me feel.
Here’s an example:
How do you feel when you look at this website?
And when you look at this website?
Both websites convey very different feelings and emotions. The effect the colors on Elena Brower’s website have you could describe as calming, serene, peaceful. Rachel Brathen’s website uses colors that are more positive, happy and remind you of a Caribbean holiday (which I guess is the idea behind it with her living in Aruba).
You need to be clear about what feelings you want your website visitors to have first. This can then guide your choice of colors and images.
If you want your brand to convey calmness, you could use a color palette with lots of whites, greys, and soft colors.
On the other hand, if you want your brand to appear contemporary and high-energy, you might use more vivid and trendy colors.
That’s why it’s so important to find clarity about your brand’s tone of voice, it affects your whole way of communicating, verbally and visually.
So how do you choose the right colors for your website?
1. Choose the right dominant color for your website and brand
You should only use your dominant color in a limited number of places where you want your website visitors to pay attention to or take certain actions (such as a button to sign up for a newsletter). Basically, your dominant color is supposed to “pop” – really highlighting where you want your visitors to focus on.
2. Combine complementary colors to create your perfect color scheme
It’s 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. These are items that are not the main focal points of your page, but you still want them to stand out.
3. Choose a background color that works for you
Today a lot of websites use white as the main background color. Here the background is only a backdrop to help make the content more visible and readable.
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.
To show you what I mean let’s look at this example. Here are the colors I use for the yoga website template I created for my course Build Your Yoga Website:
The purple is my main color that’s used for all accents and buttons.
The pink I use as a hover effect for my buttons, to make them pop out. I would also use this color for social media images.
The grey I use for elements like the copyright bar.
The dark grey I use for my fonts. When choosing a font color make sure it’s a dark color that will stand out against your background.
For the main background color, I choose a very light beige. I also use a lot of white to keep the design modern.
Finally, I added a beige that’s a bit darker, I use this for variety in the background and to separate elements.
How to find colors you like
A great starting point to get inspired is Pinterest. Here you can search for example for ‘website color palette’ or ‘style guides’.
Btw, check out my Pinterest account for more marketing tips and advice!
A cool tool to play around with is color palette from canva.com. Here you can upload an image with colors you like and it will create a color palette for you with the colors from the image.
I also love the color wheel from Adobe to find complementary colors and beautiful shades.
Pick colors that reflect your brand, but that are also complementary to each other and contrast well.
Finally, create a document where you save your colors and the hex codes. For example, a Powerpoint slide or a note in Evernote, whatever works for you.
No idea what a hex code is? No need to get all techy here, the only thing you need to know is that it’s a combination of numbers and characters and it’s a way of specifying color. You’ll need the hex codes when designing your website or creating images on Canva (*affiliate link).
If you see a color you like on a website, you can pick the hex code for this color with the nifty ColorZilla Chrome Extension.
I suggest coming up with three or four different color schemes and compare each one side-by-side.
Ask your friends and family, or even better some of your students, what they think to get a sense of what works and what doesn’t.
Then narrow it down until you find the color scheme that fits your brand to a T.