Get Rid of Design That's Holding Your Website Back [Color Palette Tutorial]

About this Squarespace video tutorial

The difference between an amateur website and a professional website is often down to the colors and how they're used. Today, I'll be showing you how to choose your colors from existing assets to make your brand website stand out like you're a massive company with a whole design team on your side by using those same philosophies.

Timestamps

0:00 - Introduction
0:35 - Brand Examples
2:16 - My Site Principles and Working With Strong Colors
5:00 - Creating the Palette
7:29 - Editing Your Palette Within Squarespace
8:44 - Squarespace Refreshes

---

Want 20% off your new Squarespace subscription?

Subscribe to the Designing the Row® email list and get the exclusive code sent straight to your inbox. You’ll get email updates when new Squarespace tutorials are published, but you can unsubscribe at any time.

Unlock the code

Built with ConvertKit

---

Why Poor Colors Can Hold Your Business Back

For almost a decade now, I’ve been designing websites, and people come to me all the time and say that they want their website to look more professional but they don’t know what it is that’s holding them back. More times than not, it’s the color palette that’s doing it. Today, I’m going to show you how to create your own custom color palette as well as showing you quickly the back-end of my Squarespace site so you know how to load in your palette once you make it.

Brand Examples

When you think of the great brands that have stuck in people’s heads over the years, which ones do you think of, and what colors do you associate with them?

Apple: Black, white, grey, and blue.

Zoom: Blue and white with black text.

Coca-Cola: Black, white, and red with a touch of gray.

You can even think about the college that you went to or a college team you follow. Even the weirdest color combinations, like the orange and maroon of Virginia Tech, my alma mater, can find themselves in style because they’re working with strong colors in a restrained palette. Overall, when you have these strong colors, we’re going to be using them sparingly to create a professional looking brand.

My Site Principles & Strong Colors

For my website, Designing The Row, I like to keep my color palette to white, black, grey, and two similar variations on a teal color for the accent. For my secondary website, KatherineForbes.com, I keep those similar whites, grays, and blacks, with the strong color that rounds it all as a stark pink. I’ve built a little challenge for myself to illustrate how these palettes come together.

Let’s pretend I’m making a site for a bakery and this is the picture they’ve given me. I always tell clients that if they don’t have logo colors, I’ll take colors from their primary photos for logo colors so the whole enterprise feels cohesive. I’ve purposefully picked a very colorful photo to show you how you can make a very simple palette. With your picture, come to color.adobe.com/create/image and click extract theme. I’ll drag and drop this donut photo here so Adobe can pull the colors from the image. We do need to edit these so they’ll fit the guidelines for a website color palette, as this definitely isn’t just ready to go off the bat.

Here’s what I would do with this palette.

I’ll take a color like the bright blue on the left, and click on the corresponding circle swatch on the picture, moving it throughout the image to find the brightest white part of the image that I can. Then I go to the right of the image (here it’s the coral spot), and we find the darkest black in this image. Now, you get to decide which accent you want and find it within the image. For the other two colors, find a light grey for one, and find a darker teal (accent color) for the other. That would be my recommendation for how to build a palette out of this image, taking a bright, vibrant image and finding the core colors that can be used to communicate a cohesive brand.

Editing Your Palette Within Squarespace

Now that you’ve figured out what your website color palette will look like, open up your Squarespace website. In any page, as soon as you’re in edit mode, click the ‘paintbrush’ icon on the right hand side to open the ‘site styles’ menu, go into ‘colors’, click ‘edit palette’, and you can then transfer your colors from Adobe into Squarespace. This is because all of the colors you’ve picked for your palette have a corresponding six-character hex code that you can copy and paste into Squarespace just by clicking on the code and pasting it where you want to go.

If you’d like to have a look at my branding template document, feel free to do so here.

A Note: The hex code for pure white is #FFFFFF and the hex code for pure black is #000000.

Squarespace Refreshes

If you’ve gotten this far and are still thinking, “yeah, Katherine, that’s great and all, but can you just handle this for me,” come to the services page on my site where you can learn about the Squarespace Refresh service I’ve started offering, where, with access to your site, I go in and do my magic, making the whole site look more professional for you. Reach out about your website and we can see how we can make it more elevated and professional. I’ll see you in the next one!

---

The latest Designing the Row tutorials…

---