Selecting Your Website Colour Palette

The three colour wheel examples, Primary, Secondary and Tertiary
Basic Colour Wheel

~May 2018~ 

Ever wondered about your website colour?

You might ask, "What does that mean?"

Well, let's dive into it a little more in the following article.

Colour Theory

For those who had any form of art in school, you should remember how a colour wheel works, but I think I'll just spend a moment going over the basics.

Hopefully by the end of this article, we will all have a better understanding of colour and how we can use it effectively.

 

More indepth colour wheel

When it comes to selecting a colour palette (and the images) for your site, you should take a look at other example websites for reference.

Take a look at how they present their product or service. (Is it easy to find what you're looking for on their site?)

This little exercise will help you when the time comes to create (or possibly pay someone else to create) your  website.

Be sure to look at what colours they are using. Also what kind of images?

What are they trying to get you to focus on? Their product? Their blog? A paid advert?

To have a successful website, you have to think about your customer.

Put yourself in their shoes and think about what they would want, not what YOU think they want.

Alright, onto the rest of the info...

The Three Colour Wheel Examples

Primary colours in fruit

 Primary Colors:

Red, Yellow and Blue
In traditional color theory (used in paint and pigments), primary colors are the 3 pigment colors that cannot be mixed or formed by any combination of other colors. All other colors are derived from these 3 hues. 

Secondary colours in flowers

Secondary Colors:

Green, Orange and Purple
These are the colors formed by mixing the primary colors.

Tertiary colours in cake

Tertiary Colors: 

Yellow-Orange, Red-Orange, Red-Purple, Blue-Purple, Blue-Green & Yellow-Green
These are the colors formed by mixing a primary and a secondary color. That's why the hue is a two word name, such as blue-green, red-violet, and yellow-orange.

 

Gentlemen's black oxfords

Making A Case For Black and White

White and Black are key players in colour. 

Their drastic contrast can help draw the viewers attention to a specific item (if the item is in colour) or it can help to create a sophisticated 'mood' in the image.

Black and White are seen as power colours when grouped with Red, this is why you find them in many company logos/colours and why many company ceo's will wear a black suit, white shirt and red tie, it conveys power and leadership.

This is just one of the examples how colour has a subconscious effect on others. This is why you should take the time to select your colours for your business.

 

Black oxford's

Hidden Meanings

If you look at this image you can see that it is clean, crisp and beautifully presented.

Maybe what you didn't notice at first was how this image subtly shows off the Italian Flag, the Green, White and Red.

Clever, right?

Something you and your website visitor wouldn't notice but say you were a proud Italian with a food blog, wouldn't this be a perfect subtle image to use?

The use of colour in a creative way will inspire and entice the people you are trying to attract to your website.

Spice in white spoons

Let's focus on colour... in your photos, your logo and illustrations

Blue tea and blue tablecloth on white marble

One Love, One Colour

I find it's always good to start off with selecting one colour.

This will be the main colour that is used in all your artwork/logo designs and be ever present in your content on your website.

Continuity is important when creating a professional website.

A website template says a lot about the author/owner, it will set the tone and will either encourage or discourage someone from working with you.

Now every website does NOT need to have all the colours of the rainbow, but when you start thinking about selecting a website colour palette for your own website,

you should focus on ONE main colour and/if you want to add more, they should be compatible with your main colour.

bamboo

Two-gether

Red and Black - Power Colours aka Corporate Colours, White and Navy Blue - Softer but linked to the Nautical Theme,

Pastel Pink and Baby Blue - Cute and Childlike - Perfect for a baby's room.

These examples help to show how two colours brought together can create a certain 'image' for your company/brand. 

Just like White and Black, even though they are complete opposites, brought together they create a striking effect.

If you are wanting to have more than one colour, why not consult others (friends or family) to see which colour they believe complements your main colour.

Tea and a magazine

The Trifecta

As you can see in the image above, there are three distinct colours in the image... Warm Brown, Teal Blue and Rose Pink

These three help to create a very soft and warm feeling in the image... it makes you think of a lazy afternoon at home... you're sitting on your couch and reading your favourite book with a nice cup of tea (or coffee if you prefer). Isn't it a lovely scene? This little 'story' that you see in the above image is what your customer will see and feel when they look at it. This is why selecting the right image with the right colours is so important.

Selecting complimentary colours like this can take a little skill but what I think helps, is to find an image (like the one above) and try to isolate the colours like I have done in this image. This is a great exercise for you because when it comes to selecting images for your own website, you will be able to pick the image based on your colour preferences for your website.

 

Pastel heart sweets

Pastel Love

Pastel colours come in many variations, Pink, Purple, Green, Blue, Yellow and a few other shades in between...

Even though you are using many different colours, they all work together because of the 'pale' tint of each individual colour.

Pastels are closely associated with all things cute and feminine, which makes them a perfect selection for a kids clothing brand, Bakery brand or a jewelry store that's main items have soft colours and beads like pearls and light coloured resin jewels.

Selecting softer colours in the Pastel range will give your website and brand a more feminine look, if that is what you are wanting. If not, then it would be best to pair one of the pastel colours with a bolder shade of the same colour or another bold colour (Eg. Baby Pink with Lime Green or Lavender Purple with Brown or Black)

 

Pastel pink building
colour swatches
Pink and Blue smoke

What to take away from this article:

 - Think about your company, what is it's main service/ product topic? (Homemade Gift Cards, Homemade Cupcakes, Online Jewelry store,etc)

 - What colours would best suit your company?

 - Research other websites to see what colours they have chosen. Are there any specific colours that you find used over and over? Eg, Pink, Blue and White or Lavender, Mint and Off White, etc)

 - Decide which colours you think will best suit your website.

 - What kind of 'mood' do you want your website to have? (Light and feminine, Bright and preppy or Black, White and a splash of colour, etc.)

 - Is it going to be One main colour that dominates your images and website colour palette? or have you found Three that work best?

 - Have you thought about what your customer wants?

Got Questions?

Send me an email ----->

I excited to hear your thoughts

[contact-form-7 id="223" title="Contact form 1"]