Color Psychology: How to choose the best color palette for your Squarespace website to optimize conversion?
Spring colors, Summer colors, Autumn and Winter Colors. Have you ever thought of color palettes as Seasons?
This concept was brought to my attention by the talented Fiona Humberstone in her practical book: How to Style your Brand: Everything you need to know to create a distinctive brand identity.
In this blog post, I'll be sharing the importance of colors and how their key seasonal attributes work to influence conversion rates, as well as the meaning behind the most common colors used.
Finally, I'll share with you how to create your own custom Squarespace Color Palette.
Get access to OUR FREE MASTERCLass:
CONTENT
How do colors influence website conversion?
What are the different seasons of color?
What do different colors mean?
How to pick your Squarespace Colour Palette?
Color Palette Tools and Resources
1. How do colors influence website conversion?
Colors work their magic on us at a subconscious level. The shade, the hue, the saturation, the luminance... all of it affects how we perceive a color, and thus how we perceive a brand or website.
The combination of colors in the form of color palette is just as important as the individual color themselves. If done well, color palettes can create feelings, instill trust, provoke positive emotions and enhance your brand!
Different colors give off different emotions, and different seasons give off different messages.
It's important to understand the powerful role in which colors play and how they are able to influence purchasing decisions, thereby affecting your conversion rates.
2. What are the different seasons of color?
Just like the seasons of nature, you can think of color as having seasons - and each season has its own 'attributes' that influence how people feel. For example:
Spring
You would expect Spring to be light, bright and colorful with pretty pastel tones. Think soft pink and yellow petals blossoming.
Spring personality: fun, youthful, expressive, creative, inspiring, enthusiastic, optimistic and bubbly.
Summer
Think soft delicate colors of florals, which represent grace, romance and elegance. Perhaps slightly faded shades like dusty pink or hazy sunset hues.
Summer personality: elegant, romantic, dreamy, graceful, stylish, chic.
Autumn
As Autumn arrives, you see golden leaves laden upon rich organic soil. Pumpkins and mushrooms are ready for harvest and everything feels earthy, fiery and warm.
Autumn personality: passionate, energetic, authentic, lover of nature and the outdoors.
Winter
The contrast of snow and bark brings about wintry feelings of cold, but also of luxury. Think cool ice blue, glittering white snow and long dark nights.
Winter personality: luxurious, edgy, strong, dynamic, focused.
3. What do different colors mean?
Blue
Blue is associated with: intelligence, trust, safety, communication, efficiency, loyalty, logic, soothing, reflection and calmness.
Blue is often used in web design palettes and logos for industries that require a high level of trust, such as insurance, banking, and cybersecurity.
Blue can also denote sadness; in some countries, blue is a colour of mourning. Use soft blues to relax your audience, and vivid blues for an air of credibility.
Relaxation and trust will drive conversions.
Green
Green is associated with: harmony, balance, refreshment, universal love, rest, restoration, reassurance, environmental awareness, equilibrium and peace.
Green will forever be associated with the environment. It calls to mind summer, outdoor activities, healthy foods, and overall wellness. Websites that advocate environmental causes or sell outdoor products often have a green theme.
Along with blue, green is associated with relaxation as it’s easy on the eyes. Green is a great way to put visitors at ease.
Green also projects decisiveness. Use green to give readers the feeling of being healthy, lively, and content. This will create the sense that everything will be better with your product or service.
Brown
Brown is associated with: earth, ruggedness, reliability, stability and nature.
Brown is a warm, natural colour that is most often used to market organic, raw, and natural goods. For example: compostable cutlery or Fair-Trade organic cotton.
Purple
Purple is associated with royalty, spiritual awareness, containment, vision, luxury, authenticity, truth, quality.
It can be used to communicate creativity, imagination, authority, sophistication, power, wealth, prosperity, mystery, wisdom, and respect.
Yellow
Yellow is associated with: optimism, confidence, self-esteem, extraversion, emotional strength, friendliness, creativity.
If you want to cheer up your readers and make them feel optimistic and warm, the colour yellow can help make that happen. Some people even claim that this sunny colour makes them feel younger. Yellow is often seen on parenting, wellness, and travel websites.
Use yellow to make your website (and your brand) feel approachable, welcoming, and friendly. Careful not to over do it though, as yellow can be quite overwhelming. Yellow accents also work well on neutral palettes, livening up content without impacting the professional look and feel.
Orange
Orange is associated with: warmth, security, sensuality, passion, abundance, fun.
Orange is also associated with fire, making it similarly passionate to red, but without as many negative associations. Orange works well as an accent in a more neutral palette, and to catch the eye in ads and other marketing materials.
Many websites use orange for their call to actions (CTA). The combination of red and yellow that produces the secondary colour orange is behind this logic. Like yellow, orange gives off warmth and a sense of cheerful welcoming, while the red in the mix fosters that sense of urgency — which is exactly what your CTA should have.
Red
Red is associated with: passion, lust, excitement, love, energy, and movement. It also has some potentially negative associations including violence, fire, anger, and danger.
Red conveys a sense of urgency. If your goal is to promote a sale, then using red in ads or graphics immediately draws attention, making the viewer eager to engage or interact. The colour red is incredibly stimulating, which makes it highly popular in sales promo.
Black
Black (in the advertising industry) is associated with: elegance, sleekness, glamour, sophistication and power.
But it's also associated with oppression, death and evil in many cultures.
Use black to emphasize the unique, elite sense of your brand or product, making visitors want to be a part of that special club. Black accents create a sharp contrast to other page elements, and play well with vivid colours for a sleek, modern feel.
White
White is associated with: cleanliness, order, clarity, purity, innocence and simplicity.
It’s also closely associated with hygiene and cleanliness, which explains its wide use in the healthcare industry.
Many news websites use white in their website palette to let content stand out, and foster a feeling of honesty that will result in conversions.
4. How to pick your Squarespace 7.1 Colour Palette?
Go to Design > Colors > Color Palette - Edit
It will be automatically set to Designer Palettes as default, so you have a range of gorgeous palettes to choose from.
If you hit the drop down icon, you'll also see three other options:
Picking by Image Select an image and it will draw it's own color palette from the image.
Picking by Color Select a color and it will give you a variety of color palettes that are: complementary, monochrome and analogous.
Picking by Custom Color You have full control over the color tone, shades and color pairings.
My tips for Custom Color Palettes:
make your accent color bold and attractive. This will be used for all your buttons and CTAs, so it's really important that it's a strong color that makes people want to take action.
white - pure white can be extremely straining for the eyes long term, so go for something just a notch down, but still looks white (just without the eye strain). I love using #fafafa
black - don't make your black pitch black. Find a very dark color and use that instead. It's less straining for the eyes.
5. Color Palette Tools and Resources
Here are some of my favourite color tools and resources for designing my color palettes:
Chrome colour picker extensions
Love design tools and always on the look out for more creative recommendations? Well, I love sharing them!
Sign up to get access to my list of favorite design tools and resources - I know you'll get so much value from them!
How do you pick your color palette? Let me know if you found this helpful and feel free to leave your questions in the comments below! You can connect with me personally @arohavisuals