Method to Change Squarespace Colors through Color Themes
You can use Squarespace Theme Editor to edit colors of different elements on your website, including background, text, links, and color of buttons.
Method to Change Background Color for Squarespace Website
After determining primary color theme of the Squarespace 7.1 template, now it will be very easy for us to change background of all pages at once.
To change background color, navigate to:
Site Styles > Colors > Primary Color Theme > Click Edit Theme ✏ >Click Section Background.
When you click the color circle in front of ‘Section Background’, a window will open, choose any other color from palette, change shade of color by slightly moving opacity slider or select Custom which will open Color Picker. Move field circle and bottom circle in the slider to select your favorite color. It will instantly change color of your Squarespace website.
Please remember that changes are automatically but temporarily saved. Therefore, do not forget to click Done > Save to save your color tweaks.
If it is difficult for you to select a color from color picker, you can use any third-party website (such as URL: https://www.color-hex.com/) to choose a favorite color. Just copy the numerical color value from the website and paste it at given place in color picker of Squarespace. After pasting the value, your favorite color will instantly apply on the background of all pages of your website.
Please remember that this color change applies to all pages except only few rare instances such as checkout page, 404 page which we will talk about later.
Please remember that site wide changes only apply if you edit primary color theme as we discussed earlier. Any changes to other nine color themes only apply to respective sections. You can use any other general color theme to customize color scheme of a specific section on a page.
Squarespace Theme Editor: Customizing Color of Text, Buttons or Links
In case, you have changed site wide custom background color in Squarespace 7.1, it is likely you will also need to change site wide color of text, buttons, and links. You can change the site wide text color by following same rules as you did while changing Squarespace background color.
Site wide text or button color will only apply if you do it from primary color theme.
Changing text color of Squarespace site or button color in any other theme will only apply to sections with that color theme. For example, if I change Squarespace text color from a general color theme of Squarespace, the change will apply to that section where that color theme is used. However, this color customization in general color theme will be saved and in future, if you apply that color theme anywhere else in website, it will reflect your same settings.
To change sitewide Text color
Navigate to:
Site Styles > Colors > Primary Color Theme > Click Edit Theme ✏ >Text.
Just click on circle in front of any heading or paragraph and color picker will open. Further process for selecting your favorite color for any text is exactly same as we performed earlier for Squarespace background color.
Here, you can customize your favorite color for four types of text headings and all three types of paragraph text. It is up to your choice whether you select same color for all headings and paragraphs or you can select different colors for each entry.
Pro Tip: If paragraph text on your blog, newsletter, events page, products page etc is changed but title of the page is not changed, you can select a specific color for them. For example, to change color of title on all blog posts, navigate to
Site Styles > Colors > Primary Color Theme > Click Edit Theme ✏ >Blog Post.
From there, you can change Squarespace text color for title, pagination (at the end of blog post), meta (author name and date etc), author profile, comments meta and text and other tweaks.
To change sitewide Button color
Navigate to:
Site Styles > Colors > Primary Color Theme > Click Edit Theme ✏ >Button.
Here, you can change Squarespace background color and text color of buttons all over Squarespace website. In case, you want to apply buttons of some different color at some areas of website, you can simply use some other color theme. You can do this by applying a different color theme to a section where button is placed or tweaking button colors in some color theme. In this way, you can use buttons of different colors on a same page.
To change sitewide Links color
Navigate to:
Site Styles > Colors > Primary Color Theme > Click Edit Theme ✏ >Links.
Further process is same as we have gone through earlier. Here, you can select separate colors for heading links and text links. Links are a best way to redirect a visitor to some other useful page on your website or some other website. It is a good idea to use buttons with some contrasting colors from that of page background and page text.
To change sitewide title color of blog post & product page
Navigate to:
Site Styles > Colors > Primary Color Theme > Click Edit Theme ✏ > Blog Post (or Product Detail Page) > Title.
Following same method, you can easily change color of titles text on blog posts, blog pages, product pages or portfolio pages in Squarespace.
Now, you have understood the process and it will be quite easy for you to play with text title tweaks of other elements such as image blocks or summary blocks.
Precautions for Selecting Color Theme for Squarespace Blog Pages
While customizing main blog pages, please choose same color theme as you have selected for blog posts, for section where blog post excerpts display.
For example, you have chosen ‘Lightest 1’ color theme with white background, while creating articles in the blog posts. Now, if you select some other color them for section of excerpts on ‘Blog Page’ - for example a theme with yellow background - then it will also change the background color of ‘Blog Posts’ from white to yellow.
You can choose any other color theme for any other section (except excerpts), on the main blog page, and it will not affect color theme of blog posts.
Micro Color Tweaks in a Squarespace Color Theme
With same process, you can also edit or change the color of many other elements or blocks such as color of site title, navigation links, headings, paragraphs, text links, restaurant menu, announcement bar, galleries, image and text section, list section, carousel, banner slideshow, portfolio, blog main page, blog post page, products main or detail pages, events, image blocks, forms, summary blocks, quotes, messages or quick view lightboxes.
Just remember the rule that if you make changes in primary theme, it will apply to all over website. You can also perform tweaks with these elements in all other color themes. Tweak options are same in any color theme.
Keep all other nine general color themes with little or no change. All color themes in a template are designed beautifully by Squarespace and it is a good idea, not to change them.
Now we move to the second method of color customizations on Squarespace website. Another way to change sitewide color of background, buttons, text, or other element blocks, is through editing with Palette Editor.
Restore Settings to Default Color Themes
If in any case you inadvertently created mess while color customization, do not worry.
Squarespace has provided option for restoring any color theme to default. Just click pencil icon of any color theme to open it. At the end of list, you will see an option to restore a color theme. Click over it and the color theme will be as fresh as you just started the template. It will delete all your previous customizations, so that you can start over again.
Please note that restoring a color theme will not affect other color themes. As there are ten color themes, you should restore all of them for fresh start.
In case you are worried, please note that this ‘Restore’ function will not delete your content. You can restore a color theme without any worry.
You can also use Undo and Redo buttons for this purpose but it may take extra time, for restoring color settings to default.
There is yet another way, which avoids applying your color customizations. Just click on Done button and select Discard Changes.
More Resources
Check more resources which are helpful in designing a Squarespace website.
Find the Default Primary Color Theme in a Squarespace Template.
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.
Get Services by Dozro for designing your Squarespace website.
