The Designer’s Guide To Color Theory | Part 2

November 22, 2013 • By Joe Howard • In Web Design

Understanding color and being able to craft an aesthetic palette is fundamental for of any good designer. Whether you’re designing for the web, mobile or doing more general branding work, color plays an integral role in communicating your ideas.

Welcome to part 2 of our 3-part series on color theory for designers. In Part 1 we looked at the history, theory and principles of color, including explanations on key vocabulary. In case you missed part 1, you can catch up on everything here.

In this part, we will focus on the considerations and logic behind different color choices for designers, as well as taking a look at the different meanings of colors. Finally, in Part 3 we will delve into how to create color palettes for various projects using different techniques.

Here’s a quick overview of what we’ll be looking at today:

  • Color Considerations
  • How Color Effects Your Designs
  • Anatomy of Color
  • Warm Colors
  • Cool Colors
  • Neutral Colors

Color Considerations

No matter the project you are working on, whether you notice it or not, color plays an important part of your design. Understanding how subtle variances in hues can effect your work can be a tricky craft. For example a bright, highly saturated red, gives an entirely different impression to a darker maroon.

Furthermore colors generally communicate different values depending on the cultural background of a given person. Which is why it’s important to understand your audience’s heritage and it’s relationship with color.

color_difference_culture In many Western cultures, white symoolizes birth, creation purity and is used in wedding ceremonies. However in many Easter cultures, red is used in celebrations (including marriage), promoting prosperity, success and elegance.

From a more practical sense, there are other considerations to keep in mind depending on the medium in which you are working on.

As we discussed is Part 1, RGB is a device dependent color model, meaning different colors look entirely different on different devices. This is most evident when comparing a low-cost screen to something like an Apple retina display – where colors appear deeper and generally more saturated.

In keeping on the topic of screens, If possible, it’s a good idea to synchronise your work-station’s screen settings so colors appear more cohesive when compared to other devices. A good way of doing this, is to get your hands on a friends or two screens and do some analysis.

Working with colors when designing for print can be a fickle endeavor. As we discussed in Part 1, differences in your screen, along with the CMYK reproduction formula, means your colors will appear different on-screen and in their final printed state. If you do a lot of work for print, you can simply create a palette of colors you often use, and have them printed by your local print-shop. Then use it as a reference to working from.


How Color Effects Your Designs

Color effects your designs in such a predominant way. However as we have discussed, this effect is really subjective. As such, there is no exact science, or formula that dictates what colors you should use for a given project. However there are general guide-lines that will give you an approximate notion of what is appropriate.

I would also like to point out that when considering your choice of color in a palette, single colors by themselves have much less impact than their meaning when combining with other colors. For example, Red by itself is often related to passion, danger, love and excitement, however when combined with yellow it can represent fast-food, communism, or even luxury and celebration in some-cases.

red_color_differences
Another important thing to consider is the relationship between visual hierarchy and color, particularly in web design. A good example of this is keeping the header a lighter, bright color, while the footer is darker. The vast majority of well designed sites on the web today, abide by this rule, whether it be conscious or unconsciously.


Anatomy of Color

Let’s now take a general look at the spectrum of colors and their general connotations. To help make things easier, we will categorizie these colors into warm colors (red, orange, yellow,pink), cool colors (blue, green, purple) and neutral colors (black, white, gray, brown).

Warm Colors

warm_colors

Red

Red_Color_Range

In general red is a strong color, often associated with vivid emotions and passion. It has been shown that bright reds can have a physical response in some people, raising blood pressure and respiratory rates. In some cases red can symbolize nationalism, luxury, or danger.

In design, red can act as a powerful color distinguishing importance, however when used in highly saturated levels it can often be overwhelming. On the other-hand, darker reds can be used to portray elegance.

Common Associations: Excitement, energy, passion, love, desire, speed, strength, power, heat, aggression, danger, fire, blood, war, violence, all things intense and passionate, luxury, elegance, intensity, superiority, success, prosperity, celebration.

red_web_design_1 red_web_design_2 Red_Design_Logo_AngryFile

Orange

orange_color

Orange is a fantastically vibrant and cheerful color. Because of it’s association with autumn, it can often represent change. Orange is generally considered a friendly color, associated with flamboyance, attention, enjoyment, vitality and enthusiasm.

Orange is also considered a creative color, portraying imagination and fun. In design, orange can be used to to grab attention, without the commanding nature of its red counterpart. However, because of it’s fun nature, it is rarely used for more serious matters.

Common Associations: Change, flamboyance, cheerfulness, vitality, enthusiasm, enjoyment, amusement, excitement, energy, balance, warmth, vibrancy, expansive, attention, imagination, creativity, fun.

orange_web_design_2 orange_web_design_1 Orange_Design_Logo_Feron

Yellow

Yellow_Color_Range

Another strong and vibrant color, yellow is often one of the colors of creativity, optimism and imagination. However on the contrary, it is can related to cowardice, betrayal and jealousy.

In design yellow can be used to highlight importance or expression. It can be used in creative contexts as it symbolizes intellectual energy.

Common Associations: happiness, expression, creativity, betrayal, optimism, idealism, imagination, hope, sunshine, summer, gold, philosophy, dishonesty, cowardice, jealousy, covetousness, deceit, illness, hazard, friendship.

yellow_web_design_2 yellow_web_design_` Yellow_Design_Logo_Feron

Pink and Magenta

Pink_Color_Range

Pink is mostly different from other warm colors, being widely know for its relation with feminism. In most cases, pink evokes calmness, sweetness, acceptance and cleanliness. However in other cases it can be related to architecture.

When using pink for design purposes it can promote feminism, creativity, uniqueness and personality. A lot of design and advertising studios use shades of pink in their branding to help promote individualism and creativity.

Common Associations: Love romance, caring, tenderness, acceptance, calm, creativity, feminism, sweetness, cleanliness, innocence, architecture, personality, uniqueness, individualism.

pink_web_design_1 pink_web_design_2 Pink_Design_Logo_AngryFile


Cool Colors

cool_colors

Green

green_Color_Range

Green is the color of nature and generosity. It’s often used to portray a state of cohesiveness, completion and harmony. Green is a color is a really natural color and the is often related to organic natural themes.

Generally speaking, it isn’t used that often in branding other than in products that are related to nature or want to promote restoration. However this only gives it more opportunity for use, as other colors like blue are used excessively.

Common Associations: Nature, calmness, generosity, fulfilment, harmony, money, health, tranquility, achieved, restoration, venom, return, safety, completion.

green_web_design_1 green_web_design_2 Green_Design_Logo

Blue

blue_Color_Range

Blue is one of the most commonly used colors in branding, and incidentally one the most favoured colors among people. There are so many brands, both corporate and social based, that use blue in their communications (think Facebook, Twitter, flikr, Linked-In, Vimeo, Skype, Tumblr and digg or HP, Dell, Microsoft, AOL and paypal).

Blue is a trustworthy color symbolizing water, peace, serenity and security. This is why it’s often used for financial and corporate institutions. In design, blue can be used to promote more generic themes, with less importance on character and personality.It’s also often used for edit and submit buttons in UI design.

Common Associations: Peace, tranquility, cold, calm, stability, harmony, unity, trust, truth, confidence, conservatism, security, cleanliness, order, loyalty, sky, water, technology, depression, appetite suppressant.

blue_web_design_1 blue_web_design_2 Blue_Design_Logo_Mailshare

Purple

Purple_Color_Range

Purple is another mostly underused color in the design world. However purple carries some important characteristics, often used to represent, honor, wealth, royalty, modernism, valor and technology in different contexts.

Common Associations: Royalty, nobility, spirituality, ceremony, mysterious, transformation, wisdom, enlightenment, cruelty, honor, arrogance, mourning, technology, modernism, progression, valor, wealth.

purple_web_design_1 purple_web_design_2 Purple_Design_Logo_View_Formation


Neutral Colors

netral_colors

Black

black_Color_Range

Black, although not technically speaking a color, is used broadly across a range of contexts. However, similar to red it can have contradictory meanings depending on the context.

Black can be used to promote masculinity, force, control, class, premium, and in other cases mourning and death. However when combined with other colors it’s almost always used to contrast.

Common Associations: Power, sexuality, sophistication, expensive, masculinity, class, formality, elegance, wealth, mystery, fear, evil, unhappiness, depth, style, sadness, remorse, anonymity, mourning, death.

Black_web_design_2 black_web_design   Black_Design_Logo_View_Formation copy

White

White_Color_Range Again, not technically a color, however white plays an important role in design. White is often used to symbolize purity and cleanliness. As such, it is used extensively in design to create space and minimalism.

Common Associations: Reverence, purity, birth, simplicity, cleanliness, peace, humility, precision, innocence, youth, winter, snow, good, sterility, marriage (Western cultures), death (Eastern cultures), cold, clinical.

white_web_design_2   white_web_design_1   White_Design_Logo_Pengu

Gray

gray_color_range

Generally speaking, gray is the color of formality. It is often used in corporate branding to promote professionalism and neutrality.

Common Associations: Security, reliability, intelligence, staid, modesty, dignity, maturity, solid, conservative, practical, old age, sadness, boring, formal, professionalism.

gray_web_design_2

gray_web_design_1

gray_logo_design

Brown

brown_Color_Range

Brown for the most part, is warm neutral color. It represents earth, calmness, reliability and dependability. Again it isn’t used as often as a primary color in a design palette, but can be effective in promoting subtle reliability.

Common Associations: Earth, stability, home, outdoors, reliability, comfort, endurance, simplicity, and comfort.

brown_web_design_1 copy

brown_web_design_2

Brown_Design_Logo_foxy-stats


Summary

Before we wrap things up for this part of this series, it’s important to understand that these color-associations are for general purposes, to help give you a broad understanding of color-meaning. In many cases, it is up to you to use your own judgment and cultural background to determine if a color is suitable in a context.


Read the Whole Series


The Designer’s Guide to Color Theory | Part 1

The Designer’s Guide to Color Theory | Part 2

The Designer’s Guide to Color Theory | Part 3

About The Author

Joe Howard

Joe Howard is a hybrid designer, front-end developer and graphic designer. He's also the founder and editor of Pencil Scoop. You can follow him on your preferred social media platform.

Comments