using color as a branding element on your website | video collab with mariah althoff

Pull up a chair and pour yourself a drink because I’ve got a TREAT for you today!

I’m got a really fun collaboration to share with you and I’m so excited for you to check it out!

As a custom web designer who also offers branding packages, I naturally get asked a lot of branding questions. I’ve received a lot of questions about color and branding lately so I decided to answer that here today. But to make it a bit more interesting, I invited my friend Mariah Althoff to join in me and we’re talking all about how to use color effectively on your Squarespace website!

Mariah Althoff is a visual branding expert and web & graphic designer who has worked with a seriously impressive roster of clients. From solopreneurs to small businesses all the way up to Walmart (!), Mariah knows her stuff!

In this video, we’re chatting all about how to use color effectively on your Squarespace website. It’s basically a conversation between friends (#onlinebizbesties) but we’re sharing lots of practical information and lessons you can apply to your own Squarespace website. I know you’ll get a lot out of our tips & recommendations!

If you’d rather read a blog post than watch a video, no worries - I’ve got you covered with all the information below.

This is the second video in our branding and Squarespace website collaboration series, check out the other posts/videos here:

The 4 most important branding elements for your website

Alright, let’s jump right in. Enjoy!

How to use color effectively on your Squarespace website

Click play on the video or watch it on Youtube

Choose 1-3 Dominant Colors for your color palette

Color palette has 1-3 dominant colors
Use these most often in branding across your website, other marketing materials, social media, etc.
If you use too many colors on your website, it won’t feel cohesive and will look too colorful which isn’t good for user experience
Can always search “color palettes” on Pinterest for inspiration
Color palette is influenced by the type of brand you have. For example, a wedding photographer might pick soft pastel palettes (pink, ivory, etc.) vs construction firm might pick greens and browns, law firm might pick navy blue or red)

Check out Mariah’s blog post on How to create the perfect color palette for your brand.

Use the rest of your brand colors as accents

2-3 accent colors
Use these colors for things like link colors, hover colors, icons, images and illustrations, etc.

Keep colors consistent

All header types same color (i.e. H1 are all pink, H2 are all navy, etc.)
All buttons same color, depending on size
Set up site stylings in Squarespace to make sure that colours are uniform across site

Button color

You want the most attention grabbing color in your palette to be your button color
The buttons will be your CTAs (e.g., “book a meeting” or “buy now” and you want those to jump off the page for better conversions
Best color options – Red, Orange, Yellow, Green, bright pink - all great to grab attention on the webpage
Worst color options – Black, White, Brown, Grey - neutral colours blend in and don’t get clicked on as often
Different colours for different sized buttons (small, medium, large - set in Squarespace site styling)

Heading/Text colors

Consider hierarchy when choosing heading colors - H1, H2, H3
Set colors in Squarespace site styling
You probably don’t want your H3 colors to pop more than your H1
Make sure they’re colors that are easy to read - not too bright or light
Avoid colour in body text
Color in headers breaks up long sections of text on page

Background color of website

If in doubt, choose white background for your website
Clean & simple trumps everything in design
Squarespace templates default to white backgrounds so follow that and add in color as accents throughout the website using site styling. Use color in smaller chunks or sections.
Can use colored backgrounds for blocks or sections of your site to break up the content (e.g., on Index pages)
If you do use a full colored background, don’t make it a bright one
Use a colored border as a compromise if you do want to use a bright color

Final Thoughts

Well there you have it, I hope you’ve enjoyed learning about how to use color as a branding element on your Squarespace website. Thank you so much for checking it out and thanks Mariah for joining me!

Be sure to watch the video conversation between myself and Mariah and let us know if you have any question - we’d love to hear from you!

The 4 most important branding elements for your website

Connect with Mariah Althoff:

Website : mariahalthoff.com
Free Facebook group: DIY: Design It Yourself
Subscribe to Mariah’s Youtube channel

Additional Resources:

Now it’s your turn to tell us, how have you used and included color on your Squarespace website? Do you use colour sparingly or is it all over your site? Have you updated the site stylings on your Squarespace’s back end yet? Anything you’re going to change now that you’ve heard our tips? We’d love to know so leave us a comment below!

* indicates affiliate links (Mariah’s codes)