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:
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.
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.
Start with a Webflow template and have your new website up in no time.
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.
So here's the absolute non-negotiable when it comes to using colour palettes in Webflow:
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.
Learn how to submit the page URL along with other form data across a Webflow website using some simple custom code.
Learn about why and how you can create a design system for your Webflow website.