pagekits logo

How To Create Your Squarespace Color Palette

September 22, 2022  /  
Squarespace Color Palette

Selecting the right colors for your website is essential to make an excellent first impression. In this post, we'll walk you through the steps of creating a Squarespace color palette for your site. 

Choosing A Color Palette

Keep this in mind when creating your color palette. You'll want to consider the overall tone of your site. Do you like bright and bold colors? Once you've determined the style, you can start to choose more specific colors. 

Depending on your chosen template, you may have some preset colors to work with. If so, great! If not, that's okay too. There are plenty of resources to help you find the perfect shade. A few of our favorites are Adobe Color CC, ColourLovers, and Coolors. 

Once you've found a few colors you like, it's time to start narrowing them down. A good rule of thumb is to select one primary color, one secondary color, and one or two accents. This will help create visual interest and keep your palette from feeling too overwhelming. 

Creating A Squarespace Color Palette

Now that you have a color palette in mind, it’s time to change the Squarespace defaults. You need to access sections to make sure you make the right changes. 

Design Section

  1. Navigate to the Design section and choose Colors.
  2. When you see the palette, click Edit.

The Squarespace color palette has five colors, including black and white, used for most text and backgrounds. It’s important to keep black and white as part of the five colors. You can change the three remaining colors to match what you have in your color palette. 

Tip: If you have a light or dark color near white or black, consider replacing it with something that has more or less contrast. If you have any pop colors like neons, consider reserving that for your logo or images you’d put on the site. 

Squarespace applies the color palette across the entire site, affecting themes and various design elements, and you may not enjoy seeing your site bathed in highly contrasting colors. 

  1. Match your colors to what Squarespace has auto-generated. Replace Squarespace’s lightest color with the lightest one you have and the darkest color with the darkest one you have. Doing so ensures that everything will appear appropriately on your site.

Themes Section

Under the Palette Section, there’d be a list of Themes such as “White Minimal,” “White Bold,” “Light Minimal,” etc. The themes show how Squarespace applies your color palette across the site’s look. Sometimes, Squarespace doesn’t render your color palette precisely as you want. 

Check these out and review them to see how they look. If you need to change anything, just follow these steps:

  1. Select the Theme you want your site to have. When you select one, it will show a preview on the right-hand side. 
  2. If you’ve selected a Theme but don’t like how it shows the color palette, go back to the Palettes Section and adjust the colors you’ve set from lightest to darkest. 
  3. If you need more specific color customizations, like changing the text on buttons, hover over the theme and click Edit. 
  4. Check the long list of elements and look for the exact element you want to change. When you find it, you can set the new color. 

Blocks

Squarespace also allows you to change the colors of specific blocks on your website. This option enables you to apply various color swatches across your site that the theme may not cover. 

To make specific block color changes, follow these steps:

  1. Scroll to the top right of a block and click the icon that looks like a pen and paper. A pop-up editor will appear.
  2. Go to the third tab that says “Colors.” 
  3. Switch off the option for “Use Default Colors.”
  4. Choose one of the different themes to apply on that block. When you select a Theme, it will use the color scheme assigned to that Theme. 
  5. If you still don’t like the specific color, you can change it by editing the Theme.

Creating a Squarespace color palette for your website is easy once you know where to start. By considering the overall tone of your site and selecting one primary color, one secondary color, and one or two accents, you'll be well on your way to putting together a cohesive and visually appealing design.

For more helpful articles like this, visit the Page Kits blog.

Was this article helpful?
YesNo
ABOUT THE AUTHOR

Comments are closed.

pagekits logo
Copyright © 2022 PageKits. All Rights Reserved.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram