Squarespace Color PRESETS: Method to Change Color
Another way to customize colors on Squarespace website is using Presets inside Palette Editor. It is one of the easiest ways for changing colors.
To access Presets:
Navigate to Site Styles > Colors > Edit Palette > Palette Editor > Presets.
Any color customization through presets applies to sitewide.
There are 18 presets in each Squarespace template. All color presets are exactly same in all templates.
You see three colors in each preset. Three colors in each template, represent colors of site background, text and buttons.
Select any color preset and you will see simultaneous changes in colors of buttons, text and site background.
You can try different presets and choose one which you like. After selection of Squarespace color scheme, save changes to apply colors on all pages of website.
Four More Color Presets
Each Squarespace template gives you four more fine-tuned additional color presets when you select ‘From Color’ in Palette Editor of Squarespace. These fine presets are based on your previously selected preset colors. Just click over any of these four presets to apply on your Squarespace website. These presets are just additional options for you. It is not necessary to apply them.
These are harmonious color schemes in Squarespace. Monochrome preset uses three different shades of the same color and best for creating harmonious color combination. Complimentary preset uses opposite colors and thus best option for visible contrast. Analogous preset uses three adjacent but different colors on the color wheel and produces better contrast than monochrome.
If you select a custom color in color picker, the four preset options automatically synchronize with the selected color.
Review Changes on Website
After selection of your favorite color preset, you can review the changes on different pages of website. These changes apply to all pages on website. If you see a section with some different color, it means that the specific section uses some different color theme by design or maybe you edited it. To apply same color on the specific section, just click on pencil icon in the section to open the editor. Select Colors and then choose primary color theme. You will see that the color scheme is applied on the whole page. If you like, you can save the changes.
What if Presets Do Not Work
You can also test Presets with some other template. We used Carmine and Barbosa templates in video demo. You can see in our video that presets work exactly same in both templates but in some templates, color presets do not work. For example in Holly template, preset do not function with any preset.
In such case, you have three options:
You can try some other template.
You can customize colors with theme editor.
You can do color customizations in Palette Editor.
We have already described detail of each method earlier in this article.
Color Customizations Through Image
Just import any image from your computer the Palette Editor will pick some most prominent colors from the image.
To access this method:
Navigate to Site Styles > Colors > Edit Palette > Palette Editor > From Image.
After image is uploaded, you will see instant color changes on your Squarespace website. The colors will apply to all elements such as text, links, buttons, site background. In some templates, it may not apply to all elements and you can do individual customizations as described earlier.
If you imported an image with only one color, it may affect contrast in text. In this case, just find the primary color of text, select relevant color circle at top of color picker and select any contrasting color from the color picker, for the text.
You can try yourself with different images. Prefer PNG images for better color picking.
Keep an eye on all color themes while performing Undo and Redo and you will notice that changes are applied to all color themes.
Just keep in mind that through image import method, color customizations in Palette Editor applies to mid-level colors, most of the times.
By the way, I do not prefer color customizations through image due to the obvious reasons such as less control on color choice.
As I already said that any color customization in Palette Editor applies to whole website and all color themes.
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.
Method to Change Squarespace Colors through Palette Editor.
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.
