Method to Change Squarespace Colors through Palette Editor
Here is another method to customize site colors, right from the Palette Editor of Squarespace website. The color changes apply to all over website with a single tweak. It is a perfect way to customize sitewide colors such as text, background, links, buttons.
To access Squarespace Color Palette Editor:
Navigate to Site Styles > Colors > Edit Palette > Palette Editor.
First, you must determine the primary colors for text and background used on most areas of website. Please refer to previous demo.
Synchronized Color Customization of Background, Buttons and Text
I have taken Carmine template for demo. Click Edit Palette to open Palette Editor. As we can see that, primary background color of Carmine template is yellow, therefore, locate yellow color circle among five circles given on top of color picker and select it. Now click on field circle inside color picker and drag it to any favorite color such as some dark color. You will see that the background color of your website has become dark. Color change applies on all pages of your website.
In some templates, such as this carmine template, if you change color of one element (say background), it automatically changes color of other elements (say text & buttons). Click and drag field circle at different locations inside field of color picker. You can also move color circle in the bottom slider. You can notice that as you move field circle, color in the preview of your website instantly changes color. You can also notice that if you select some light color for background, the colors of button and text automatically change to some dark color and vice versa.
But, in some templates, you must do it individually for each element. In both cases, it is easy. Let’s experiment with some other template such as Holly and Barbosa templates by Squarespace.
Pro Tip: Some of top five given colors above color picker, represent Text, throughout Squarespace website and some represent other elements such as Background color or color of Buttons. Each template may have some different color combinations, showing in top five circles.
Individual Color Customization of Background, Buttons and Text
Some Squarespace templates behave differently, when it comes to color customizations in color picker of palette editor. For example, in Holly template of Squarespace, you have to set colors individually for background, text and buttons.
As you can see in our video demo that in Holly template, the primary color of background is white, the primary color of text is black and primary sitewide color of buttons is green.
Match color of button in top five color circles in Squarespace Color Palette editor and select matching green circle. Drag field circle at different positions and you can notice that it changes only color of buttons. The tweak does not automatically change colors of text and background. But do not worry as it is also easy to customize colors of text and background.
As primary color of background is white, just find out white color circle and select it. You can notice that as you move around field circle, it changes color of background in website preview.
As primary text color of Squarespace template is black, just locate black color circle at the top. Move around field circle to change color of text all over website.
Let’s Try Some other Template.
Now we test it in Barbosa template of Squarespace. As primary template color of Buttons is light green. Locate it in top color circles and select the relevant circle. When you move field circle in color picker, it only changes color of buttons.
To change color of background, find the matching dark green color in five circles on top of color picker.
If you selected white color for background, the text will be hidden as primary text color of Squarespace template is also white. To select a contrasting color for the text, just select the white circle on the top and then move around field color circle to select some dark color for text for better visibility and contrast of the text.
Changing Colors Through Numerical Codes
You can also copy color code from some website and apply in color picker. For example, to change color of text from black to blue, select the black circle on top of color picker. Now copy code of blue color from other website and paste it inside color picker of your Squarespace website. It will instantly apply on text of your website.
To change white color of background into red, select white color circle at the top. Copy red color code from other website and paste it to see the instant change.
Pro Tip: Always select color of button that creates better contrast with both site background and site text.
You can repeat same process to change color of buttons, throughout your website. Please not that sometimes, color applies to text of button. If so, try with some other color to change background color of button.
Review of Color Changes
After customizing your favorite colors for text, background, and buttons, review it on different pages. Do not forget to save the changes in upper left corner of website preview. You can also discard the color changes. You can use Undo and Redo keys to review your color tweaks.
You can also notice that color themes have also adopted the same color changes, you just customized in the color palette editor. One color theme, usually Bright 1, always maintains either lightest or darkest color, just to maintain a relevant contrast in color combinations. If you discarded changes, all of your recent color tweaks will be deleted and template will restore its primary colors.
Just remember that these changes apply to all current and new pages of your website.
Limitations
This color customization method in Squarespace Color Palette Editor helps you change color of main elements on Squarespace website such as sitewide text, background, buttons. But this method has some limitations. It does not automatically change colors of some elements at deep level. For example, this method will not apply different colors to four types headings or paragraphs. But do not worry, you can perform such micro level color tweaks by clicking pencil icon on any color theme, as I have described the method earlier.
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 Color Themes.
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.
