How to change colors in Squarespace
This article is about how to change your colors in Squarespace.
*🖼️ You will find screenshots for each step, customized to the specific template you've chosen.
🔸 I’ll be using the “Style Sheet – Tutorial” page, located in the Not Linked section, as an example in this tutorial. This page showcases the Harmony Template Color Themes and you can use it and easily see what the content of your site will look like when you make changes on the Colors menu.
•💡Changes made in Site Styles apply across your entire site. If you update a theme, the changes will automatically apply to all sections that have that theme assigned.
If you're using a Style Sheet page or any other page to experiment with different colors, keep in mind that you can always revert back to the previous color.
To do this, you can use the undo and redo arrows in the top-left corner of the editor. These work for most changes in the page editor, including blocks, sections, section styles, and site styles.
If you click Save in the top-left corner while editing, you can still undo or redo changes within that session. However, once you Exit the page, your editing session ends, and any changes you made can no longer be undone or redone.
• From the “Style Sheet - Tutorial” page on your site:
Go to edit mode.
Click on the paint brush icon on the top right-hand side. And you will reach a menu.
Click on Colors. This is where you have the Color Palette and Color Themes.
You will notice something very different about the page you are on, Squarespace is going to tell what Color Theme has been assigned to each section on the particular page.
Starting with the Palette:
This is a way to automatically update any color that has been assigned in one of the Color Themes.
Select Edit Palette and see what happens by clicking on the middle square.
Then, first move the slider #1 along and grab a blue instead.
Move the circle #2 along and grab the shade you like.
Now check it out, everything that was assigned that orange color has now been updated to that blue color.
• So, if you make a change to your Color Palette you’re going to update the content that’s been assigned based on that Color Theme.
You can click on any of the squares and choose any color you want by:
• Moving these circles along and grab a color.
• Typing the HSL Color Code/HEX Color Code.
HSL stands for hue, saturation, and lightness, and is a way to represent color digitally.
A HEX Color code is a six-digit combination of letters and numbers, preceded by a hashtag (#), that represents a specific color by defining the amount of red, green, and blue components within it.
If you'd like to create your own color palette or explore different color combinations, you can use Coolors. It's a free and easy-to-use website that helps you generate color palettes and find the exact color codes (HEX, RGB, HSL.) you might need. You can start with a base color and let the generator suggest matching shades, or just hit the spacebar to explore new palettes. It’s a fun way to play with colors and find the perfect vibe for your brand or project!
• Scrolling down you’ve got a bunch of color palette Presets you can select as well.
• You can also upload and image and Squarespace will pull the main colors from that image.
🙌🏾 Totally up to you!