How to choose a colour scheme and get its hex values

by | Nov 18, 2019 | Websites, Website Planning | 0 comments

When you are creating a new website, one thing you need to know is your colour scheme.

So how do you pick a colour scheme?

I’m not going to go into colour theory. We don’t have much time. Planning your website is probably already taking you longer than you wanted so we are going to make this really quick.

The video below covers steps 1 to 4 below.

Step 1: Choose the first colour

Choose one colour that you like and that appeals to your ideal client. Don’t get too hung up on the meaning of the colour. [This area has the potential to take weeks if you are not careful. You will get led down the rabbit hole of learning about colour theory and psychology. I say, leave that to a branding expert. When you have the funds, hire a branding expert but you don’t need to do this at the start.]

So, back to choosing a colour, it could be your favourite colour, it could be a colour that has caught your eye from another website, it could a colour on image you like.

Just pick something that resonates with you and is likely to be attractive to your clients.

Step 2: Convert you colour to a hex colour code

It’s not enough to know that your colour is ‘green’, you also need to know the hex value.

What are hex colour values?

A hex colour value is the hexadecimal number that represents a specific colour. Every colour has it’s hex equivalent and it can be in the range of #000000 which is the equivalent to black, to #ffffff which is the equivalent to white. Each value has a hash at the start to signify it is a hexadecimal number.

The programs that convert web page code to the actual web pages you see in your browser need the colours to be in hexadecimal so they can understand them.

By the way if you are not sure what a hexadecimal number is, here is a quick explanation of hexadecimal on Wikipedia.

How to convert your colour to hex?

Take a screen shot of the colour you like, or find an image that contains the colour you like.

Upload it to the Canva colour palette generator.

This tool with then display all the colours it can find in the image with their hex values.

Step 3: Find a colour scheme that contains your chosen colour

Take the hex value of your preferred colour and put it in the Canva colour wheel tool where is says “1. Pick a colour”.

Then, where is says “2. Choose a colour combination”, select one of the options. For detailed explanation about the available options, scroll to below the tool where you will find descriptions.

Once you find a colour palette you like, find the hex values which are below the individual colours.

If you don’t like any of the suggested colour palette then go to the next step.

Step 4: Browse other colour palettes for inspiration

Canva has a whole page dedicated to colour palettes. You will find the colour palettes here.

Just enter a colour, e.g blue, in the search bar and Canva will show you lots of colour palette ideas.

Click on the colour palette you like to reveal the hex values.

What do you do with hex colour codes once you have them?

In the Divi settings, you add your hex codes in the colour palette settings.

Adding colours to the divi colour palette

This colour palette is available to you as you build your website.

Where will you use your colours?

Once you have the hex values you need to decide how they will appear on your website.

Choose one colour to be your main, dominant colour. This is often the strongest colour, the one that stands out the most.

This will be used in your logo, titles and headlines and to draw attention to areas of your website, such as form backgrounds.

Next choose one colour to be your first accent colour. This will be used on buttons, links and to highlight other areas that you may want to draw attention.

If you want more colours, you can choose a second accent colour. This can help draw attention to areas of your website if you are using different coloured backgrounds.





Submit a Comment

Your email address will not be published. Required fields are marked *

About Karen Weider

I have been building strategic, marketing websites since 2011. I have supported many business as they get online and grow their business and I firmly believe that planning is crucial to online success.

I help women who are action takers and want to build their own website and I support established who are looking for a long term website strategic & technical partner.

I love working with change makers who are following their heart and have been called to share their message and make a huge impact in the world.

Join my free Facebook group

For business women who want tips and challenges to help plan a visible, valuable website.

Join here >>

Share This