Setting the Mood: Choosing Colors for Your Site

Life is better with color and even more amazing with color that attracts the right audience and showcases your brand’s personality. Are you ready to learn more about how to uncover and use the best colors for your site? Then let’s get rolling!

Why does color matter? 

Color creates moods. What do you want people to feel when they land on your site? Even more importantly, does that represent your individuality and character as a brand, while appealing to your ideal clients? That’s a lot of boxes to tick for a color scheme, but you can get there.

Color is one of the first things people see when they click that URL and end up staring right at your site. Whether they realize it or not, whatever color they see is stirring up some sort of emotion inside them—and it can be positive or negative.

You need to make sure the color you use creates the mood you want for your audience. A mood they will carry with them throughout the whole experience with your brand and as they interact with your site.

Start here—Discover your brand power words.

It’s easy for people to say, “well, just go out and pick colors that resonate with your brand.” That’s all well and good, but HOW do you do that? We love the following approach for determining colors that represent your brand’s personality.

If you have an established brand or even just created your logo and visuals recently, you have a wonderful starting place for your site. Either way, this activity is enlightening to go through to see your brand’s personality and how that can shine through your choice of color.

Gather power words that represent your brand. You don’t have to start from scratch here, a great way to identify the personality of your brand and determine powerful words that align with it is to take a brand archetype quiz. If you Google this, there are so many out there, here’s a couple of our favorites:

• VisionOne’s Archetype Quiz – This is a super quick quiz that will give you a fast answer to your brand archetype with a bit of an overview to get you started!
• Kaye Putnam’s Brand Personality Quiz – This one is a little longer but so much fun to take! At the end, you get a breakdown by percentage of your top brand archetypes. Then you can dive in a little more and read all about each one.

We even took Kaye’’s quiz ourselves when we were going through a recent brand refresh. Our top archetype—The Girl/Guy Next Door! This particular quiz gives you your top four archetypes and what percentage of each shines through in your brand. Our runner ups were The Explorer, The Magician, and The Lover. Don’t forget you can extract words from any of your archetypes if there’s some you want to use together!

Once you’ve got an idea of your archetype, you have a better way to grab your power words. Take our archetype the “The Girl/Guy Next Door”—some power words that illustrate our brand personality are togetherness, family, belonging, and friendships. 

You can expand these words even further with quick word associations!

• Find other related words using a fun tool like Visuwords. You could use a regular thesaurus, but why when you can see them in an interactive mind map?! If you want just a standard thesaurus, you can check out PowerThesaurus.
• Think about things that represent your power words. What symbols or situations come to mind when you think of these words. For us, friendships can happen over an ice cream cone, enjoying something sweet, having fun, laughing, and enjoying life! Our motto is, success is sweeter together. So we think of sweet things when we think of our brand. For your own brand, think of a situation where you felt one of those words, what was happening around you, use that as a starting point.

 

Next up, create your palette. 

You now have this mess of power words and symbols, so what do you do with them? Start looking for photos that visualize these words for you. Here are some quick tips on how to start finding those photos:

Find images that represent your power words. Start with a free stock photo tool like Unsplash. Plug in some of your power words and associated words you discovered and see the type of photography that comes up, do any of these feel like you and your brand? If so, save them off into a file for the next step!

Friendships over Ice cream cones were something we could visualize with our brand. We found this photo that put our words into an image.

Photo by Clark Douglas on Unsplash

 

Extract colors from images you find. Take the images you find and create an initial color scheme! Two of our favorite tools for this are Coolors.co and Adobe Color.

In the Coolors app, click Generate, followed by the camera icon to upload any photo, then simply drag the dots around to capture colors from any part of the photo. From there, you can open the palette in the generator to play with it even more or just view the palette.

In Adobe Color, simply upload your photo, and the dots start where they think is best, but you can still move them around!

Find colors that represent your power words. Did you ever wish there was a Google for colors? Well, there is—and it’s called Picular! Just plug in any word hit enter, and related colors pop up. Here’s what happens when we plug in Belonging and Friends. We’ve got some gold hues that pop up here, and we use a variation of gold in our brand!

 

At the bottom of each color box, you see three options—a HEX color code, a pin, and an image icon. Click on the color code to instantly copy it to your clipboard. Click on the pin to pin the color to the top in your palette—and what’s even more fun is that palette stays there while you search for another word, and you can keep adding to it from other words! You can also hover over or double click the image icon to see the photo the colors were extracted from.

 

Now that you have an initial color scheme take a look at those colors and the feelings they evoke. There’s a whole science to this—literally. Research on color psychology is everywhere.

Think about the gold from our color palette. Gold can give off a sense of friendliness, which is right in line with our personality. However, too much gold can also come off as overly proud or egotistical. The pink in our palette gives a nice balance. Pink represents optimism and a sensitive heart that counteracts the potential negative feelings of gold.

Your colors should work together to create the feelings that put your brand on display and draw your audience in. If you want to read even more about color meaning, this site has some pretty extensive information on color psychology.

Put your color into action. 

You’ve got your color scheme! Let’s talk about how to put all that hard work into action on your site.

Think about contrast. Make sure you have at least one light and one dark color, you’re going to need this when designing your site.You want to make sure you have high contrast between text and background to increase your page’s readability. Contrast is simply making two elements appear different enough so you can focus on one. You don’t want your text blending into the background and getting lost!

Keep your color scheme manageable. Don’t use too many colors. Stick to 3-5 colors in your scheme. Any more and your site starts to look like a cup of rainbow sprinkles that just got knocked over onto the floor—chaos!  Use darker or lighter shades of those if you need more range.

Create a common visual language.  Style tiles help create a shared visual vocabulary for your brand and site. This is where you can apply your color scheme to different sample web elements as an overall guide. In your style tile, you will visually show what a headline, sub-headline, body copy, links, and buttons will look like on your site. Not sure what this looks like in reality? We have created a style tile template for you to download!

Now that you have your colors and style tile ready, they can go to work on your site and truly represent your brand! We threw a lot of information at you in this post, so if you need to refer back to some of the tools and techniques we mentioned, we have a Brand Power Words Worksheet and a Gimme That Color Guide for you to help you along.