Color is such a huge part of how we experience the world. Everything in our world is made up of different colors. Some inspire and excite us and others can make us feel a bit down.
What does that 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 this quick guide that will help you choose (and apply) 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
Ok, so red stands out more. But what if red or orange doesn’t match your brand personality? 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?
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 okay at first. But then you’ll want to narrow it down to 3-4 colors so your brand doesn’t seem a bit 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 make your action color stand out. They also work like white space to 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.
Probably easier if I just show you what I mean, right? Here are some simple color schemes I put together to give you an idea of how to balance your action color with secondary colors on your website.
Was this post helpful? What’s your brand’s color scheme? I’m happy to take a look and provide some guidance if you need!