76 How To Use Color In Logo Design Effectively

Tweet

When studying color theory we are given an understanding of the color wheel and the harmonious relationships that can be forged between these brothers of reflecting light… It is here that we are given a cheat sheet on how to use color effectively to communicate the right message.

Below we use this knowledge to go behind the scenes of color theory in logo design while looking at various case studies of logo designs that use these principles. Enjoy.

The Color Wheel – Our Cheat Sheet.

This wheel, that shows the relationships of colors, is a handy little tool to understand. Without going into any great detail of how the colors of the wheel are established (which is pretty interesting to know), we’ll just tip or toes into the water.

The panels that have an outline above, with their linking lines, show the relationships colors have. For example, complementary colors are the colors directly opposite each other. In our illustration above (the first wheel highlights the relationship), red and green are directly opposite, so they’re complementary. Just as the blue on the left and the yellow on the right are complementary, the orange and light blue, and so on.

These aren’t the be-all and end-all of color combinations obviously, but they’re good places to start when choosing what colors you might want to use for a project. As you’ll see in the following examples, sometimes you might use three out of four tetrad colors, or go for an analogous harmony but stretch it out one more and skip one.

The wheel is our simple guide into the world of colours – something to use when you find yourself in a place of bother, or something you may choose to ignore. With that in mind, sometimes one may decide to ignore the wheel, but work with colour meanings and psychology instead. It should be noted that it isn’t exactly a science. Ask a hundred people what red means and you’ll likely get dozens upon dozens of different answers – none wrong. But again, it’s a great starting point and gives you insight into how your audience may instinctively perceive something you’ve put together.

Color Meanings & Theory

Color can make or break a design so it is vital that you know what colours mean and what they can communicate. Below are some ‘meanings’ of color. [Source]

• Red evokes aggressiveness, passion, strength and vitality
• Pink evokes femininity, innocence, softness and health.
• Orange evokes fun, cheeriness and warm exuberance.
• Yellow evokes positivity, sunshine and cowardice.
• Green evokes tranquility, health and freshness.
• Blue evokes authority, dignity, security and faithfulness.
• Purple evokes sophistication, spirituality, costliness, royalty and mystery.
• Brown evokes utility, earthiness, woodsy-ness and subtle richness.
• White evokes purity, truthfulness, being contemporary and refined.
• Gray evokes somberness, authority, practicality and a corporate mentality.
• Black evokes seriousness, distinctiveness, boldness and being classic.

---

Visa – Complementary

This is a great place to start. This is as straight as it can be – direct complementary colours, no ifs, no buts. Yellow is directly opposite blue, so there isn’t a lot to talk about in this regard really, other than the yellow is a little orange, but let’s not too picky. Let’s have a look at the meaning of the colors.

Blue is a color often associated with trust, loyalty, royalty, friendliness, wisdom and peace. It can also be associated with the less noble feelings such as depression, but given the context, not an association easily made—especially with our optimistic, wealthy and joyful yellow sitting calmly on the shoulder of the logo.

Remember, colors have a multitude of different meanings for different people – it’s all about context and the brand as a whole.

Wisdom, wealth and trust — what more could one ask for from a company at whom we throw wads of cash?

---

Samarra – Tetrad.

When it comes to tetrads, things can get a little dicey. Giving four colours equal footing is risky business, so it’s often better to have dominant colours and weaker colors – the Samarra’s logo is a good example of such a situation.

Our two dominant colors dance together as a perfect complementary pair, with the two others giving them a little support as minor players.

This isn’t exactly a perfect tetrad – our two minors are complementary to one another, but not perfect partners for the two majors in regard to a tetrad. They’re close, but off by one panel. The lighter orange is closer to red on our color wheel and the blue is closer to green. In fact, the major colors are a little off as well, but being tints, we’ll give them a little room to move to help explain the harmony. It is a great example of taking color theory as a base on which to work from but not necessarily to hold as gospel.

---

McDonalds – Loosely Analogous.

How could I possibly write on colors in branding without making mention of one of the most effective uses of color in history? No one short of the Nazis, terrifyingly enough, has managed to use a combination of colors in such a recognizable and powerful way.

When I was younger I saw a documentary in which the McDonalds logo was discussed. I particularly remember a man making mention of the feeling that the red and yellow evokes – hunger. At the time, this idea fascinated me for at least a moment as I remember wondering how that could even be. Being a child, I probably put it down to magic or elves or.. something. It’s fun being a kid. Flash forward however many years and we have Wikipedia, with, under it’s entry for color psychology; “Studies show that red can have a physical effect, increasing the rate of respiration and raising blood pressure; red also is said to make people hungry.” So maybe not elves after all.

Red can understandably cause a feeling of hunger—it’s the color of the flesh, blood and health – maybe it isn’t only a modern day thing, maybe it’s an evolutionary association we have? Red also cues thoughts of speed, which is what fast food chains pride themselves on.

Then there’s the yellow. Again, Wikipedia informs us that yellow is the colour of joy and happiness, sociability and friendship. With their focus on children on the playground and friends grabbing a quick bite whenever out, yellow seems like an obvious choice. If you can associate your business with being part of any outing routine, you’re doing something right.

Ironically, while this combination has undoubtedly influenced many, many fast food chains, it’s also the colors of danger, death and panic – although some do think of these when eying the golden arches. There is an example further down of how pre-existing connections can be ignored, with the FedEx logo.

Or, you know, it’s just ketchup and mustard.

---

Koloroo – Tetrad.

This is a fantastic combination of colors – they scream Australia. Sunburnt deserts, beautiful beaches, nature and sun – it doesn’t get much more Australian than that. Symbolism: check.

Light colors that overlay and dance with one another in the shape of one of our treasures. If you’ll notice, the red of the head and feet of Skippy contrast well with the light blue that dresses the name. If the colors were in reverse order within the illustration, this one might have come off as tacky – looking as if the intent were to have the colors graduate between the illustration and the text. Not a great look in my opinion – might even have looked like a printing error. The contrast shows a deliberate thought of how the illustration and the text would interact with one another visually.

As for harmony? Simple – it’s a perfect tetrad.

---

9Rules – Complementary with a slide.

From red to green, from flame to flora. And an interesting use of complementarily harmonious colors.

Red and green are perfect complementary colors, with all those between in our logo hitting almost all other colors (in a 12 panel colors wheel) between them. A lovely use of riding the spiral of colors in an effort to evoke passion (the red), growth (the graduation of size and change in colours being in step) while representing nature (the leaf) and gentleness – not often the feeling one gets from a technology company.

It’s often good to go against the grain, as I found with the next logo.

---

FedEx – Kinda, sorta, analogous.

Orange and purple are analogous at best – you know, if you skip a couple of steps and make your purple closer to blue than red. But color harmony isn’t the reason these players has been brought to the grounds today. No, it’s because of the power they have together through the strength of the branding used by this shipping giant.

Color harmony theory might not work in favor of this combination, and nor does color psychology to any great extent, no matter how many drops I try to squeeze from various sources around the web.

The colors just work. Neither is weaker than the other, neither one quite what you’d expect from a shipping company. The branding is the opposite of what companies following McDonalds did – it doesn’t go with the expected. It isn’t the standard blue and red of mail delivery.

Choosing the opposite of the norm, going against the standard or expected, helps set a strong contrast between you and them. It helps you stand out. While everyone else might be blue, you’re purple, them red, you orange. Not a great departure from the norm really, but one strong enough to make a difference.

---

Sports Link – Split Complementary.

Another almost perfect example of color harmony. Sports Link uses a split complementary.

The symbolism of the colors works well for the client too. The blue symbolises tranquility, trust, coolness, wisdom and mobility. The green; life, nature, spring, youth, good luck and vigor. The red is associated with passion, energy and strength. I don’t want to say perfect, but for a sporting company—well, you’ll excuse me for thinking it might just be.

The colors are light without being too vibrant and shocking, helping ground the company as a serious business. This combination of colors is one you could probably easily find on anything that is aimed at children, from movie posters to toy packaging. But the subdued, almost subtle colors, gives this logo some feet on the ground.

It all just fits, doesn’t it?

Rules are Made to be Broken

Clearly, the rules that color harmony lays before us aren’t laws. At best, the are merely guides, to be followed if one chooses, but also ignored or used as nothing more than a starting point. The same can be said of the meanings behind colors. Different cultures see the symbolism of different colors through different eyes. Different, different, different. But this isn’t a bad thing by any means.

Red and blue were traditional colors for mailing, then FedEx came along. McDonalds set a standard in using red and yellow for the fast food industry. This is where the beautiful spark of creative thinking starts to ignite. Nothing is set in stone. It use to be that light blue was the color of girls, and pink the color of boys. Things change.

The designer is in a position of power because of this. If something is considered and understood, then a monumental shift can occur in the result. Just because every other business in your client’s area uses green, it doesn’t mean you need to develop a logo of green. Discover why they use it, their reasoning for it, and see if you can give the same effect with red, or blue or orange.

In closing, it might be best to say that if there were a strong platform on which the mantra ‘to break the rules, you must know them’ can sit upon, then surely it is the platform of color.

Technology affects logo design in different ways, one of which is the applications of the mark. Just a short while ago this would mean that designers were responsible for designing a mark that would reproduce well when faxed, while this is still true it has become less of a necessity. One of the new applications that logo designers are faced with that is arguably even more difficult is creating a mark that can scale down to the 16×16 pixel dimensions of a website’s favicon.

What are the options?

There are a number of options that a designer can take when applying a logo design to a favicon. Below are three ways to convert your logo design to a favicon successfully.

1. Show the Full Logo or Optimized Variation

If the original logo is simple enough this is a great option. It is very likely that the original mark is too complex to accurately render at such a low resolution. It is also recommended that the vector mark be adjusted to better fit the low resolution of the icon, for more information see the article Icon Design Explained by icon design expert Jon Hicks.

2. Show a Segment

Often times when the mark is too complex to use in its entirety, a small yet distinguishable portion of it may be used instead. Doing so creates a visual reference to the mark and identity without having to attempt and fit complex detail into such a small area.

3. Pull Away from the Identity

It is also entirely possible that the favicon can be treated as an entirely new design problem. In this scenario it is common to see the overall identity of the company / service / product applied to the favicon in an entirely new way.

FavIcon Examples

Below you will find some examples of the options mentioned above.

1. Full Logo & Optimized Variations

Hick’s Design – http://www.hicksdesign.co.uk/

37signals – http://www.37signals.com/

FANCAST – http://www.fancast.com/

Coudal Partners – http://www.coudal.com/

2. Segments

Ars Technica – http://www.arstechnica.com/

Twitter – http://www.twitter.com/

Nintendo – http://www.nintendo.com/

GOOD Magazine – http://www.good.is/

3. Identity Extensions

Makefive – http://makefive.com/

Facebook – http://www.facebook.com/

Flickr – http://www.flickr.com/

XBOX – http://www.xbox.com/