Change Your Squarespace Template Colors

  Image via Unsplash.com

Image via Unsplash.com

A few tweaks give you a custom look

With Squarespace, the sky's the limit in terms of design customizations. I've seen a few highly creative Squarespace sites that look almost nothing like the Squarespace template they started as. To get something far out of the box, you'll like need to work with a Squarespace designer to help you push the envelope. But, the beauty of Squarespace is that you can get a custom look without hiring a designer. You just need to make a few tweaks so that your template matches your style or brand. 

Start by adding a logo, adjusting site colors, and changing site fonts. In this post, we'll talk about adjusting your Squarespace site colors.

YOUR BRAND COLORS

  Image via Design Seeds

Image via Design Seeds

First things first, do you have brand colors? Your colors tell a story about you before you ever say a word. There are a lot of color theories out there. Here are a few great reads on brand color and storytelling:

If you don't have brand colors yet, I recommend going through the color theories first. Then exploring some inspiration.  Here are few great inspirational sources:

Once you find colors you like, you need their hex code. A hex code us a six-digit number used in HTML and CSS to signify color. It's how you will tell Squarespace which color to assign to each element. If you find a color you like, but you can't find its hex code do this: 

  1. Use the digital color meter on your Mac or download a color picker app
  2. Use an online converter to convert RBG (red, blue, green levels) to hex. You can use this converter anytime you see RGB information for a color, but no hex. 

Once you have your colors, store this information in your brand kit/guide/storyboard. You will use these colors in hundreds of ways online and you need to be consistent. 

MATCH SQUARESPACE COLORS TO YOUR BRAND

  Screenshot via Squarespace Support

Screenshot via Squarespace Support

You may edit colors in Squarespace by going to Design and then Style Editor. You can change the vast majority of elements in each template within Style Editor. For information on specific elements you can edit you need to consult your template guide (for example, the Skye Style Editor tweaks). 

Some tips for getting started with Squarespace color customizations:

  • Start by opening the page on your site with the most content. Then go to Design and Style Editor. As you make changes within Style Editor you'll see those changes reflected on the open page. The more content you have on a page, the more you can understand the impact of each change.
  • Start small. Set your background color and body text colors first. These will have the largest impact on your site.
  • You should have one color and one color only that indicates a link. This color should then not be used for other elements in the site. You can, however, use it on buttons if you choose since those are styled versions of a link.
  • Use bold colors sparing. You want your site to have personality, but you don't want to look like a Jackson Pollock print (usually). Think of your bold colors more as sprinkles throughout your site. 

And some tactical tips for changing your Squarespace colors:

download (11).png
  • Squarespace accepts the following color formats (although, I recommend hex codes for brand consistency): hex, RBG, HSL, and HTML.
  • You may open up an existing color and find it in RGB or HSL. That's okay! Just delete the color so the field is completely empty and enter your hex code. 
  • When you enter hex codes, always preface the six digits with the pound sign #. 
  • You want to use a slightly transparent version of one of your colors, Squarespace offers you a slider within each Style Editor element to set the opacity. 
  • You and undo and redo any changes you make up at the top of Style Editor.
  • Save, save, save. For the love of god, save your changes!

As usual, Squarespace has excellent support for your color changing tasks:

BONUS TIP! Many of the Squarespace templates (such as Bedford) do not offer the option to change the line element color. You can do this by going to Design and then Custom CSS and adding simple code. You can find suggestions for simple CSS code in the Squarespace Answers forum.