Now that you have selected your Header and picked your fonts, it's time to choose the base colours for your Brand. You can do this in moments first with a helping hand from our AI, then you can tweak your colours manually to determine your final look.

Click the 'Colours' Tab in the Styles area and let's get started.

WHAT DO THE PRIMARY AND SECONDARY COLOURS DO?

The Primary & Secondary colours help you to achieve the following:

1. Gain initial inspiration for how your main brand colours might look together. Once you've picked your colours you can use the 'Sync Palette' button. Our AI will have a go at updating the Primary and Secondary colours across your entire website in an instant. The AI will help you quickly achieve a nice contrast of these two colours and decide if the colours are right for your brand. You can, of course, continue to tweak each colour manually, which we will cover in the next Episodes.
   
   
2. Your Primary Colours also define the base colours that are used in your Layouts. When you drag in new Layouts and drop them on to the page the Layouts will use your Primary Colours to quickly reflect your brand. These colours give you a quick head start with your Layouts, though of course, you can make edits and save your layouts as you go. 
   
   
3. Primary and Secondary colours are a key part of your website CSS and can be selected in Buttons and even site animations such as hover effects.

STEP 1: ADD YOUR BRAND PRIMARY COLOURS OR DROP AN IMAGE

If you already know your brand colours the most accurate method is to type in the 6-digit hex codes and click 'Sync Palette', then save your page.

However, if you're feeling playful, you can experiment with our AI. Drop an image on to the page and our AI will attempt to detect and apply your colours for you.

STEP 2: ADJUST YOUR COLOURS

Now you can start to customise your website to make it your own.

In this example, I would like the Primary Colour to be blue and the Secondary Colour to be yellow. You can see that these colours have been picked from the image that was dropped on to the page. Other colours have instantly been added to the colour palette from the image too.

To open the colour picker, you can click on the Primary and Secondary colours square. You can now select the colours that you prefer at any time.

STEP 3: SYNC PALETTE

Now that Primary and Secondary colours have been selected, you can click the 'Sync Palette' button. Our AI will then automatically apply the Primary and Secondary colours and automatically update your colours in the most logical combination across your entire website. The machine learning sync algorithm aims to save you time, but of course, you can go ahead and tweak the colours for individual elements to create the precise look that you're after.

STEP 4: PREVIEW AND SAVE

Now you can go on to manually play with the other elements of your colour palette. As you do always remember:

1. As you update a colour click the 'Preview' button to view you change
2. When you're happy with your colour click 'Save' on the top right of the page to lock down your changes

In the forthcoming Episodes, we look at the more granular elements of CSS colours, as we focus specifically on the colours of your Header, Function, Accent Colours, Supporting and Widget colours.

In the forthcoming Episodes, we look at the more granular elements of CSS colours, as we focus specifically on the colours of your Header, Function, Accent Colours, Supporting and Widget colours.