I'm booked out for NEW website builds until June 2024. Request a proposal now if you wish to be next in line [June 2024]
How To Choose A Colour Palette for your website

How to choose a colour palette for your website

All websites are unique and each one is made up of lots of different colours. Your choice of colour for your website is the major foundation of the design of your website. 

We use colours over and over in our websites in text, headings and pictures. We choose colours for our backgrounds, menu’s, buttons and links. So how do you choose a colour palette for your website? Is it possible to get it wrong? How much time should you spend on choosing your colours? 

It comes down to knowing the personality of your business and website, getting some colour inspiration and then using some handy online tools to narrow down and lock in your choices. 

First impressions count and when you first stumble on a website, the way it has been designed it will give off a certain vibe. The trick is to align what your website looks like with the personality of your business and the colours you choose are a big part of this. 

Our colours not only need to look nice, but they also need to match the overall design of our site and they also need to be visible (so not having yellow text on a white background for example) on all screens and for all people.

As your colours are used over and over again, it is useful to have a set of defined colours that are used each time. This is called a colour palette and helps you be consistent when using colours throughout your website.

You can change your colour palette later on

The most important thing to remember is you can always change your mind later on. You can spend hours and hours researching and tweaking your colour choices – it can be paralysing. However, as your business evolves so can your website and you can come back and change your colours overtime. 

In the next few sections, I’ll give you some tips on where to find colour palette inspiration, how many colours to choose and how to choose colours that compliment each other.

There are no wrong choices, some may say that certain colours don’t work together and others may be too dark, too contrasting etc but the best way is to try them out for yourself and see what they look like. 

How Many Colours should I have in a colour palette?

A colour palette usually consists of 5-6 colours including the following:

  1. A shade of black
  2. A shade of white
  3. A dark/bright colour
  4. A light version of your dark/bright colour 
  5. An accent colour (a stand out colour used every now & then)

Each colour has many different shades. Visit the paint section of a local hardware store and you will see how many shades of good old plain “white” there are. There is off whites, blue whites, grey whites, bright white, yellow whites etc. 

When choosing a colour for your website we don’t enter the colours name in, instead, we use a numbering system called HEX. There are over ten million individual colours that you can choose from.

Each colour shade has a hex number. For example, the number I use for my pink headings is #db5461. Using the HEX number when selecting a colour ensures the exact shade is used across every page. If I just chose a “hot pink” colour by looking at the colour, then I could choose a slightly different shade each time. This looks messy, inconsistant and unprofessional. Therefore it is always better to choose an exact colour by its hex number when chosing colours for your website.

Note that hex colours are the language of the web, if you print a hex colour it can appear different printed then it does online. RGB is the numbering system used for printing. 

How to find colour palette inspiration

You now know that you need a colour palette, but where do you start? With over ten million colours to choose from what is right for your site?

Firstly, you need to come up with some words or vibes you want your website to have. For example, a happy bubbly website might have bright colours like yellow or neons. A spiritually-based site may have more muted natural colours like green and brown. What is your site about and what general colours are you drawn to?

If you are feeling stuck, there are a heap of different websites you can go to that will give you ideas for different colour palettes.

My top recommendations include:

  1.  Head to Pinterest and Instagram and search for “colour palette.” There are millions of different suggestions and you can start saving ideas and putting together a scrapbook or board to help you narrow down ideas.

  2. Start searching and connecting with graphic designers via LinkedIn, Facebook, Instagram and Pinterest.

  3. Head outdoors, just connecting with nature, a local art gallery or a museum can get the creative juices flowing. Take photos of things you like the colour of and connect with. Create a colour palette photo album so you can start to narrow down the palette.

  4. View other peoples website and when you connect with a colour scheme they have. When you find a website you like, right click your mouse and choose “inspect element.” You will get a list of all the website code for that website page which will include the hex code number. You can copy elements of other peoples websites for inspiration. If you feel guilty doing this, remember there is no such thing as original art. All art borrows elements and draws inspiration from other sources. Still, feel guilty? Watch this TEDx talk by Austin Kleon author of “Steal Like An Artist”

  5. Use online colour picking tools. Several cool websites have colour picking tools that you can use to help choose suitable colours and then save or print out your selections for easy use later on. Below are some of my favourite colour picking tool websites.

Colour Picking Tools

1. https://coolors.co 

This is my favourite colour palette generator. It allows five colours, you can generate five random colours or you can add a few of your own and generate the remaining colours. For example, if you have chosen your black, white and a bright colour you can enter the Hex codes for those then let the tool suggest the remaining colours until you get the ones you are happy with. 

Colour Palette
 
This tool by Google is a little more complex but it will show you how your colours work together in a mock-up mobile site. It’s worth spending a little more time to figure out how to use this tool. as it has extra features such as ranking your colour choices with how accessible they are – how easy or not your choice of colours will be read by people with a disability such as poor eyesight.

Google Colour Palette Tool

3. https://www.sessions.edu/color-calculator/ 

This website by sessions college for professional designers has a cool simple tool that lets you enter a Hex colour then it will give you options for contrasting, opposing or accent colours.

 

 

 

Where to from here?

Once you have narrowed down your colour palette you can start experimenting with your website adding colours in and seeing where they will work.

You may like to print off your palette or add your colours to a formal style guide for your website. A style guide will list all your fonts, sizes and colours making a handy reference to refer to when creating your website.

If you are curious to find out more about Hex colours than you can read more here. If you are finding yourself feeling indecisive and stuck I suggest finalising a few palettes you love and draw one out of a hat. You could also find a graphic designer locally or online using Instagram or Etsy. Many have colour packages for a very reasonable price, often they will include font and patterns suggestions as well.

Good luck and happy colouring!!!

Share this post

MERGE YOUR OFFLINE TO YOUR ONLINE

Are you ready for simple, affordable website design, optimisation and marketing strategy?