Design Basics: Understanding Color

When it comes to website design, logo design, and branding, one of the most important elements to consider is color. Now, choosing color is a lot more than just picking random colors because you like them. You need to make sure you’re actually understanding color and the psychology behind it.

“Why?” you ask. Well, here’s an example:

When you think of the color red, what’s the first thing that pops into your brain? Is it anger? Power? Blood? Well, while these might be the first things you think of, someone else could be thinking of warmth, love, or fire. These associations are based on human experiences, both personal and shared, as well as cultural influences. So, now that you have a basic idea about the range of reactions that color can bring out, let’s talk more about how you can use that in your branding and design.

Qualities of Color

To start off, what is color? Well, in order to have color, we have to have light. Color is the aspect of an object that is caused by variations in the light that is either reflected or emitted by that object. Some colors will absorb this light, while others will reflect it. The human eye can only see the colors that are bounced off of objects.

Now, we don’t define color based off of this basic science alone. There are four key qualities: hue, saturation, value, and temperature, which we also use to define color. These qualities are related to our perception of a color’s basic, essential nature as waves of light.

Hue

Hue is color in its purest form; the identity of a color. This makes hue the most absolute quality of color out of the four intrinsic color attributes. However, a color’s hue is relative. Two colors could both be considered blue, but when they’re next to each other, subtle variations in temperature or value can be seen.

Saturation

Saturation describes a color’s brilliance or intensity. A saturated color is very vibrant and intense, while a dull color is often described as desaturated. Here’s an example:

Saturated color vs. Desaturated color

The red on the left is bright and saturated, while the red on the right is less intense and desaturated.

There are also other factors that affect the perceived saturation of a color. For instance, some colors, like yellow, are intrinsically more saturated than others. Bringing an intense color together with another inherently intense color will dramatically increase the brilliance of both colors. The background color on which another color sits will also make a difference in the apparent saturation of the color in the foreground.

Value

Value is how dark or light a color first appears. Just like with hue and saturation, value is relative. One color could be considered dark until it’s compared with another, darker color. For example, when compared with yellow, brown is a dark color. But when compared with black, brown is a light color. In fact, an absolute value identity is found by comparing the similarity of a particular hue to a particular tone of black.

Temperature

Last but not least, we have our last color quality: temperature. Temperature is a subjective quality that is related to real-world experiences. For instance, colors are intrinsically “warm” or “cool” based on our associations, and these colors can remind us of things like heat, the sun, water, ice, and so on. The relationships between the temperature of colors don’t need to be drastic to show change; subtle changes in warmth or coolness can be easily seen when the two colors are directly juxtaposed.

The Color Wheel

color wheel

The color wheel is something that you’ve probably been taught since childhood. The wheel is a great tool for understanding color and color relationships. It consists of primary, secondary, and tertiary colors, and also displays color harmony, or how colors relate to one another.

Primary Colors

Primary colors

There are three primary colors: red, yellow, and blue. Primary colors are very bright and dramatic and are rarely seen together as a trio. They cannot be made by mixing other colors. These colors are often used in food brand logos.

Secondary Colors

secondary colors

The secondary colors are orange, purple, and green. They are created when two primary colors are mixed; red and yellow make orange, red and blue make purple, and yellow and blue make green. Secondary colors have a lot in common and go well together as a trio, appearing soft and inviting.

Tertiary Colors

There are six tertiary colors on the color wheel. The tertiary colors are blue-green, yellow-green, yellow-orange, red-orange, blue-violet, and red-violet. Tertiary colors are made by mixing a primary color with a secondary color. These colors are often used as accents in a color palette.

Analogous Colors

Analogous colors

Analogous colors are next to each other on the color wheel. They are typically grouped by 3’s around the color wheel and consist of a primary, secondary, and tertiary color. An example of an analogous color group could be red, red-orange, and orange, or green, blue-green, and blue.

Monochromatic Colors

Monochromatic colors

Monochromatic colors are in the same family on the color wheel. They start at the darkest color and then move towards the lightest color. As you can see above, the arrow is highlighting all of the colors in the same monochromatic orange family.

Complementary Colors

complementary colors

Complementary colors are direct opposites on the color wheel, such as yellow and purple, blue and orange, etc. These are typically used as accents of one another, like a red dot in a green field.

Color Psychology

Color brings a variety of psychological messages that can be used to influence viewers. These messages are related to our experiences, whether they’re personal, shared, or cultural. Therefore, different colors have different effects on the nervous system, impacting our emotions and our mood.

Warm Colors

Warm colors

Warm colors occupy one half of the color wheel. They consist of reds, yellows, pinks, and oranges. Warm colors are often reminiscent of things like fire, sun, and love. They can evoke feelings from warmth, to energy, to rage.

Red

Red is a powerful primary color. It is often associated with danger, passion, energy, excitement, and determination. This can be used to promote an energy-fueled, determined kind of brand. Some examples of red logos include Adobe, CNN, ESPN, Puma, Canon, and the American Red Cross.

Yellow

Yellow is a color that can grab a viewer’s attention and invoke very strong feelings. It is usually thought of as a happy, creative, and sometimes childish color. It can be used to promote fun, upbeat, and youthful brands. Brands that have a yellow logo are McDonald’s, Snapchat, Nikon, Walmart, and Post-it.

Orange

Orange can also be very bright and attention-grabbing. However, using orange can be tricky, because an orange that’s too bright can cause a viewer to feel fatigued. Orange is associated with feelings of confidence, success, joy, and enthusiasm. It’s perfect for brands that want to promote an overall cheerful and confident feeling. Orange logos can be found at Home Depot, Harley-Davidson, Nickelodeon, Fanta, and Soundcloud.

Pink

Pink is typically thought of as a soft, feminine color. It’s usually grouped in with romance, passion, and playfulness. It’s a great choice if you want to make the color red a little bit sweeter, and is usually used to highlight or contrast something. Some pink logos include Barbie, Cosmopolitan, Pink by Victoria’s Secret, and T-Mobile.

Brown

Brown is seen as solid, just like the Earth. In fact, it’s often referred to as an Earth tone. It’s typically associated with austerity, ruggedness, friendliness, and nature. It can also be used to convey dependability or reliability. Brown is usually used as a background color. Companies with brown in their logos include Hershey’s, UPS, A&W, Cotton, and Dreyer’s.

Cool Colors

cool colors

Cool colors occupy the other half of the color wheel. They consist of greens, blues, and purples. Cool colors can remind viewers of water, ice, and other natural elements. They’re often associated with calm feelings, but they can also bring up feelings of sadness.

Green

Green has long been a symbol of fertility, but it has other associations as well. It can be used to convey calmness, nature, freshness, growth, harmony, and money. Green is also the most restful for human eyes and is often used to promote green or natural products. Examples of green logos include Animal Planet, Starbucks, Tropicana, Landrover, Heineken, and John Deere.

Blue

Blue is the color of many natural elements, such as water, ice, and the sky. It symbolizes trust, loyalty, wisdom, faith, and stability. Blue can be used to promote products that are related to cleanliness, truth, and dependability. Companies that have blue logos are Samsung, Facebook, Oral-B, Ford, GE, and Dell.

Purple

Purple is a symbol of royalty. It combines the energies of red and blue, creating a spiritual, luxurious, and magical feeling. However, not all shades of purple are created equal. Light purple can evoke romantic feelings, while dark purple can evoke gloom and sadness. Purple can be used to promote luxury brands and children’s brands, as 75% of children prefer purple over other colors. Purple logos can be found at NYU, Hallmark, Cadbury, Wonka, and Twitch.

Neutral Colors

Neutral colors are often used to add contrast or white space to a design. They can create stark differences between elements of a logo or draw attention to others. But that doesn’t mean they don’t have their own associations.

Black

Black is often used to convey evil, drama, power, security, mystery, or elegance. While it does have a wide range of associations, it is typically seen in a negative light. However, it can be used to promote a powerful, secure, or mysterious brand. Some examples of black logos or logo elements include Adidas, Chanel, Louis Vuitton, Cartier, and Gilette.

White

In some cultures, white symbolizes purity or wedding celebrations, but in other cultures, white is associated with death. However, white is typically seen as a color of cleanliness, calm, security, innocence, and sterility, and it is seen as positive when compared to black. White is perfect for promoting high tech and clean brands, such as technology or health-related products. Companies with white logos or logo elements include Nike, The North Face, Mercedes, Coca-Cola, Jeep, and Uber.

Gray

Gray is typically unattached, somewhere between black and white. It can be considered dull or uninviting, but at the same time elegant and formal. Gray can be used as a contrast element in design, or to promote feelings of maturity and understanding. Some examples of gray company logos include Audi, Tiffany & Co., Apple, and Nissan.

Understanding Color & Logo Design

Okay, I know that was a lot of information, but just bear with me a little bit longer. (This is the good stuff 😉).

Now that we’ve talked through the basics of color, its qualities, and the psychology behind some common colors, let’s discuss how this understanding of color can help you put together a color palette and take your logo to the next level.

A Short Guide for Creating Color Palettes

Your color palette is what you will use for all kinds of branding: social media, business cards, logos, website design, product labels, t-shirts, etc. So it’s important that your palette has a strong mix of colors that complement each other and convey the values of your brand. Here are some things to consider when creating a palette:

  • Do I understand color psychology? You need to know which colors evoke certain emotions and use those emotions to your advantage.
  • Do I know which colors work together? This is a crucial part of your color palette. If you’re trying to attract customers, but your brand has clashing colors in your design, you might not draw in as many people as you would like. Remember your primary, secondary, and tertiary colors, as well as saturation, warm vs. cool colors, and complementary colors.
  • What message am I trying to send? If you don’t know what message you’re trying to send, you’re going to have a really tough time deciding on colors. Ask yourself what you want to convey, and then ask yourself which colors make you feel that way. Consider using monochromatic colors or analogous colors with a complementary color. Just be careful not to use too many colors, because this can confuse your message and fatigue your viewers.

After asking yourself these questions, it’s time to put it all together. You can use different shades and tints to expand the basic colors of the wheel. From there, try taking a few shades or tints, and putting them together with a pure color that is at least three spokes away on the color wheel. Finally, add some neutrals in. Voila, now you have a color palette that you can refer back to when creating all different sorts of branding and marketing materials.

Recipe for Great Logo Design

Now that you have your color palette created, you can move into applying it to your logo. Of course, when your logo is in its early stages, I would recommend staying away from color. This can cause you to choose a design based solely on the color, rather than the design and what it conveys.

There are three basic concepts when it comes to deciding the colors for your logo. First, brand personality.

Create a Personality

Your brand values and personality are what make you, you. Take into account your tone, the cost of your product (luxury vs. affordable), the era of your product (modern vs. classic), and so on.

Make Associations

After you’ve figured out what your brand’s values and voice are, you need to make associations between those values and colors. After all, certain colors evoke certain feelings and personalities. If you want to show that you’re trustworthy, try using blue or brown. If you want to convey elegance or luxury, try purple, white and/or black.

analyze Your Competition

Before giving a logo your final approval, it’s a good idea to look at your competition. Learn more about how similar brands use color in their branding and marketing efforts. Take a look at the colors that are typically used in your industry, and consider what associations they have.

Ready for a New logo?

If all of this color theory has got you excited for a new logo, get in touch with us! We’d be happy to help you map out the path to a logo that you and your customers love.

Thoughts or Questions?

Our blog does not accept comments, but we want to know what you think!  Tag us on Twitter to get the conversation started or contact us.