Creating a System for Colour Swatches in Webflow

Keeping systems inline throughout your Webflow website as you expand and add more pages can be difficult. This expansion usually results in adding on new layouts, styles, and colours, and it can easily add up and get out of control.

One of the sections in your Webflow project that can get messy easily is the colour swatches. Anytime you need a colour that isn't a swatch yet and add one in, it can easily turn into a cluttered desk draw of different colours.

What does the worst case scenario look like? Often it looks something like this:

This becomes a major headache to work with across your website, which is why setting up a palette of colours from the start of your project is important.

Now let's look at the best case scenario:

Because the colours were set up first rather than added to as the project was built out, it's easy to see the colours used across the website, and easily select the one you need. Here's an outline for the 3 different types of colours used:

• White to Black Shades: You always want to have a range of greys that you can use for hierarchy and emphasis across your different pages. You might have your paragraphs slightly lighter than your headings, and your copyright text ever lighter.
• Primary Colour Swatches: Adding in a range of dark and light swatches for your main brand colour means that you can add texture and subtlety across your website. For example, you might have a button get darker when you hover over it, and lighter when you click on it.
• Secondary Colours: These are the complementary colours that you use throughout your branding to accent your design. It's helpful to also have colours set up for edge cases, such as success or error messages.

By setting up all of these colours early on, it becomes easy to add in and colour new sections and styles as you build out new pages.

Let's look at how to create a simple colour system now.

Setting Up Your Swatches

If you're not a whiz with colour, don't fret. You don't need to have a perfect artistic vision to create a palette that looks great and is easy to work with.

To make things super easy, you can use a colour palette generator tool. In this case, I'm using the Mdigi Colour Shades Generator.

First you want to create a white to black palette, which you can do by entering #000000 as your initial colour: https://mdigi.tools/color-shades/#000000

You might find that you prefer using a white to black palette that has a little bit of blue injected into it to make it look and feel a bit softer: https://mdigi.tools/color-shades/#849095

Once you’ve found a range that suits you, you can copy the hex codes for each shade and add them to your swatches in Webflow, making sure you name them appropriately.

Now you can use your main brand colour to generates shades that are lighter and darker around that colour. Here's an example for blue: https://mdigi.tools/color-shades/#356af0

Through the same process as before, you want to add enough colours that you can easily use them for different pages in your project. There is no magic number for how many you need, but around 6-8 will usually suit well.

Lastly you can add in any secondary colours that your brand uses, and don't forget to add in colours for error and success messages.

Now you have a colour palette that is universal enough to use across any new pages you might add. Since we've added secondary colours at the end, if you need to add in any new colour then you can do so without cluttering your colours.

If you ever need to adjust a colour, you can edit the swatches at any time and any changes will be reflected across the entire website.

Summary

So here's the absolute non-negotiable when it comes to using colour palettes in Webflow:

1. Have a range from black to white to be used for different text and background styles
2. Have a range of light to dark for your primary colour that can be used for backgrounds, text styles and buttons

After that, you can add in any amount of secondary colours you need until you have a system that is easy to use and update.

‍