Color Theory 101

This entry is part 1 of 4 in the series Design Principles 101

Design Principles 101

First impressions are everything. How you look and how you present yourself can determine how you are perceived. The same goes for our design work. The impression that our work gives depends on a myriad of different factors. One of the most important factors of any design is color. Color reflects the mood of a design and can invoke emotions, feelings, and even memories. If you haven’t gone back to the basics of color theory lately, you might find some insights that you’ve overlooked.

Figuring out which colors work well with others isn’t just a matter of chance. There is actually a science behind which colors work well together. Different color combinations fit into different categories, and can be broken down easily. Let’s start with the absolute basics and move on to more advanced color combinations.

Primary Colors

Colors start out with the basis of all colors, called the Primary Colors. These are red, yellow, and blue. If we are talking about screen colors, such as for web devices and monitors, red green, and blue (RGB) are the basic colors which make up all colors found on screen devices.

Secondary Colors

If you evenly mix red and yellow, yellow and blue, and blue and red, you create the secondary colors, which are green, orange and violet. Combining these colors in projects can make for a lot of contrast.

Tertiary Colors

Tertiary colors are made when you take the secondary colors and mix them with the primary colors. These are red-violet, blue-violet, blue-green, yellow-green, red-orange, and yellow-orange.

So, now that you know how colors are made, you can understand how the color combinations on the color wheel model work. Understanding the principles of color combinations will help you to choose combinations that work well together, set the right mood, and create the right amount of contrast within your design work. Next are the basic color combinations derived from the color wheel.

Complimentary Colors

Complimentary colors are colors that are opposite each other on the color wheel. Examples would be blue and orange, red and green, Yellow and purple, etc. Complementary color schemes create a high amount of contrast, but can create a lot of visual vibration when they are used at full saturation.

Analogous Colors

Analogous colors are colors that are next to each other on the color wheel. It is a good idea to choose a set of analogous colors that create a sense of variety. A good example would be blue-green, blue, and blue-violet or yellow-green, yellow, and yellow-orange.

Triads

A triad of colors is a set of colors that are evenly spaced around the color wheel. A triad has a nice variety of colors, but is also well balanced. In the examples above, blue-violet and yellow-green create a lot of contrast.

Split Complimentary Colors

Split complimentary colors take a color and — instead of choosing the color directly across from it on the color wheel — it takes the two on either side of it. In the example above, we chose yellow. The opposite color on the color wheel is purple, but instead we choose blue-violet and red-violet, which creates a lot of contrast and make for some highly cooperative colors.

Square Colors

The square color model takes four colors evenly spaced around the color wheel. In the example above, the colors are blue, orange, red-violet, and yellow-green. This color scheme is really nice and would work well with one strong color and muted versions of the other colors.

Tetradic Colors

Tetradic color schemes are built by creating a rectangle on the color wheel. Select two opposites on the color wheel and then select another color two spaces over and its compliment across the color wheel.

Tints and Shades

A tint of a color is when you take a color, such as blue in the example above, and add white to it. A shade is a hue that has black added to it. You can create a monochromatic color scheme buy using tints and shades of the same hue.

Warm Colors

Warm colors create a sense of warmth and heat in an image or a design. When you see warm colors, you think of the sun, heat, fire, and love (passion). Red is the color of blood, which is warm, and orange and yellow go along with summer. Adding an orange photo filter to an image instantly makes it look warmer and happier.

Cool Colors

Cool colors carry connotations of cool climates, winter, death, sadness, ice, night, and water. Cool colors can be associated with calmness, tranquility, trust, cleanliness. Purple is associated with royalty, because they are supposed to be reserved.

Color Meaning

Red

Red is the color of love and passion. Boxes of candies are red on valentines day. Some are pink, which is a tint of red. Red is also the color of anger and blood. Red, orange and yellow are all found in fire. Red can also mean danger. Stop signs are red, which get our attention and tell us to be careful and look before we proceed. Red is dominant, and when combined with colors such as black, can create a very masculine look. Red commands attention and can set a serious tone.

Orange

Orange represents warmth, but isn’t aggressive like red is. Orange can portray a fun atmosphere because it is energetic and creates a sense of warmth without associated connotations of danger and blood, as with the color red. Orange can be associated with health, such as vitamin C, which is commonly found in oranges.

Yellow

Yellow is associated with the sun and warmth. When used with orange, it creates a sense of summer fun. Yellow can be associated with thirst, and can be found on the walls of many refreshment shops. Yellow can also be associated with cowardice and fear, which comes from the old expression of someone being “yellow.” When combined with black, it can gain a lot of attention. A good example outside of design would be a taxi. The combination gets a lot of attention.

Green

Green is the color of money, so in our culture it is associated with wealth. Since most plants are green, it is also associated with growth and health. It is used to show that products are natural and healthy, it also connotes profit and gain. Combined with blue, green further perpetuates health, cleanliness, life, and nature.

Blue

Depending on the tint and shade of blue, it can represent different feelings, thoughts, and emotions. In imagery, dark shades of blue can give a sense of sadness. An expression that goes along with this is “singing the blues” when someone is sad. Light blue is the color of the sky and of water, which can be refreshing, free, and calm. Blue skies are calming and tranquil. Water washes away dirt and cleans wounds. Blue can represent freshness and renewal, such as when rain washes away dirt and dust. The calmness of blue promotes relaxation.

Purple

Associated from the color of the robes of royalty, purple relates to royalty. Purples with more red can be associated with romances, intimacy, softness, and comfort. Purple can give a sense of mystique as well as luxury. A good example would be the wine website shown below.

White

White can be associated with sterility, due to doctors wearing white and most hospitals being white. Because most artistic depictions of religious figures are completely colorless, white represents “good” and holiness. White can represent cleanliness, such as clean linens and clean laundry. It can represent softness due to cotton and clouds. It can reference mental health due to the white coats and uniforms, white walls, etc. White is great for connoting health and cleanliness, as shown in the optical website shown below.

Black

Black is mostly associated with death, especially in the United States. It can represent decay — due to rot — based on how food breaks down and turns black. Black can represent evil, because it is the opposite of white, which often represents good. It can represent anxiety due to darkness and the unknown. A lot of black in an image can suggest depression and despair, as well as loneliness. However, despite all of the negative connotations, when combined with other colors, such as gold, it can represent luxury. Combined with silver or grey, it can represent sophistication, such as in the timepiece website shown below.

Conclusion

It is essential to understand color as a designer. Everything that you design should take color into serious and careful consideration. The color choices that you make can create a drastic effect on the mood of your work. The right combination can gain attention and convey the right message visually, further driving the message into your viewers’ minds. The emotional side of design is extremely lucrative, and if you aren’t carefully considering your color choices, you should from now on. Your clients will see better results, and your message will have added clarity and strength. Color makes as much of a connection with people as imagery does.

How do you consider the color choices in your design work? Do you have a process of picking out the best colors for your work?

Design Principles 101

Typography 101 >>

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.chrisadamsweb.com Chris Adams

    Thanks for the article.

    Complimentary ? Suggest you mean complementary for all references above in the context of colour theory.

    Chris.

  • TeresaK

    What a great color theory primer! (pun intended) Am bookmarking so that next time a client has no clue what colors they want/need, I’ve can help them make great decisions.

  • http://www.facebook.com/zurmat Sarah Jackson

    its is rainbow colors right ?

    • karla

      yes it is kind of a rainbow

  • http://creatiwittyblog.com/ Arfa Mirza

    i loved this post!

  • http://alia2net.com/ Michael

    Thanks James,
    a great article. Very helpfull.

  • http://her-kaleidoscope.co.cc Brooke

    I loved this article. I definitely need to take more time in understanding how colors work with each other.

  • Lowell

    Excellent Article! Best i’ve seen on color theory in a long time. I want to add some food for thought.
    I did the style sheet of a forum a while back in shades of grey and blue. I got a lot of feedback from the users about problems with blue/green color blindness. They had problems with certain colors being adjacent to the grey and eachother. I made some adjustments and it worked out OK, but Just wanted to mention it. You can go to wikipedia and search for “Color blindness”.

  • http://www.ijacobs.com ornette

    Sorry to be pedantic, but it should be complementary colors, i.e. those that complement each other.(a thing that contributes extra features to something else in such a way as to improve or emphasize its quality).

    If they could speak, they might be complimenting you on your article (congratulations or praise expressed to someone) which is full of interesting information.

    It took me a while years ago to accept R,B,G as Primaries when all my life I had known them to be R,B,Y, until someone explained the difference between transmitted and reflected light.

  • SeijinS

    Thank you for your post. The “Color Meaning” section was both interesting and very helpful.

  • Owen

    Excuse me, sorry to correct anything but i’m currently enrolled in a graphic design couse and i am actually in colour theory. Red, Blue and Yellow are not actually the true primary colours. At least not all of them. The RGB being the primary colours of your computer screen is correct. But in matter such as paint and ink the primary colours are magenta, cyan and yellow. Again, sorry for correcting you.

  • Ben Cowell

    Great feature. I’ve been working with colour (we spell it like that over this side of the pond) all my life and its second nature. But this made me think twice and get my Pantone books down and admire the options. In other words – terrific!! BC

  • Fred K

    Primary colors, like prime numbers, by definition must not be able to be broken down into other colors, and thus form the basis for all other colors. This is why blue and red can not be primary colors. The true primary colors are cyan, magenta, and yellow. Mixing cyan and magenta makes blue, and mixing magenta and yellow produces red. If you don’t believe me, try it with markers. Or check out the CMYK color model wikipedia page.

  • chris

    i thought it was wonderful and full of infomation

  • James George

    Thanks everyone for the great “compliments” and I am glad tht you found this article so useful! I am glad that I could help to make color matters much clearer for fellow designers. I appreciate your kind words and wonderful feedback!

  • Rashmi Kapse

    Brilliant yet simple article on colours and how to use them best. Im not an interior designer, nor a graphic artist, but it still is very interesting to know how colours can bring your home to life!! (or wherever else you want to use them)

    I am always on the lookout of ways to make my house look better..classier and this is the perfect article to figure out where I’m going wrong :)

    Thank you James George.

  • Paul

    Hi James

    Just a quick note, when optimize image for the web, especially ones like those with plain colors, use png.

    jpg is best for photos.
    png is best for solid color graphics.

    :)

  • EP

    Working in photoshop’s color picker the primary colors are RGB (red, green, blue). This article has the primary colors being Red, Yellow, and blue. Which color wheel should be used when applying color theory to web design? Could the RGB model color wheel be applied to print work and the RBY model to web work?

  • Makayla Mota

    Red is a primary color , and nothing can make it.

  • http://bridgingpoints.com BridgingPoints Web Design

    Using the right colour for your design does impact especially in web design, We had even witness a increase 10-20% conversion using different colours.

  • mlr

    luv, luv this color guide.
    one of the best I’ve seen
    …thank you!

  • http://www.izmirdavetiye.com.tr davetiye

    I think it was very nice and red in color matching looks

  • http://jakartafail.com/ Alfian Effendy

    Nice info, thanks for sharing.

    But I think blue is more look professional, you didn’t mention that? right?

  • Mohammed Naseer

    Are there any good articles on how to apply these principles from the color wheel to an actual website. A walk through on how to do color design for your web page. If there are any articles on DesignFestival or else where, I would be grateful if you could kindly point them out to me please – thanking in advance.

  • Mohammed Naseer

    Articles or any other resources for that matter….

  • http://timgallantcreative.com Tim

    For those who are a bit confused by what are primary colours on the colour wheel: It must be understood that there are different primary colours when different media are involved. The light-based colour models involved with e.g. computer monitors resolve to RGB, while most print media are based on CMY (cyan, magenta, yellow).

  • http://www.nicehangers.com/ woods

    good job

  • http://www.Repro.ir repro

    nice designs

  • http://www.quiltsbyjen.ca Jennifer

    A great post on colour – I am a quilter and use the colour wheel for fabric selection all the time.

  • http://streetsmash.com Sonny

    Wow.This is a superb explanation of the science of colors. It explains everything concisely. It’s a great guide to designers. I will bookmark and share this one to others. Thanks a lot! :)

  • http://www.wordpressthemesminimal.net Minimal Jonh

    I’ve been thinking a lot about Color Theory but always finish the project with at least one color excess.
    Great post, thanks.

  • http://www.madebytailor.ca Ping Song

    thanks for sharing.. great article on the color theory. Bookmarked it

  • zenny

    Im workiin on a project. My theme is passion. I can use only two color. 1 i choose is black. I know red means passion. But dont want to use dat cuase dat doesnt look good wth my entire work. Want use pink cause its darker shades are mean passion. Want to that what are the name of those shade? Will these combination look as passionate as as red? Combining pink with. Black does have negative meaning? Pls rply to the soonest

  • asif

    thanks

  • http://www.boostinspiration.com/ Waheed Akhtar

    Great read and excellent examples.

  • http://www.fulldiziizleyelim.com full dizi

    Very Nice ! Thanks…..

  • http://stickerdeals.net/ Sticker Deals

    this is really a great concept about colors! Now i understand the point that how big brands choose the colors which should be used in their brand logos or websites etc!