DAY 01 | EPISODE 01 | QUICK CLIP 06

STEP 4: AI PICKED COLOURS

Paul Davenport

  Paul Davenport  |    06:45

In this Clip you'll play with just 3 Colour Swatches to style over 70 Themes. That is a little crazy, but it's here just to show you a sample of what's coming.

After you sign up, in Episode 3, there will be 100 more Swatches to play with. Our Bots will help you complete a full colour palette, automatically creating colours that are missing from your Brand Guidelines. 

You'll even learn cool tricks and apps that designers use to create brand colours and extend their colour palettes.

   AI Website Transcript 

"Okay. So this is the bit where you're going to drop your logo onto the page, and our AI Website Bots are going to extract the colours from your logo and then style a Theme using just three colours. After you sign up and in episode three, which starts in about 20 minutes' time (episode two is only five minutes), we'll add all of your colours. Our AI Website Bots will sync those colours throughout the website, giving you a great-looking site in just 15 minutes.

Don't worry if you don't have a logo; you can click 'Skip' for now. In episode three, I'll show you cool ways to pick colours and create a fantastic colour palette.

Now, I'll pick my logo, selecting one with a transparent background. If your logo is in your header, you don't want a background colour. But don't worry, if you do have a logo with a background colour, the AI Website Bots will extract that colour and add it to your palette.

Once the AI Website Bots upload the logo (which takes about 30 seconds), they'll generate a colour palette. They've done a pretty good job here, picking out the pink and the sky blue, offering two variants each - a washed-out pink and a washed-out sky blue. However, neither of these is my main colour. To choose the main colour, think of it as the darker background colour. For example, if it was IKEA, that would be blue, and the accent would be yellow. I'll choose my main colour using the hex code. You can easily swap this later.

Now, I'll select my accent colour. We're building a theme with just three colours for demonstration purposes. If it were IKEA, the accent colour would be yellow. I'll choose my accent colour and move on to pick my neutral colour, which is an off-white. For a light website, the neutral will be your background colour, but I have a dark website. I'll grab the hex code from my brand guidelines and paste it in. I'll choose the header background, and since my header is dark, I'll select the main swatch to update all the colours to work on that dark background.

In episode three, we'll use our bot to update the remaining colours by hitting the 'Sync' button. It will give us two versions, light and dark, for the entire website. You can imagine how long this would take without our AI Website Bots. We can tweak each swatch individually. For instance, I'll update the call-to-action button and the text colour to make them work together. We can also change colours on scroll, as you can see here, offering a sneak peek of what we'll do in episode three. Let's move on now and choose your fonts."

Key Takeaways:

  1. Drop your logo onto the page, and AI Website Bots will extract colours to style the theme.
  2. Main, accent, and neutral colours are selected in this step.
  3. AI Website Bots sync colours throughout the website for a consistent look.
  4. You can tweak individual swatches to further customize the design.
  5. In episode three, we'll delve deeper into colour customisation and font selection.

More Quick Clips