A guide to setting up your Squarespace website color palette

Website Design

Feb 1

Soft neutral color bedding with gold tray and candles

For a small business to stand out from the crowd, it’s more important than ever to create a strong brand presence.

And a big part of that effort is establishing a cohesive, appealing color palette that carries through to all facets of your brand - including your website.

I often receive questions about how to select the right colors for a website, especially from those who don’t necessary have a brand color palette already in place.

As a Squarespace expert, this is a process that I walk through with all of my website clients one-on-one. But I want to share this post with all of you DIY-ers out there too!

My goal here is for you to be able to make the most of your website color palette using the built-in tools that Squarespace provides.

If you’re DIYing your own website, this post will help answer some of those color palette questions… AND I’m throwing in a freebie for you too! 🙌

How to set up color palettes and color themes in Squarespace

Does this ring a bell?

You’re starting from scratch and stuck trying to select the best colors for your new website.
You have an existing brand color palette but not sure how to apply it to your website.
Your chosen website colors don’t seem to be flowing as well on your website as you’d like them to.

Relax, because you’re not alone!

Luckily, Squarespace provides fantastic tools to make the application of your website’s color palette easier than ever.

This website color palette tutorial covers the basics of:

✔︎ Identifying a harmonious website color palette for your brand

✔︎ Applying your brand color palette to your Squarespace website

How to choose the right color palette for your Squarespace website

Creating a simple mood board, using a platform such as Canva or Pinterest, can be a powerful tool for inspiring the best color palette for your website. By curating a collection of images, patterns, and textures that evoke the desired emotions and aesthetics of your brand, you can visually explore different color combinations and find what resonates most with your vision.

Look for visual inspiration (for example: textures, architecture, curated objects, natural landscapes, or minimalist interiors) and begin to gather a wide range of color palettes that spark creativity and align with your brand and your website's overall theme.

Create a digital mood board to inspire your website color palette

As an alternative to pinning photos and magazine cut-outs to a cork board, think about creating a digital mood board. I like to use Canva as a platform to quickly find and organize images, but you can go with whatever feels best for your workflow.

1 / Collect inspiration from various sources, including photos, patterns, or illustrations, and save them to a new folder in Canva.

2 / Narrow down your selections to a few key images that really capture the mood or feeling you want your website to convey - images that evoke emotions aligned with your brand's purpose.

3 / Identify a color from each image that speaks to you, and make note of its color value (hex #). There’s a fantastic feature in Canva that automatically signals color swatches and their values for you based on a photo used within a design. I typically select four colors based on my selected images (see example Mood Board), two darker hues and two lighter hues.

Sample Canva screen showing color selections from photos

4 / Arrange the color swatches on your digital mood board, allowing them to visually interact with your chosen images.

5 / Analyze the mood board as a whole, identifying recurring color patterns or themes. These colors and images will be the foundation for your website color palette and work help convey your brand’s mood.

🔥 BONUS! Get my free Canva Mood Board Template and start putting your brand color palette to work on your Squarespace website!

Canva mood board sample with neutral color palette and five earth tone photos

How to apply your brand colors to your Squarespace website

Open your website’s SITE STYLES by clicking on the paintbrush icon in the top right corner of your screen.

Then click on COLORS -> EDIT PALETTE.

In the Palette Editor, Squarespace provides 5 main color values to customize for your website. Those colors will be applied to the “color themes,” which we’ll discuss further down in this post.

Light neutral: My approach here is to always assign the first color value as WHITE (#FFFFFF) or a variation that’s very close to white.
Light accent: For the second color value, I’ll choose one of the light colors from my sample mood board. In this case, #EAEAE9.
Main color: For the third color value, I’ve chosen one of the stronger brand colors from my sample mood board (#6B8A81).
Dark accent: The fourth color value will be the other stronger color from my sample mood board (#83715D).
Dark neutral: For the final fifth color value, I always choose a black (#000000) or a dark-gray / near-black color.

These color values will be the foundation for your website. However the colors of individual sections and elements of your site can always be edited manually if needed.

The Squarespace palette editor with five earth-tone colors

Customizing your Squarespace website color themes

After you’ve added your 5 website colors to the color palette, go back to the main COLORS menu. You’ll note that your custom colors have now been applied to your website’s color themes.

In total, there are 10 color themes that you can customize. Color themes are essentially pre-formatted color combinations that you can apply with the click of a button to a specific page section on your website.

I don’t use every single color theme when designing a website. However it’s nice to have the option. Generally, I customize and use the “number 1’s” of the themes (Lightest 1, Light 1, Bright 1, etc.). That tends to give me enough variety and flexibility when designing my clients’ website pages.

So let’s take a look at how to edit the individual color themes.

The Squarespace color themes showing the various theme options

How to edit a Squarespace color theme

Click on the color theme that you’d like to edit.
A very long list of options will appear under EDIT THEME, including options to modify the color of text, buttons, backgrounds, and much more. You’ll note that Squarespace has automatically added your color palette to each item in the list.
To change the color value of any item you see in the list, simply click on the colored dot. For example, if I want to change the Navigation Links from black to my sample brand “green”, I’ll click on the dot and select the color from my color palette.
You can also choose a custom color (that’s not part of your 5 main color values) by entering a Hex value or by using the color picker.
💡 PRO TIP Don’t get too crazy with color here! Try to stick with your chosen brand colors. Moving forward, this will ensure a cohesive presence for your website and your brand.

Squarespace edit them options to update section colors

Applying color themes to your Squarespace website

Once you feel comfortable with the various color themes, you can now apply them to any section of a website page.

Here are the simple steps:

While hovering over one of your page sections, click on EDIT SECTION.
Then click on the COLORS tab. You’ll see a familiar list of the 10 different Color Themes that have been set up.
Click on the Color Theme that you need for that particular page section. You’ll see the section immediately update with the colors that have been assigned to the color theme. This is a great way to test-drive the color themes for your page sections.

And that’s it! 🎉

If you need to revert back to or change the section’s color theme again, simply follow the steps above.