Designing a Colour Scheme for Your Squarespace Website

A crucial part of designing your website is coming up with a colour scheme, which is a set of colours that both define your brand and are used throughout your site for interest and consistency. These colours show up in your photography, backgrounds, headings, links, footers, and calls to action. If you've already worked with a graphic designer on a logo and branding elements, this particular set of colours has probably already been decided on. But if you don't have a colour scheme to refer to, this post will help you come up with one.

design-a-colour-scheme

Why a colour scheme?

A colour scheme helps bring consistency & uniformity to your site. It helps your website match your other branding elements like your business card, letter head, any print media you have and keep your brand 'together' as a whole. It can make your brand instantly recognisable. When you've made the colour decisions up front, it cuts out a lot of the guess work when you get into designing your site. 

Here are a few examples I've taken from Pinterest to show how colour plays a critical role in your website design. 

A few examples

Here are a few examples from sites I've designed in the last few months. Some are bold and include bright primary colours, others are more muted in tone, and some have a range of colours that are very similar to each other. I tend to stick to four or five colours for each colour scheme, as I find that provides enough variation without becoming overwhelming and disjointed. 

Where to look for inspiration

Colour inspiration is all around us, and once you start to look for it, you begin to see it everywhere! You can find inspiration for your colour scheme in nature, architecture, fashion, or works of art. You can find it in shopping mall window displays, a meal, by flipping through a magazine, or in the way someone has decorated their home. Two of my favorite places to look for inspiration online are Pinterest and Design Seeds. 

I also like to take take photos of colour combinations that stand out to me when I see them and save them to a folder on my phone for looking through later on. Here are a few from my phone: a scene at the city hall, a collection of bottles, a collection of artwork, stacked vintage teacups, a set of paintbrushes in a mug, succulents, and a garden in the midlands with bright pink flowers.

Two of my favourite tools

Two of my favorite tools for colour scheme inspiration are Adobe Color CC and Coolors. With both of theses programs you can explore colour schemes by uploading an image and generating muted, bright, dark or palettes, or create custom palettes based on set colour rules. I won't get into the technicalities of all of that here, but its worth going to have a look at those sites and playing around with them. 

Adobe Color CC lets you save your colour schemes to refer back to later, and Coolors automatically generates a collage for you with the hex numbers included. What a helpful tool! Here are a few screenshots from both programs that give you an idea of what you can do with them.

 Here's an example of an image uploaded from Pinterest to Adobe Color CC. I selected a 'bright' colour mood on the top left and this is what was generated.

Here's an example of an image uploaded from Pinterest to Adobe Color CC. I selected a 'bright' colour mood on the top left and this is what was generated.

 Automatically generated collage from a photo uploaded to Coolors with hex numbers.

Automatically generated collage from a photo uploaded to Coolors with hex numbers.

 An alternative view of a related colour scheme.

An alternative view of a related colour scheme.

I usually create my colour schemes inNow make yours in Canva (simple grid)

Using Coolors is a quick and easy way to generate a colour scheme. I usually use Canva, though, to create my colour scheme, and I'll show you how to do that in the next few steps. 

Using Canva to create a colour scheme.

Step 1 | Login to Canva and select 'Social Media' from the 'Create a Design' panel at the top. 

select-social-media-from-canva

Step 2 | Name your design by selecting the title on the top right hand side of the screen.

name-your-canva-design

Step 3 | Select 'Elements' and then 'Grids' from the left hand panel on your screen.

select-elements-and-grids-canva

Step 4 | Select a grid that has one main image block and four or five smaller blocks across the bottom.

select-collage-grid-canva

Step 5 | Upload your reference/nspirational image by navigation to 'uploads' on the left hand side of your panel and then selecting 'upload your images'. Upload a reference image or two from your computer.

upload-your-image-canva

Step 6 | Drag your reference image across into the main image block.

drag-image-into-main-image-block-canva

Step 7 | Open a colour selector tool and hover your cursor colours on your image that you think would work well for your colour scheme.

I use the 'Color Picker' tool which you can download for Mac. There are loads of colour selecting tools which you can add as an extension to your Safari or Chrome web browser. Just do a quick google search for "colour picker tool", or "color pick eyedropper", or "colour picker for Chrome" etc. 

The Color Picker reveals a hex (or hexadecimal) number, which is a six-digit number used in computing applications to represent colours.

 Here I'm hovering my Color Picker over the dark purple on this image of a breakfast smoothie.

Here I'm hovering my Color Picker over the dark purple on this image of a breakfast smoothie.

 Here the Color Picker tool is showing the "Hex Number' that correlates to the purple I've selected.

Here the Color Picker tool is showing the "Hex Number' that correlates to the purple I've selected.

Step 8 | Transfer the colours you've selected to the smaller blocks on your colour grid.

Copy and paste the hex number (in this case 732f60). First click on the small square in your Canva design that you want to use. Then navigate to the small colour selector block on your Canva design above your image. A pop-up window with corresponding document colours opens up. Select the '+' symbol and paste your hex number into the 'Colour Code' window.

 Select the 'Pick a color' option on the top left above your image to add your hex number

Select the 'Pick a color' option on the top left above your image to add your hex number

 Paste your hex number into the 'Color code' window

Paste your hex number into the 'Color code' window

Repeat this step for all the other colours, selecting a range of colours based on those that appear in your reference image. You can go for bright contrasting colours, colours in a similar range, or muted colours. It is really up to you! Here's what I ended up with. I tried not to mix bold solid colours with washed out tones, so there are some really strong dark purples, olive and bright greens with a touch of bright white in this particular colour scheme.

color-scheme

Step 9 | Download your colour scheme and save it. You can do this by navigating up to the top right hand side of your screen, selecting 'Download', then choosing whether you want to download the image as a PNG or JPG file (I usually go for PNG). Then keep your colour scheme on hand for when you're ready to set up your styling and design in Squarespace.

download-colour-scheme

Bonus Step | If you want to add your hex numbers in text to the image you can do so by adding some text overlaid on your image. Select the 'Text' tool from the left hand panel on Canva, select 'add heading' and a text box will appear on your image. Copy and paste the hex number that refers to the specific colour (you can find these by clicking on the colour and finding the hex number in the document colour area). Style the text size and colour and save your image. 

add-text-to-your-colour-scheme

That's it for this blog post. As I said before, starting with a colour scheme is a very useful, structured and strategic way to start designing your website. It gives you a practical reference tool to use when you need to decide on the styling of your site from heading and link colours, to your footers and buttons. It can also help tremendously when gathering imagery for your site. Once you have those colours firmly in your mind, you begin to build a coherent and consistent look and feel for your site which makes it instantly recognisable as yours!


Here are a few other posts on Digital DIY and Canva that you might enjoy.