Color Me Impressed

Color is one of the first thing visible to your user. When creating content for the web, we want to make sure we are using the correct colors to display the message we want.

Recognition

The colors you decide on will immediately set the mood for your website. Choosing the wrong colors could give the user a feeling they shouldn’t have on your site, and that is not what we want. Let’s look at some different brands and the colors they use.

Each color has some adjectives that are associated with it, as well as some brands that use this color. Notice how for the most part, each brand has a somewhat similar product. You don’t see any tech companies using that green, and you don’t see many food products using that purple. Even if it is not what you are trying to do, this is how user’s associate colors.

Research by the Institute for Color Research reveals that people make a subconscious assessment of an environment, person, or product within 90 seconds of initial viewing — and between 62% and 90% of that assessment is based on color alone.

Applying this idea of Color to Web Design

Of course, just because the color of your branding is red doesn’t necessarily mean you should have a red background or red text. Using these colors subtly on your page is the key. The Coca-Cola Website is an awesome example of this.

The main color of their branding is red. Although red is barely used on their website, it is still the color used the most. Notice how majority of the times it is something to click. The banner at the top and the buttons. Making this one of the only colors is a great way to encourage the user to click on these.

Let’s take a look at a competitor, Pepsi. Pepsi, is basically the opposite. Their big color is blue, and they really use it. Personally, I think the Coke site works a little better, and here’s why. For me, they are using the blue a little too much. If everything is blue, nothing is blue. I think they would be better off with a similar approach to Coke, and using blue to highlight areas where they want the user to look or click. Since everything is blue here, nothing seems more important than something else to me.

White Space

White space is misunderstood. A lot of people see empty space and think “Why isn’t there something there?” “Did everything load?” but really the bit of emptiness is what makes your head not explode while you are processing information. If there were nonstop information, the user would feel overwhelmed.

Let’s take a look at the landing page for Square Space. Here, there is plenty of empty space, yet nothing really feels wasted. The most important message for them is front and center, and it speaks for its’ self. This strikes me as confident and professional.

How Do I Know What Works?

Each color gives off a mood for your website, and that is also true for the relationships between colors. When choosing your color combination, you are conveying a message to your user. If you decide on a color scheme that includes red and orange, the end result would be a bold and optimistic space you are wanting your user to see.

Analogous Colors

Analogous colors are three colors that are all right next to each on the color wheel. You can see in the graphic above, the dark purple, blue, and lighter blue all land next to each other, making them analogous.

Complementary Colors

Complementary colors are going to be colors that are directly across from each other on the color wheel. In the graphic, the orange and blue are directly across from each other, which are the exact colors Pepsi used on their web page shown above. Typically, complementary colors are great for buttons or navigation menus. Things you want the user to notice, but not too much so that it takes away from your main point.

Triadic Colors

Triadic colors are all equally spaced around the color wheel. In the above graphic, the orange/yellow, the light blue, and the dark red all have a triadic relationship. Triadic is kind of like a combination between both analogous colors and complementary colors.

A very helpful tool for finding colors that work well with each is Adobe Color. It is completely free, and very easy to use. You select what sort of colors you want to see on the left, I have Analogous selected, then you drag the circles on the color wheel and it shows you what colors are Analogous for that selected color. It then gives you the hex code for those colors as well. This is really a designer’s best friend. The link for that tool is https://color.adobe.com/create/color-wheel.

What’s Next

There are lot of things to consider when it comes to color on a website. I think the main takeaway here is this; What do you want the user to feel while they are on your site? Do you want them to think your product is fun or do they want to be taken more seriously? Color is a great way to establish the experience you want your user to have.