Squarespace – Key Rules for Editing and Changing Colors

In this article, you will learn to apply background color, text color, and buttons color with one click, to all pages of Squarespace 7.1 website. This article will also enable you to customize colors of text, background, and other elements on specific section in a page as well as performing color tweaks of all elements in a color theme. I will also suggest the best and easiest way for color selection in Squarespace.

You will also learn color customizations for other elements such as quote blocks, form blocks, menus, slideshows and many more.

Squarespace Color Settings Location

In settings (Site Styles > Colors), It is often tricky to customize site colors of background, text and color of other elements. But do not worry, I will take you through the whole process in easy way.

It is important to be able for changing site wide colors of elements with one-click setting that should apply to whole website. Sitewide setting saves time in future as all new pages will automatically load with already curated customizations.

3 Methods to Access Squarespace Color Change Settings

Please remember this access route to color settings for easy navigation.

In home menu of Squarespace website on the left, Click Design and select Site Styles.

You can also access Site Styles in another way. In website preview, click Edit on the top of page and a Paint Brush icon will appear on the top right corner. Select this Paint Brush and Site Styles menu will open.

Under Site Styles, select Colors. On the Colors window, Palette Editor is shown above, and ten color themes are shown below that. You can edit any color theme to make micro color tweaks with a lot of options.

To exit Site Styles, click Close on the top, or click paintbrush icon inside preview, or double click anywhere inside preview. You can either save or discard your changes by selecting Done button.

5 Main Methods for Changing Site Colors in Squarespace Version 7.1

For your easy understanding, we can divide color customizations in five main ways. It is not necessary to use all these methods. You can use any one or all of them to customize colors in Squarespace website:

• Using Color Themes

• Using Palette Editor (squarespace color palette)

• Using Color Presets

• Using an Image for color selection

• Using Color Codes in Color Picker

We will thoroughly discuss each method of changing colors of Squarespace website, one by one.

3 Key Rules of Color Customizations in Squarespace

Please remember these rules to avoid any confusion.

• Use primary color theme to implement your favorite color on all elements (such as text, buttons, background) on all pages of website

• Use any general color theme on any section of a page, for creating difference and prominence

• Application of a general color theme to a section in a page, overrides settings of primary color theme

Pro Tip: You can create a page with your favorite color schemes for different elements. Then duplicate this page to apply same color scheme for each new page of a collection.

Important: Do not forget to save changes (Done>Save) to apply color customization. You also have the option to restore a color theme by clicking pencil icon. You will find the Restore option at the end of tweaks page.

Let’s take start by changing colors of site elements through customizations in ten color themes.

Method To Apply Color of one Squarespace Template to Another Template

While exploring different templates in Squarespace, it is quite possible that you like color scheme of one template but you dislike its other customizing features. Therefore, it is easy to copy colors from one template and implement same color scheme for site background, buttons, and site text on some other template.

For example, if I like site background color of Barbosa template but I selected Carmine template and want same background color of Barbosa template on carmine template. I will open Barbosa template and navigate to Colors. I will click pencil icon next to primary color theme (Dark 1). I will select circle, next to background entry and then click on Custom. Inside color picker, the color code of background is visible. I will copy the code and then open the primary color theme (Bright 2) of Carmine template and then select circle next to background. I will paste the color code inside color picker of Carmine template and same background color of Barbosa template will be instantly applied to the background of carmine template.

In the same manner, you can change colors for other elements such as text color or buttons color in Squarespace website.

More Resources

• Find the Default Primary Color Theme in a Squarespace Template.

• Method to Change Squarespace Colors through Color Themes.

• Method to Change Squarespace Colors through Palette Editor.

• Squarespace Color PRESETS: Method to Change Color.

• Three Easiest Options for Color Selection on a Squarespace Website.

• Squarespace support article for changing colors.

• Methods of Font customization in Squarespace website.

• Check more learning resources about Squarespace.

• Check the cost of Squarespace website creation service by Dozro.

• Join our Facebook Group about Squarespace help.

• Explore Services List offered by Dozro.

• Visit the HOME page of Dozro website to explore many other Free learning topics of your interest.