How to Choose Your Website Colours
If you’re reading this, then it’s likely you don’t have a logo or branding assets to go on for picking your website colours. And that’s ok!
Sometimes you just need to launch a website pronto, get ranking then invest in proper branding when your business matures and starts to turn a profit.
So before you spend days faffing aimlessly, read my top 3 tips for identifying your website colours:
1. Start with a photo collage
A great starting point is to first put together a collage of 5-10 photos you’ve chosen to use on your website. Ideally these would be professionally taken photos of you and your work environment, or high quality stock imagery that aligns with your branding. Good news is, you can find stunning free collage templates using the easy graphics tool Canva.
Once you have your photo collage set up with all your images, stand back and pay attention to the overall effect. Can you see any recurring colours? Which ones stand out the most to you? Try to identify a common colour theme from your collage.
For example, take a look at my old photo collage below. I put this together once I’d decided on the main photos I wanted for my first website. Seeing all the photos together made it so much easier to notice repeating colours from this zoomed-out perspective. My eye was drawn to the muted tones: beige, warm brown, and soft black. This felt very me at the time.
2. Keep it simple
Pick just 3 colours for your website. You want to make sure you have:
One neutral colour for your background (tip: usually a light colour so text stands out)
One bold colour for links and buttons
One contrast colour - for your text (tip: black or a dark colour for easier reading)
However, in Squarespace’s site styles there are 5 colours that form your palette - so to make up the extra two, just pick a paler version of the bold colour and a paler version of the contrast colour. So for me it was beige for my neutral colour, warm brown for my bold colour, and then a soft black for my contrast colour. They should all look harmonious and blend well together.
3. Extract your colour codes
Colour codes are essential to keeping your colours consistent across your branding and imagery so its worth keeping these saved somewhere safe as you’ll need them for your website as well as mocking up graphics for social media posts etc.
If you have Canva Pro, it will immediately show you a palette made of the document’s main five colours including the hex codes. So handy! But if you don’t have Canva Pro or don’t see this option, then i’ve listed two other free colour picker tools below that will do the same.
If you use Chrome browser then I love using their free Eye Dropper extension which works simply by hovering your mouse over any image to extract the colour codes and even saves them for you for future reference!
If you don’t use Chrome, just head to coolors.co where you can simply upload your collage image (or any photo), pick out the specific colours you want to use, then save your colour palette so you can refer back to it.
Coolors.co creates a very handy palette making it easy to copy your hex codes into Squarespace.
To add those colours to your Squarespace website, head to Design > Colours, then copy/paste each hex code into the palette. Here’s a visual example with the above colour palette.
You can also upload your collage image inside Squarespace - genius!
And that’s it! Three simple steps to help you pick out your website’s colours. Squarespace will then apply the palette to your entire website. If you want to change the colour of a specific section/page, just click the pencil in the top right corner and pick a colour theme from the menu.
Still daunted by it all? Leave me a comment and I’ll create more content to help answer your questions!
NEED ADDITIONAL SUPPORT to BUILD YOUR dream WEBSITE?
Why start from scratch when you don’t have to? Get started with one of my DIY website templates!
