My Grandmothers’ Recipe for Website Color Palettes
Colors can send a message when put together...
They have different temperatures (warm and energizing or cool and calming) and they can convey emotions to support the story you want to tell.
This is especially true when you’re testing sample colors for your website refresh.
Here’s a behind-the-scenes look at how I strategically pick colors for a custom website built on Squarespace.
But first, about my two grandmothers👵🏻
Both my “Grandma Maga” and “Abuelita Rosa” have sadly passed years ago but were known as elegant and stylish women—and to be 100% truthful I can probably guess they’ve never touched a website.
But classic style is eternal, no matter the format. I’ve learned from them that elegance comes from simplicity and cohesion comes from a clear visual heirarchy.
That means, not letting your eye get drawn into too many different competing directions and coordinating visual cues so there’s balance to what you’re seeing. There’s nothing flashy about these two women but they are striking in their own ways, and I love that.
I took their simple and inspired style principles to create this classic & time-tested website design color strategy.
Aesthetic website color palette ideas for Squarespace
Squarespace offers a perfectly simplified color editor for DIY website builders.
You get 5 slots to program custom colors. While you may want more, this keeps things simple for now which communicates elegance.
(There are ways to add more colors to your site, but let’s start with the simple version for now)
My Grandmother-inspired website color strategy
Start by selecting the 5 colors below, place them in the right spot in your Squarespace color palette, and enjoy an easy way to get the classic aesthetic you’re looking for in your website.
Select your “Black” - this will be your main text color. It doesn’t have to be black, but I would recommend a darker color that is readable on a light background. Put this color in the last spot on the right of your Squarespace color palette circled in red above.
Select your “White” - this will be your main background color. It doesn’t have to be pure white, but try lighter shades to show contrast with your “black”. This will keep your site easy to visually digest. Put this color in the first spot on the left of your Squarespace color palette.
Select your “Main” brand color - this will be the main color you’re known for. I typically pull this color from any brand material that’s already been made like a logo. If you don’t have this brand color yet, pull it from the photos you’ll use. This will make your website look cohesive and thoughtful. I use the bright blue from the dress I wore in my photoshoot and I’m definitely known for this color now! Put this color in the 4th from the left spot of your Squarespace color palette.
Tip: if your brand has many colors, pick one that coordinates best with the photos you’ll be using. You can add other brand colors to section backgrounds and other marketing materials outside your website.Select your “light” - This color goes in the second from the left slot in Squarespace. Honestly, it can be any color. I like to use colors just a few shades darker than my “white” to soften the high contrast. You can also pull this from photos and my off-white is actually a sand-inspired color to complement my photography.
Select your “bright” - this will be your main button color. I recommend contrasting colors to your “main brand color.” Since my main brand color is a bright blue, I use yellow as my bright color to stand out against it. Put your “bright” in the middle of the Squarespace color palette so most buttons immediately show up as this color.
Your “bright” can also come from your brand material. If you don’t have any yet, I recommend using oranges, yellows, pinky-reds because our eyes are evolutionarily trained to spot these colors quickly.
(Fun fact: school buses and street signs in the United States are painted yellow and red for exactly this reason!)
Once you add these 5 colors to your palette on Squarespace, you’ll see that additional color combinations automatically get generated for you. These are called “themes” and I use these to separate out different sections of a website visually.
You can do this – and you’re not alone.
There’s a lot more strategy to Granny’s Color Palette Recipe but this will definitely get you started. Here are a few more resources to wrap this up.
