How to Choose Colors That Will Make Your Brand Stand Out Online

Color is such a huge part of how we experience the world. Everything we experience is made up of different colors. Some inspire and excite us and others can make us feel a bit down.

So what does this mean for your website and brand?

I think one of the hardest things with color is knowing how to apply it so that your brand stands out without being a freak show of colors. There are so many sites where you can get ideas for color palettes, but then what do you do with them?

I put together a quick guide and free printable color scheme kit that will help you choose your brand colors with intention and purpose.

Choose a primary color

The first thing to do if you want to build an epic brand (and of course you do!) is to identify your brand tone. This really means deciding how you want your brand to look, feel, and sound to people.

Once you’ve done that, simply assign a color that matches your brand’s tone. Whichever color you choose will become your brand’s primary color. To help you decide, here’s a list of some colors and the moods they evoke:

Red: strong, powerful, fun, youthful, confident, exciting, loud, vibrant
Orange: friendly, energetic, unique, positive, upbeat, spirited
Yellow: happy, sunny, enthusiastic, positive, cheery, warm
Green: calm, refreshing, healthy, green, abundant, natural, motivated
Blue: open, airy, calm, credible, reliable, safe, serene, trusting, modern
Purple: creative, lush, luxurious, mysterious, regal, romantic, seductive, sumptuous, wise, powerful, strong, safe, timeless, edgy
Gray: neutral, boring, depressing
Beige: neutral, picks up traits of surrounding colors
Ivory: neutral, clean, simple, easy

Red gets more clicks

You know how a red top makes your shoulders look bigger and a pair of black pants makes your hips look smaller? Color has a lot to do with our visual perceptions of size.

If you play with color like this you can make certain elements stand out and grab people’s attention, even when they’re smaller.

Red and orange are like this – they get noticed online. They’re “action” colors. They look bigger than they are and grab your attention pretty quickly. People want to click on red and orange.

Just look at your Pinterest feed. Which color stands out to you the most?

Turn your primary color into an action color

Got it, red stands out more. Buut, what if red or orange doesn’t match your brand personality?

Great question! Let’s say your primary color is blue. You can still make it stand out so people notice and click it. You just have to be more careful with how you apply it.

When you look at this shopping list, which word do you remember?

Apple
Orange
Banana
Pineapple
Lemon
Blueberry
Strawberry
Melon
Kiwi

Pineapple, right? This sounds pretty obvious, but when you have the same colors on a page and then one that’s different, that element is going to stand out more. This is called the “isolation effect”. You’re isolating that one color so it stands out more.

You can use the isolation effect to turn your primary color into your action color. This is just another way of saying that it’s the color you want people to click on. If you choose your color scheme with intention, which I’ll get into next, you can train people on your action color. Basically, your action color needs to stand out from your other colors.

Compare color palettes

I love creating different color combinations. So much fun! Before you choose your brand’s color scheme, play around with some different color palettes for inspiration. Here are a few sites that I like:

Kuler – Want to know what colors go with purple? Use the Kuler color wheel and select a rule (complimentary, shades, compound) to create different color schemes. It will give you the Hex code and RGB values for each color. You can also explore their library for ideas.
COLOURlovers – A community of creatives from around the world who share their color palettes. What I love about this site is that you don’t have to know a color’s Hex code to start getting ideas. If you want an orange color scheme, just search for “orange” and you’ll see tons of different orange color palettes.
Coolors – This one is probably my favorite. It’s a color scheme generator that gives you an entirely new set of colors every time you press the space bar. Once you see a palette that includes your primary color, you can tweak the hue and saturation or even choose a different shade to see how that new color looks paired with the others.
Pictaculous – Super cool and tons of fun! Want to create a color scheme based on a photo or an image? Upload it to Pictaculous and it will generate a color scheme from it, plus additional color combos from Kuler and ColourLovers. Here’s the palette it generated from my image:

Create your own color scheme

Now that you’ve got some ideas for colors to pair with your action color, the next step is to create your brand’s color scheme.

First, a note. It’s fun to experiment with different colors and that’s perfectly okay. At some point, you’ll want to narrow it down to 3-4 colors so your brand doesn’t look all over the place. The most successful brands are strategic and cohesive with their brand elements, and you want to be successful too! So when you think color, think strategy.

Some more thoughts on color schemes:

Every color should have a specific purpose. Don’t just choose colors because you think they look pretty together. Of course you want that, but what’s even more important is how you apply colors to your brand elements, e.g. headings, titles, text, icons, buttons, and links.
As I mentioned before, your action (primary) color is the one you really want to pop. Save this color for your links and buttons.
Choose 1-2 neutral tones for backgrounds. Neutral tones aren’t necessarily exciting, which is exactly what you want. Neutral colors make your action color stand out. They’re similar to white space in the way they open up your page and break up contrasting colors.
Choose a contrasting (and darker) color for backgrounds, headings, and text.
Ideally, your heading color should be different than your action color. This can be tricky depending on your color scheme but is definitely something to keep in mind. If you use the action color only on buttons and links, your readers won’t be confused about what to click on.

If you want, you can download this as a printable kit to help you choose your brand colors. Click on the image below to download the color scheme kit.

Psst…Colors are just ONE of the many brand elements we cover in The Build My Brand Toolkit. With this kit you will create an entire branding system that includes all your visual elements (logo, colors, fonts, social media templates, style guide) PLUS brand copy (About page, Home page, messaging, blog tone and style) so you can build a brand that makes you smile. Click on the image below to learn more!