How to add a Custom Color Palette to your Squarespace Website
Establishing a strong brand identity that is easily recognizable all across your website is crucial to make your business stand out from the crowd and attract new, ideal customers. One key element in achieving this is through the use of color 🌈✨
Indeed, distinct brand colors can say a lot about you and your business. They set the vibe, they convey energy, and give potential clients an inkling of what it's like working with you.
For example, while a neutral color palette can give your website and brand a relaxed, luxurious, or elevated vibe, bright colors can evoke stronger emotions among your site visitors, get them pumped for working with you, and feeling energized and ready to take action.
What colors are best suited to your brand, and which of these colors will work best on your website is a whole other topic, so if you haven't got your color palette quite figured out, make sure to check out our full tutorial on creating the perfect color palette for your business.
If you do have your color palette ready to go or need just a few tips to perfect it, then follow along as we walk you through all the steps to seamlessly implement your custom colors right into your Squarespace site!
Let's dive in! 👇
Why Squarespace is great for keeping your branding consistent
One of the many reasons that we recommend Squarespace for small business owners is how easy it is to use and customize while keeping site styles consistent throughout (a key element to successful branding!).
This is not only super helpful for those business owners who might not have a background in tech or design that are still keen to give DIY a go, allowing them to easily create a great looking, modern, and cohesive website for a fraction of the price of a custom one!
Greatly facilitating this DIYer-friendliness is Squarespace’s high versatility, stemming from a basic understanding that small businesses have incredibly different needs.
Not only is it an all-in-one platform giving businesses the opportunity to access all the features and tools they could ever need in the same place (think blog, shop, course, scheduling, email marketing, and more), each and every feature can be customized, in terms of both design and content, to suit each unique business’ styles and needs.
Whether that be fonts, colors, logos, or other graphic elements, Squarespace makes it easy to convey your unique branding all across your site, particularly with their incredibly thorough, yet incredibly straight forward Site Styles settings and Color Themes (which we will cover below!)
What makes a good color palette: Best practice tips
A color palette is essentially a set group of colors (usually 3 to 5) that represents your business and that you use consistently in any of your business related designs, whether that be your socials, website, or any other promo graphics.
An effective color palette can make or break a design. It can also be a determining factor in how well your website converts site visitors into clients.
Target your audience
A color palette that is well in tune with your ideal client will likely increase their browsing time on your site and thereby exposure to your products or services.
For example, if you’re trying to attract guys hitting the gym, you likely want to avoid a pink and pastel palette and go more for something that is dark and bold.
Accessibility
It is also important to consider accessibility to ensure that you website can easily be viewed and read by as many as possible. Ensure your colors have enough contrast, particularly in terms of background and text, and use sites like Silktide or AccessibleWeb to check how your colors and website look like for people who may not quite have the same vision as you.
Colors that looks good together
For an effective color palette to use on your site, make sure to have at least one light color, at least one dark color, and ideally one contrasting color that you can use as a highlight for important information like call-to-action buttons.
For example, our Victoria Squarespace Template uses pink as a contrasting color to highlight buttons throughout the site.
If you're feeling stuck on how to choose a cohesive color palette, read on to learn how you can use Coolors and Squarespace's built-in color presets to help you out 👇
How to prepare your color palette
One of the best ways to create a color palette that is perfectly aligned with your vision for your business is to start with a moodboard.
Collect a series of images (from Pinterest, Unsplash, or even directly in Canva) that suit the vibe or style that you want for your brand and website.
👉 Read our full tutorial on how to create the perfect moodboard for your business
Once you've done so, you'll be able to easily extract prominent colors that appear in your moodboard to use in your color palette, ensuring that it is right on brand and cohesive with the style you're wanting to achieve!
To do this, you can use the color picker tool in Canva, or a handy app called Coolors. Make sure to collate your color palette HEX codes, ready to be entered into your site.
👉 Read our full tutorial on creating the perfect color palette for your business
Did you know that you can also perfect your color palette directly in Squarespace 7.1 with their newest color palette features? 🙌
In your website, click the paintbrush icon in the top right corner to access your Site Styles, then click into Colors.
Click Edit Palette just below your main color palette preview and scroll down.
Here, you'll be able to choose from a range of presets, upload an image to draw colors from, or pick one color to generate a color palette from.
How to add your custom color palette to your Squarespace 7.1 site
Customize your color palette
In your Squarespace 7.1 site, go to Site Styles (paintbrush icon in the top right corner) > Colors.
This is where you'll be able to add all of your unique custom brand colors in a neat color palette of five!
To customize your color palette, click Edit Palette.
Here, you'll be able to click on each color swatch along the top to customize that particular color by either entering an exact HEX color code, or using the color picker to choose a custom color.
If you've started with a built-in, free Squarespace template, your color palette might look greyscale or quite basic, if you've purchased a premium template, then a more complex color palette might already have been added to your site.
Either way, the same general rule applies for replacing any existing color palette with your own custom colors:
Starting from the far left color swatch, add in your very lightest color. If you don't have 5 colors in your color palette, you can leave this swatch white.
Add your second lightest color to the second from the left color swatch.
Add your highlight or bright color to the centre swatch.
Add your second darkest color to the second from the right swatch.
And finally, add your darkest color to the far right color swatch, or leave it black if you don't have a second dark color in your palette.
Squarespace uses these color swatches, in that particular order, to generate ten varying color themes, ranging from Lightest 1 to Darkest 2.
As such, if you've followed the color order as described above, here is how the color themes will likely populate (though Squarespace does have their own formula!):
The lightest, far left swatch color, will apply to the Lightest 1 & 2 theme background colors, as well as the text color on the darker color themes. We recommend keeping this color close to white so that the text is easy to read on colored backgrounds.
The second lightest color swatch (second from the left), will apply to the Light 1 & 2 themes.
The highlight color in the centre swatch will apply to the Bright 2 theme background, as well as text on the Dark 2 and Darkest 2 themes.
The second darkest color swatch (second from the right), will apply to the Dark 1 & 2 color theme backgrounds.
The darkest, far right swatch color, will apply to the Darkest 1 & 2 color theme backgrounds.
This has been purposefully designed to generate varying yet cohesive color themes which also have enough contrast to ensure readability across your site, meaning that by following this color palette architecture, you will be able to keep your colors organized and working as intended!
If you have more than 5 colors in your color palette, you can add the extra colors in specific color themes to implement more colors into your site 👇
Customize color themes
Back in the Colors menu, your color palette will automatically populate across a series of ten color themes which you can use in independent sections across your site, helping keep it highly cohesive and right on brand.
Of course, you can customize each and every one of these color themes as much as you like!
As you click into them, you’ll be able to independently adjust the color of just about any element across your site with a color from your set color palette, or a totally custom one.
Simply click on the color swatch on the right hand side to customize the color of a particular element.
Switch between the Palette or Custom tabs along the top of the pop up to choose a color that you like.
Use the opacity slider to adjust the color's transparency.
Tip! It's usually best to customize the colors of specific elements as you build your site so that you can see your customizations in action. Note that any changes that you make here apply site-wide wherever you've used that particular color theme.
To apply extra colors from your color palette, we generally recommend taking a look at the auto-generated color themes and seeing which ones you might be least likely to use.
As you click into those color themes, we recommend starting by customizing just the background color to see how that looks. As you build your site and use different elements, you'll be able to go back into your color theme settings at anytime to further customize the colors of different elements.
How to use color themes on your site
Click EDIT in the top left corner of your site to access the editor.
On any section of your site, click on the Edit Section button that appears in the top right corner as you hover over it.
In the pop up menu, switch to the Colors tab and select from any of your color themes.
Tip! Back in your Site Styles > Colors panel, you'll be able to see at a glance which color theme you've used on each section of your site with a handy label appearing in the top right corner with the color theme name. Click on this label to bring up the color settings for the particular theme so that you can easily customize it further!
Customizing text color
In Squarespace 7.1 you can now freely customize the color of any word in a text block entirely independently from your set color palette and color themes, allowing for great highlight effects.
To do this, click on any text block on your site in Edit mode and highlight the text or particular words that you would like to change the color of.
In the formatting toolbar, click on the color swatch icon.
Here, you'll be able to select a color from your color palette or go totally custom!
You'll also be able to do the same with highlights.
As well as text background colors.
How to add your custom color palette to your Squarespace 7.0 site
While color themes style settings are not available in the older Squarespace 7.0, a similar (although perhaps slightly more limited) color customisation menu is also available in this version by going to Website > Design > Site Styles.
Here, you will similarly be able to independently adjust the color of a varied range of elements across your site by clicking on the color swatch icons on the right hand side.
Note! In the Squarespace 7.0, only the Site Style settings of the elements on the particular page that you are on will display. Make sure to navigate to other pages of your site and access the Site Styles again to see new element settings. You'll also notice that the color settings are intermixed with other types of settings so you'll need to scroll down and look out for the color swatches.
Because there is no set color palette or color theme settings in Squarespace 7.0, picking colors is a bit of a free for all and can lead to inconsistencies! To avoid this, make sure to have your color hex codes on hand so that you can simply enter them into the color swatch pop up rather than trying to use the color picker to find the right shade.
To do this, click on the HSL color code and paste in either your HSL or HEX color code.
Use the opacity slider to adjust the color's transparency.
Note! If you are using a template family other than Brine, your color settings may look slightly different or be more limited in terms of customizability. Check the template guides for different 7.0 template families here.
And there you have it! Your brand colors added right into your site to make it look right on-brand. Remember that you can keep adjusting as much as you like! Sometimes a slightly more muted color than the one you might have originally picked for your color palette might work best in practice when implementing it into your site, so don't be afraid experiment!
Want more Squarespace tips? Check out the posts below 👇
Squarespace SEO: Boosting your Site's Visibility with our go-to SEO Checklist
The Best Portfolio Squarespace Templates to Showcase your Work
How to Add a Privacy Policy and Terms & Conditions to your Squarespace Website
How to Connect a Domain to your Squarespace Website
How to customize your Squarespace footer and what to include in the design
If you liked this post, Pin it to Pinterest! 👇🏻
