Shopping Cart

How to craft a kickass color combination for your brand & website

by Kaylyn Monk
love it? share it.

There’s been bucket loads of research in the area of color psychology that you could literally spend weeks combing through. You can find everything from what color to paint your baby’s room to make them cry less to what color will make your business appear trustworthy. It’s easy to get overwhelmed and make choosing colors for your brand more complicated than it actually is. My advice: forget the hoo-ha and instead keep it simple by focusing on building an authentic brand. The colors that you love and are naturally drawn to? They should be your brand colors.

“Picking brand colors that reflect your personal aesthetic will not only lead to an authentic brand, but will also make crafting a consistent online presence a breeze.” #thatsgolden

Imagine this: being able to fill your Instagram feed with beautifully consistent images that you didn’t have to spend hours staging because your brand colors match your lifestyle. When you make your brand match you, instead of making you match your brand, that is true authenticity (and it’s the secret to making your business easy breezy).

Get inspired & uncover your brand color mood

You’ve probably already chosen a brand color mood without even knowing it. The colors that you surround yourself with on the daily are a great spot to start for inspiration. For example:

What does your office look like? Or if you’re working the corner of your living room on a desk you picked up for free on Craig’s List, what would your dream office look like?

What are the main colors that flood your closet? What color is that favorite sweater that you wear so much it might as well be a uniform?

What does your favorite coffee shop or restaurant look like? How would you classify its vibe and style?

When it comes to brand color inspiration, Pinterest is your go-to. If you don’t already have a moodboard created for your brand, you need one. A moodboard is the foundation of building your brand vibe and always the first place that I’d recommend you start. Yes, I’m giving you permission to call Pinteresting work so take advantage of this rare opportunity and go pin-crazy.

Once you have a brand moodboard checked off your to-do  list, step back and take a look for common colors throughout your pins. What colors keep popping up? Classify the common theme of colors into one of the following color moods:

SOFT: light & muted // DEEP: rich & moody // BOLD: bright & vibrant

Crafting your kickass brand color combination

Now that you’ve determined your brand color mood, let’s get into the specifics of how to pick the colors to make your kickass color combination. Chances are you haven’t seen a color wheel since kindergarden when you learned how mixing blue and yellow paint made green. So let me introduce you to your new BFF in color picking and go over a few color combination rules to help you get started.

 

Keep it Simple: Monochromatic

Choose 1 color and fill your palette with different shades, tints, and tones of this single hue. By far the simplest color combination you can create but it can be very striking, especially if you're going for a minimalist brand vibe.

How to craft a kickass color combination for your brand and website with monochromatic colors

The Famjam: Analogous

This is monochromatic with a twist. Analogous colors are a group of three colors that sit right next to each other in the color wheel, making them within the same color family but all in a different hue.

How to craft a kickass color combination for your brand and website with analogous colors

 

Opposites attract: Complementary

Uses colors that are on the opposite side of the color wheel. A complimentary color palette plays with contrast to create an unexpected eye candy combination.

 How to craft a kickass color combination for your brand and website with complementary colors 

Three’s a Crowd: Triad

Uses three colors that are evenly spaced on the color wheel. Similar to complimentary colors, triad plays with contrast but in a more subtle way.

 How to craft a kickass color combination for you brand and website with triad colours

 

Think of these color rules more as a starting point to get you going and not as the end all and be all. You can mix and match the rules or you can completely ignore them and come up with a truly one-of-a-kind color combo. As you’re playing around with some color combinations, keep in mind that you’re going to want to create a color combination with colors for each of the following categories:

Main (1-3 colours)

These are your go-to colors that you want your dream clients & customers to associate with your brand. They’ll be used in everything you do to create a consistent brand experience, so choose wisely!

Pop (1 color)

This will be the color that you’ll use to pop the key elements of your website that you want to draw attention to. For example: all of your call-to-action buttons. One thing that has been researched like crazy is what makes customers click the BUY NOW buttons and it’s always a pop of color that turns a browser into a buyer.

Neutral (1-2 colours)

Mix in some neutrals that you can use as background and text colors. Play around with different shades of neutrals to pick something unique. Instead of going for straight up black (#000000), maybe go for a dark charcoal grey (#333333).

Back-up (optional)

Having a couple colors in your back pocket can help add some variety. You won’t use these colors on a regular basis but you’ve got them set aside for when you need to shake things up a bit while maintaining brand consistency.

Here's an example of what Gold Prism Creative's brand color combo looks like broken into the categories.

How to craft a kickass color combination for your brand and website

 

 

Nifty tools to help you pick your brand colours

Here are the tried and true tools that I use all the time for creating brand color palettes:

Adobe Color CC: This nifty tool will help you build your color palette based on a color rule or color mood. To use the color rule tool, you can choose a color rule and then play around with the color wheel to craft your brand color palette. Or you can use the color mood tool which is pretty amazing and kind of mind blowing at the same time. All you do is find an image that you feel represents the colors you want to capture with your brand, upload it by clicking the camera icon in the top right corner, then it automatically pulls the colors from the image and creates a picture perfect (literally) color palette for you. Mind. Blown.

ColorZilla: Fall in love with a color on someone else’s website? Here’s how you can find the exact hex code for it:

  1. On Chrome, add the ColorZilla extension
  2. Click the color dropper icon in your browser and select “Pick Color From Page”
  3. Hover over the element on the webpage that you’re curious about the color
  4. Copy the color hex code from the window that appears at the top of the browser

Color Hex: This is a great tool to use if you need to convert your color codes from hex to RGB, or vice versa. It also shows you shades and tints of a specific color as well as suggested color combinations based on color rules.

 

Building your brand color palette is a bit of a tedious process. After a while, all of the colors are going to look similar. Once you get what you think is your final palette, I’d recommend sleeping on it and returning with fresh eyes the next morning just to be sure. Tweak as necessary until you have something that you love!

Got a burning question about brand color combos? Let's chat in the comments below!

Kaylyn Monk

founder, designer + developer

Brand crafter & website designer for solopreneurs who want to kickass online. I quit my engineering career, chased curiosity, and built the business of my dreams. Now I want to help you build yours.