Color Choosing in Squarespace

Choosing colors for a new Squarespace site challenges me. There are 16+ million colors to choose from, times the number of elements in the Style Editor that I'm able to colorize. That's some scary math right there, and it helps a lot to reduce my options.

Drawing from Preexisting Artwork

Figures 1 and 2 show recent sites that I've stood up on Squarespace, and I'm pretty happy with their color schemes. Figure 1 is the "easy" case, a redesign for a cycling club's website. There was a logo in play that had been designed by a professional graphic artist. She'd done a good job in choosing colors, and all the club members were more than happy her work.

Figure 1. Colors drawn from preexisting logo

Figure 2. Colors worked out mathematically

My job with the cycling club's site was really not to choose the colors at all. In fact, I looked at my job specifically as being to not choose new colors, but only to arrange those already in play from the logo. All the colors in Figure 1 and throughout the rest of the site are drawn from the club's logo.

Honing In Through Mathematics

Figure 2 is the harder case. The site is for my wife's sewing instruction business, and I struggled two long evenings until midnight each day just in working out a color scheme.

First I chose a headline image to use on the site. That's the sewing-machine-needle image that you see at the top. Next I challenged myself to use a colored background rather than my usual white. Then came the difficult work of choosing colors that would play well together.

Going directly to the color-picker on Squarespace would have been a mistake. Instead, I relied upon mathematical patterns worked out by color experts. I further used Adobe Color as a tool to quickly visualize the colors falling from those patterns, choosing to let the tool do the math on my behalf.

Figures 3 and 4 show two color palettes from Adobe Color. The first is based directly on the background color of my headline image. I loaded that image into Paint.NET and sampled the background using the dropper tool. That led me to color #CFC7B4, which is the center color in Figure 3, and the base color for that palette.

Figure 3. Colors complimentary to the image

Figure 4. Compatible shades for backgrounds

I liked the look of #FFFDF7 from Figure 3's application of the complementary color rule. So I took that color and plugged it in as the new base color, which you see in the center of Figure 4. Doing so and applying the Shades rule led to the palette in Figure 4, and it's two of those colors that I chose as content background and page background for my wife's business site.

Creative Application of the Rules

Why the extra step of taking a color from Figure 3 to use in generating a new palette in Figure 4? To be brutally honest, I was in a rut and was desperate. I was closing in on my second late evening of trying one set of colors after another. I needed something to kick me out of the rut that I was in, and generating a color palette one step removed from the headline image did the trick.

In hindsight, the idea is brilliant. The content area plays well with the headline image because their background colors are complementary, as seen in Figure 3. Then the page's background color of #E5E4DE (the rightmost in Figure 4) plays well with the content background because they are compatible shades. Realizing I could generate a new color palette for each step that I moved away from the headline image was a big part of getting myself unstuck.

Different Palettes for Background andForeground

Another idea that helped tremendously was the idea that I could create a completely different palette for text and other foreground elements. Perhaps my text colors did not need to be derived directly from the headline image's background. Trying to make that derivation work was leading to an awful lot of low-contrast color combinations. I need to break away from those. So I dedicated Figure 4's palette to background colors and took a new tack entirely to find my foreground.

My wife likes blue, so I did end up going to the color-picker and dialing it around until finding a shade of blue that seemed pleasant enough. Plugging that shade of blue into Adobe Color led to a shade of green that seemed to "pop" against the content background. I liked the green for call-to-action buttons and similar elements, so I chose the green as the base color for the new palette that you see in Figure 5. Then I manually dialed-down the bright pink that you see toward the right to finally end up with the palette in Figure 6.

Figure 5. First cut at foreground colors

Figure 6. Dialing down the bright pink

Figures 4 and 6 are the color palettes for the site. Figure 4's palette provides the background color choices, and only two colors are used from that palette. Figure 6 provides the foreground colors for text and call-to-action buttons, and for horizontal rules and other foreground elements.

Still An Art

Choosing colors is still an art. I can't make the activity into an entirely mathematical exercise. Nor do I wish to, because where would be the fun in that? What I can offer you is that making use of tools like Adobe Color to help narrow your choices and hone in on viable color combinations can be a tremendous time-saver when deciding on colors for a new website. Use the tools, and use them creatively to sort through color options faster and produce professional-quality results.

Tip: Don't overlook choices that are already made. I'm preparing to stand up another small-business site this month. The owner has a logo in the process of being designed, and I'm awaiting the color results from that effort to inform my choices of color on her website. My job in this case will be again to fit in with the choices another designer has already made.

Learn CSS for Squarespace 7
9.99

Learn CSS for Squarespace 7 is a seven-chapter introduction to working with CSS on the Squarespace platform. The book is delivered as a PDF file that is readable from any Windows or Mac – or even Linux! -- computer. A complimentary sample chapter is available. Try before you buy.

View the complete description for more details.

Add To Cart