Here’s the easy way to choose colors for your website
Whether you design your website on Squarespace or some other platform, you’ll be making color choices that are unified and compatible across your website, from the text to the buttons to the colors in the images. Designers call these color choices a color palette.
A color palette may also extend beyond your website to other branding materials: your logo, social media, business cards, brochures, and merchandise.
Here’s how I simplify choosing colors for clients’ websites:
Keep color psychology principles in mind to set the right vibe for your website.
Use a preset Squarespace color palette if you find one you like.
Or create your own color palette of three complementary colors, plus white or near-white and black or near-black.
Use color psychology principles for the right vibe
Tons of studies have been done about color choices and their use and influence in marketing materials. This color chart from Eric Ruzindana's article on LinkedIn is a helpful summary of color meanings. I often use blue in websites because it's favored by both men and women. I also think you should use colors you're drawn to if your personality and your services are intertwined.
Let Squarespace build your palette
The easiest way to choose colors is by using the palette builder in Squarespace. You can find these tools in Site Styles - Colors - Edit Palette.
Preset Palettes
Select one of the preset color palettes if you see one with colors you like.
From Image
Find an image you like and choose a palette generated from the image’s colors.
From Color
Define one color you like and choose a palette generated with complementary colors.
Customize a generated palette
Even if you use the palette builder, you always have the option of adjusting the colors if they’re not exactly what you want. You do that by going to Site Styles - Colors - Edit Palette and then adjusting the colors for one or more blocks in your color palette.
The Squarespace palette builder tools
Choose your colors individually
If you use another website platform or you don’t like the palettes that Squarespace offers, you can choose individual colors. These are the five types of colors I recommend.
White or near-white
Light neutral color (gray, tan, or a light version of a strong color)
Vivid color (the color you want to use for headings and buttons)
Darker color (the color you want to use for darker sections or other accents)
Black or near-black
You can employ another custom color on your Squarespace website by adjusting the color of a design component for a color theme. I use this technique when I want a section background of a stronger neutral color or buttons or headings of a specific color.
Examples
The most popular method for choosing colors for my clients is by using the colors in a Home page image. We also look at the colors in a logo if the client has one. Here are some color palette examples, ranging from subdued to bright.
Soothing colors inspired by white sand and blue sky (ReikiwithKatieDaly.com)
Natural, earthy colors that match the stars of the website (SweetBriarKennel.com)
Strong, reassuring colors that accentuate fresh food photos from a nutritionist’s website (CalmGut.com) and Substack (CalmGut.Substack.com)
Bright and vibrant colors that express wellness and holistic medical care (WuWeiVitality.com)
Look what I did to my own website
I like changing up colors and photos on my website every year or so. While writing this article, I found myself restless and ready to move away from the quiet blue tones I was using. So from a colorful photo I found on iStock, a new color palette came into service. Time will tell how long I like this version of my website!
This is the color palette on my website (as of this writing anyway). Purple is my enduring favorite color and I was in the mood to try out bright photos and colors. (KerryAThompson.com)
Choosing custom colors for a website is one of my favorite things to do. The colors you use for images, headings, buttons, and other decorative elements really set the mood of the website. If you already have a logo, the colors may be influenced by the logo colors. Or the banner image you choose for your website's Home page can influence the color palette. Keep the psychology of color in mind to make sure the tone and business vibe of your website are intentional. Have fun with it. Even if you don’t think you know a thing about colors, you may surprise yourself once you start browsing through colors and realize you do have preferences!
