Color Theory for Designers, Part 1: The Meaning of Color

Advertisement

Color in design is very subjective. What evokes one reaction in one person may evoke a very different reaction in somone else. Sometimes this is due to personal preference, and other times due to cultural background. Color theory is a science in itself. Studying how colors affect different people, either individually or as a group, is something some people build their careers on. And there’s a lot to it. Something as simple as changing the exact hue or saturation of a color can evoke a completely different feeling. Cultural differences mean that something that’s happy and uplifting in one country can be depressing in another.

color star1

This is the first in a three-part series on color theory. Here we’ll discuss the meanings behind the different color families, and give some examples of how these colors are used (with a bit of analysis for each). In Part 22 we’ll talk about how hue, chroma, value, saturation, tones, tints and shades affect the way we perceive colors. And in Part 33 we’ll discuss how to create effective color palettes for your own designs.

Warm Colors Link

warmcolors

Warm colors include red, orange, and yellow, and variations of those three colors. These are the colors of fire, of fall leaves, and of sunsets and sunrises, and are generally energizing, passionate, and positive.

Red and yellow are both primary colors, with orange falling in the middle, which means warm colors are all truly warm and aren’t created by combining a warm color with a cool color. Use warm colors in your designs to reflect passion, happiness, enthusiasm, and energy.

Red (Primary Color) Link

red

Red is a very hot color. It’s associated with fire, violence, and warfare. It’s also associated with love and passion. In history, it’s been associated with both the Devil and Cupid. Red can actually have a physical effect on people, raising blood pressure and respiration rates. It’s been shown to enhance human metabolism, too.

Red can be associated with anger, but is also associated with importance (think of the red carpet at awards shows and celebrity events). Red also indicates danger (the reason stop lights and signs are red, and that most warning labels are red).

Outside the western world, red has different associations. For example, in China, red is the color of prosperity and happiness. It can also be used to attract good luck. In other eastern cultures, red is worn by brides on their wedding days. In South Africa, however, red is the color of mourning. Red is also associated with communism. Red has become the color associated with AIDS awareness in Africa due to the popularity of the [RED] campaign.

In design, red can be a powerful accent color. It can have an overwhelming effect if it’s used too much in designs, especially in its purest form. It’s a great color to use when power or passion want to be portrayed in the design. Red can be very versatile, though, with brighter versions being more energetic and darker shades being more powerful and elegant.

Examples

darkcrimson4

The dark shades of red in this design give a powerful and elegant feel to the site.

abstraktion5

The true red accents stand out against the dark black background, and give a powerful and high-end feeling to the site.

bureau3476

The very bright red accents on this site give a sense of energy and movement.

crowebdesignets7

The dark red on this site, because it’s combined with grunge elements, seems more like the color of blood.

1mcreative8

Dark red, when combined with white and gray, gives a very elegant and professional impression.

Orange (Secondary Color) Link

orange

Orange is a very vibrant and energetic color. In its muted forms, it can be associated with the earth and with autumn. Because of its association with the changing seasons, orange can represent change and movement in general.

Because orange is associated with the fruit of the same name, it can be associated with health and vitality. In designs, orange commands attention without being as overpowering as red. It’s often considered more friendly and inviting, and less in-your-face.

Examples

curiousromain9

The bright orange box draws attention to its contents, even with the other bright red elements on the page.

alamofire10

Orange is used here in its most obvious incarnation, to represent fire.

webdots11

The dark orange, when set against the lime green, almost acts as a neutral and grounding color here.

neighborino12

Orange is used here to give a friendly and inviting impression.

theplant13

The orange accents here add a lot of visual interest and bring attention to the call to action.

Yellow (Primary Color) Link

yellow

Yellow is often considered the brightest and most energizing of the warm colors. It’s associated with happiness and sunshine. Yellow can also be associated with deceit and cowardice, though (calling someone yellow is calling them a coward).

Yellow is also associated with hope, as can be seen in some countries when yellow ribbons are displayed by families who have loved ones at war. Yellow is also associated with danger, though not as strongly as red.

In some countries, yellow has very different connotations. In Egypt, for example, yellow is for mourning. In Japan, it represents courage, and in India it’s a color for merchants.

In your designs, bright yellow can lend a sense of happiness and cheerfulness. Softer yellows are commonly used as a gender-neutral color for babies (rather than blue or pink) and young children. Light yellows also give a more calm feeling of happiness than bright yellows. Dark yellows and gold-hued yellows can sometimes look antique and be used in designs where a sense of permanence is desired.

Examples

foodtease14

The bright yellow header and graphics used throughout this site give a sense of energy and positivity.

artvisiona15

The light yellow is used almost as a neutral in the header here, and combined with the hand-drawn illustrations gives a very cheerful impresison.

cabomba16

The bright yellow accents bring attention to the most important parts of this site.

pasikeitimai17

The bright yellow sunflower reminds visitors of summer on this site, and combined with the antique-yellow background, it gives a homey and established feeling.

tangram18

The bright yellow header here adds a bit of extra energy to this design.

Cool Colors Link

coolcolors

Cool colors include green, blue, and purple, are often more subdued than warm colors. They are the colors of night, of water, of nature, and are usually calming, relaxing, and somewhat reserved.

Blue is the only primary color within the cool spectrum, which means the other colors are created by combining blue with a warm color (yellow for green and red for purple). Greens take on some of the attributes of yellow, and purple takes on some of the attributes of red. Use cool colors in your designs to give a sense of calm or professionalism.

Green (Secondary Color) Link

green

Green is a very down-to-earth color. It can represent new beginnings and growth. It also signifies renewal and abundance. Alternatively, green can also represent envy or jealousy, and a lack of experience.

Green has many of the same calming attributes that blue has, but it also incorporates some of the energy of yellow. In design, green can have a balancing and harmonizing effect, and is very stable. It’s appropriate for designs related to wealth, stability, renewal, and nature. Brighter greens are more energizing and vibrant, while olive greens are more representative of the natural world. Dark greens are the most stable and representative of affluence.

Examples

rubberdesign19

The extremely muted greens of this site give it a very down-to-earth and natural feeling.

ligonier20

The bright green header of this site mixed with the leaf motif gives it a very natural and vibrant feeling.

plantwithpurpose21

The more olive-toned green of this site gives it a natural feeling, which is very appropriate for the content.

iavion22

The brighter, more retro-looking greens of this site give it a very fresh, energized feeling.

baynature23

Another olive green site with a very natural feeling.

Blue (Primary Color) Link

blue

Blue is often associated with sadness in the English language. Blue is also used extensively to represent calmness and responsibility. Light blues can be refreshing and friendly. Dark blues are more strong and reliable. Blue is also associated with peace, and has spiritual and religious connotations in many cultures and traditions (for example, the Virgin Mary is generally depicted wearing blue robes).

The meaning of blue is widely affected depending on the exact shade and hue. In design, the exact shade of blue you select will have a huge impact on how your designs are perceived. Light blues are often relaxed and calming. Bright blues can be energizing and refreshing. Dark blues are excellent for corporate sites or designs where strength and reliability are important.

Examples

sman9624

The dark blues give this a feeling of reliability, while the brighter and lighter blues keep it from feeling staid.

industrialmedia25

The dark blue gives this a site a professional feeling, especially when combined with the white background. But the lighter blue accents add a bit more interest.

aandesigners26

The bright, sky blue of this site gives it a young and hip feeling, which is emphasized by the reddish accents.

mightydream27

This site combines a range of blues, which gives it a refreshing feeling overall.

fernandosilanes28

The light, muted blue of this site gives a very relaxed and calm impression.

Purple (Secondary Color) Link

purple

Purple was long associated with royalty. It’s a combination of red and blue, and takes on some attributes of both. It’s associated with creativity and imagination, too.

In Thailand, purple is the color of mourning for widows. Dark purples are traditionally associated with wealth and royalty, while lighter purples (like lavendar) are considered more romantic.

In design, dark purples can give a sense wealth and luxury. Light purples are softer and are associated with spring and romance.

asprey29

The dark shade used here evokes the royal heritage of purple, which is very appropriate for the Asprey luxury goods brand.

avantgrape30

The light and medium purples here work well to convey a sense of creativity.

monumentmall31

The brighter, more reddish purple of this site gives it both a rich and energetic look.

ianjamescox32

The dark purple background here adds to the creative feeling of the overall site.

alice33

The dark purple accents on this site give a sense of luxury and refinement.

Neutrals Link

neutralcolors

Neutral colors often serve as the backdrop in design. They’re commonly combined with brighter accent colors. But they can also be used on their own in designs, and can create very sophisticated layouts. The meanings and impressions of neutral colors are much more affected by the colors that surround them than are warm and cool colors.

Black Link

black

Black is the strongest of the neutral colors. On the positive side, it’s commonly associated with power, elegance, and formality. On the negative side, it can be associated with evil, death, and mystery. Black is the traditional color of mourning in many Western countries. It’s also associated with rebellion in some cultures, and is associated with Halloween and the occult.

Black is commonly used in edgier designs, as well as in very elegant designs. It can be either conservative or modern, traditional or unconventional, depending on the colors it’s combined with. In design, black is commonly used for typography and other functional parts, because of it’s neutrality. Black can make it easier to convey a sense of sophistication and mystery in a design.

Examples

djalexander34

The black accents, mixed with the brighter colors and very dark brown background add an edgier look to the overall design.

reducetuhuella35

Black, when mixed with icy blues, looks colder.

mediasoldier36

The black here, mixed with dark grays and lime green, and an overall grungy theme, adds to the edginess of the design.

markwallis37

The black accents here add an extra layer of sophistication and modernity to the site.

theswishlife38

The strong black accents on this site add to the overall sophistication of the design.

White Link

white

White is at the opposite end of the spectrum from black, but like black, it can work well with just about any other color. White is often associated with purity, cleanliness, and virtue. In the West, white is commonly worn by brides on their wedding day. It’s also associated with the health care industry, especially with doctors, nurses and dentists. White is associated with goodness, and angels are often depicted in white.

In design, white is generally considered a neutral backdrop that lets other colors in a design have a larger voice. It can help to convey cleanliness and simplicity, though, and is popular in minimalist designs. White in designs can also portray either winter or summer, depending on the other design motifs and colors that surround it.

Examples

fuelhaus39

The white on the Fuelhaus site is used to contrast against the electric blue.

chamainc40

White backgrounds are very popular on minimalistic sites, and provide great contrast to black typography.

clearleft41

Here, white is used as an accent color, which lightens the overall effect of the site.

timeger42

White combined with gray gives a soft and clean feeling to this design.

ocvision43

Again, white used as a background lightens the whole design.

Gray Link

gray

Gray is a neutral color, generally considered on the cool end of the color spectrum. It can sometimes be considered moody or depressing. Light grays can be used in place of white in some designs, and dark grays can be used in place of black.

Gray is generally conservative and formal, but can also be modern. It is sometimes considered a color of mourning. It’s commonly used in corporate designs, where formality and professionalism are key. It can be a very sophisticated color. Pure grays are shades of black, though other grays may have blue or brown hues mixed in. In design, gray backgrounds are very common, as is gray typography.

Examples

adrianpelletier44

Light gray gives a very subdued and quiet feeling to this design.

symphony45

The light gray background here adds to the modern feeling created by the typography.

nosotros46

The cooler gray on this site gives a modern, sophisticated feel to the site.

aside47

The dark gray backround and lighter gray typography lend a decidedly modern look to this design.

sheriardesigns48

The wide spectrum of gray shades used in this design combine to give a sophisticated and professional look to the site.

Brown Link

brown

Brown is associated with the earth, wood, and stone. It’s a completely natural color and a warm neutral. Brown can be associated with dependability and reliability, with steadfastness, and with earthiness. It can also be considered dull.

In design, brown is commonly used as a background color. It’s also seen in wood textures and sometimes in stone textures. It helps bring a feeling of warmth and wholesomeness to designs. It’s sometimes used in its darkest forms as a replacement for black, either in backgrounds or typography.

Examples

ridemomentum49

The grayish-brown here lends a sense of responsibility and dependability.

tabororthopedics50

The orangish-brown here gives a very earthy and dependable feeling.

leliathomas51

The dark brown used in the background here lends an earthy and steadfast look to the overall layout, and lets the brigher colors in the design really get to stand out.

austintownhall52

Woodgrain is a popular use of brown, and in this case the warm brown adds some friendliness to an otherwise minimalist site.

dcraigmusic53

The grayish-brown background here lends a feeling of stability and down-to-earthness.

Beige and Tan Link

tan

Beige is somewhat unique in the color spectrum, as it can take on cool or warm tones depending on the colors surrounding it. It has the warmth of brown and the coolness of white, and, like brown, is sometimes seen as dull. It’s a conservative color in most instances, and is usually reserved for backgrounds. It can also symbolize piety.

Beige in design is generally used in backgrounds, and is commonly seen in backgrounds with a paper texture. It will take on the characteristics of colors around it, meaning it has little effect in itself on the final impression a design gives when used with other colors.

Examples

hellocarsonified54

The light tan background here feels young and fresh because of the bright colors around it.

calicott55

The light tan background here lends a more conservative and elegant feeling to the overall design.

spreadfirefox56

The yellowish tan background is made even warmer by the orange and brown accents throughout this site’s design.

tarabrooch57

Tan is popularly used as a paper-bag texture, and in its more grayish form as a concrete or stone texture.

tonyleighton58

The beige header background and other accents on the site lend a refined and traditional feeling to the overall design.

Cream and Ivory Link

ivory

Ivory and cream are sophisticated colors, with some of the warmth of brown and a lot of the coolness of white. They’re generally quiet, and can often evoke a sense of history. Ivory is a calm color, with some of the pureness associated with white, though it’s a bit warmer.

In design, ivory can lend a sense of elegance and calm to a site. When combined with earthy colors like peach or brown, it can take on an earthy quality. It can also be used to lighten darker colors, without the stark contrast of using white.

Examples

playattitude59

The ivory background here has a warm quality that’s tempered by some of the cooler colors on the site.

artinmycoffee60

The grayish-cream background here is made warmer by the orangish-brown accents.

musiccityunsigned61

The cream background adds a sense of understated elegance this site would otherwise be lacking.

karijobe62

The cream background here reinforces the antique theme that runs throughout the design’s graphics.

culinaryculture63

The ivory combined with other light colors and jewely tones makes this site have a very elegant overall appearance.

In Brief… Link

While the information contained here might seem just a bit overwhelming, color theory is as much about the feeling a particular shade evokes than anything else. But here’s a quick reference guide for the common meanings of the colors discussed above:

  • Red: Passion, Love, Anger
  • Orange: Energy, Happiness, Vitality
  • Yellow: Happiness, Hope, Deceit
  • Green: New Beginnings, Abundance, Nature
  • Blue: Calm, Responsible, Sadness
  • Purple: Creativity, Royalty, Wealth
  • Black: Mystery, Elegance, Evil
  • Gray: Moody, Conservative, Formality
  • White: Purity, Cleanliness, Virtue
  • Brown: Nature, Wholesomeness, Dependability
  • Tan or Beige: Conservative, Piety, Dull
  • Cream or Ivory: Calm, Elegant, Purity

Further Resources Link

The Whole Series Link

Footnotes Link

  1. 1 http://en.wikipedia.org/wiki/File:Color_star-en.svg
  2. 2 http://www.smashingmagazine.com/2010/02/02/color-theory-for-designers-part-2-understanding-concepts-and-terminology/
  3. 3 http://www.smashingmagazine.com/2010/02/08/color-theory-for-designer-part-3-creating-your-own-color-palettes/
  4. 4 http://darkcrimson.com/
  5. 5 http://www.abstraktion.co.uk/
  6. 6 http://bureau347.com/
  7. 7 http://www.crowebdesignets.com/
  8. 8 http://1mcreative.com/
  9. 9 http://www.curiousromain.com/
  10. 10 http://alamofire.com/
  11. 11 http://www.webdots.in/
  12. 12 http://www.neighborino.com/
  13. 13 http://theplant.jp/en/
  14. 14 http://foodtease.com/
  15. 15 http://artvisiona.ro/
  16. 16 http://www.cabomba.se/
  17. 17 http://www.pasikeitimai.lt/
  18. 18 http://www.tangram.li/
  19. 19 http://rubberdesign.com/
  20. 20 http://www.ligonier.org/
  21. 21 http://www.plantwithpurpose.org/
  22. 22 http://www.i-avion.com/
  23. 23 http://www.baynature.com/
  24. 24 http://sman96.com/
  25. 25 http://industrialmedia.ca/
  26. 26 http://www.aandesigners.com/
  27. 27 http://mightydream.com/
  28. 28 http://www.fernandosilanes.com/
  29. 29 http://asprey.com/
  30. 30 http://www.avantgrape.com/
  31. 31 http://www.newcastle-shopping.co.uk/
  32. 32 http://ianjamescox.com/
  33. 33 http://alicea.ca/
  34. 34 http://www.djalexandar.com/
  35. 35 http://www.reducetuhuella.org/
  36. 36 http://mediasoldier.net/
  37. 37 http://www.markwallis.ie/
  38. 38 http://theswishlife.com/
  39. 39 http://www.fuelhaus.com/
  40. 40 http://www.chamainc.com/
  41. 41 http://clearleft.com/
  42. 42 http://timeger.com/
  43. 43 http://www.ocvision.com/
  44. 44 http://www.adrianpelletier.com/
  45. 45 http://symphony-cms.com/
  46. 46 http://nosotroshq.com/
  47. 47 http://aside.in/
  48. 48 http://manisheriar.com/
  49. 49 http://ridemomentum.com/
  50. 50 http://www.tabororthopedics.com/
  51. 51 http://www.leliathomas.com/
  52. 52 http://austintownhall.com/
  53. 53 http://dcraigmusic.com/
  54. 54 http://hello.carsonified.com/
  55. 55 http://www.calicott.com/
  56. 56 http://www.spreadfirefox.com/5years/en-US/
  57. 57 http://www.tarabrooch.it/
  58. 58 http://www.tonyleighton.com/
  59. 59 http://www.playattitude.com/
  60. 60 http://artinmycoffee.com/
  61. 61 http://musiccityunsigned.com/
  62. 62 http://karijobe.com/index.php
  63. 63 http://culinaryculture.com/
  64. 64 http://desktoppub.about.com/cs/color/a/symbolism.htm
  65. 65 http://www.color-wheel-pro.com/color-meaning.html
  66. 66 http://en.wikipedia.org/wiki/Color
  67. 67 http://www.smashingmagazine.com/2010/01/28/color-theory-for-designers-part-1-the-meaning-of-color/
  68. 68 http://www.smashingmagazine.com/2010/02/02/color-theory-for-designers-part-2-understanding-concepts-and-terminology/
  69. 69 http://www.smashingmagazine.com/2010/02/08/color-theory-for-designer-part-3-creating-your-own-color-palettes/

↑ Back to top Tweet itShare on Facebook

Cameron Chapman is a professional Web and graphic designer with over 6 years of experience. She writes for a number of blogs, including her own, Cameron Chapman On Writing. She’s also the author of The Smashing Idea Book: From Inspiration to Application.

Advertisement
  1. 1

    Muhammad Usman Arshad

    January 28, 2010 2:57 am

    Great job Cameron. this is very helpful article, and of course I like the collection of website you have mention. thanks a lot for sharing a good resources.

    0
  2. 3

    Excellent article! Looking forward to see continue. Thank you a lot, Cameron!

    4
  3. 4

    It’s was very good understanding about colors..Excellent article! Thank u! :)

    3
  4. 5

    Awesome article Cameron. Another part is to find the perfect color. For this part I often use a Colour-Generator like the kuler from adobe.

    0
  5. 6

    nice work! thx

    1
  6. 7

    Great article. I often find myself trying to find the perfect colors to use for my designs, ending up using popular tools like adobe kuler or color schemer. This article (and the rest of the series) will surely help designers around making a more solid start on their projects. Keep it up on the next articles.

    1
  7. 8

    Great article! It’s very useful for designers to improve their design skill. Thank you so much cameron.

    3
  8. 9

    wow… that’s an amazing article, thanks cameron :)

    0
  9. 10

    Very usefull article with some good exampels thnx !

    0
  10. 11

    thanks!!! very helpful for designers… i also liked example sites u given looking for next parts :)

    1
  11. 12

    great article. thx ;-)

    1
  12. 13

    I really like the examples. Most of the websites shown haven’t been on any of the lists yet. But I’m not sure the whole color theory facts are useful for designers. All of it is so general and belongs to the most basic design knowledge.

    1
  13. 14

    Thanks, i was just researching this kind of stuff!

    0
  14. 15

    wow, great article, thank you!

    0
  15. 16

    This is a super useful article, especially for designers that have international clients.

    0
  16. 17

    Great article, looking forward to the continuance!

    0
  17. 18

    Great article!

    Bookmarked

    0
  18. 19

    “Do any of the yellow examples raise the association of deceit or cowardice?”

    Yellow always makes me think of warm sunshine. I guess it all depends on how you use the colour’s name in your language. Which I guess would mean it’s even harder to pick the right colour if you are pitching for an international audience. Yellow might represent one thing in the US, another in the UK, and other in Spain, India, Brazil…

    I believe that you have to design to look good and try not to pander to the clients colour phobias too much. Though you should always be able to back you choice with a better answer than ‘Well I like it’. Have something up you sleeve like ‘Well a lot of my clients say that Yellow makes them think of warm sunshine’…

    0
  19. 20

    Mistyukevych Serge

    January 28, 2010 4:54 am

    Great!
    I’m like combination of black, red and white.
    That’s why I’m using it in my personal site design: mistyukevych.com
    As for me a little usage of red makes site more solid.

    Also I have found great usage of red color for whole site: expertscreative.com/
    (it’s again red/black/white color scheme).

    Looking forward to continuance!

    -2
  20. 21

    Cameron, this is one of the best articles I’ve read in a while. To help with a recent creative slump, I’ve been on the lookout for inspiration. I believe this article will help, alot. Thanks a bunch.

    -2
  21. 22

    I like how you use a website using an elegant theme instead of linking directly yo elegant themes’s lumin page.

    -1
  22. 23

    I think it’s worth noting that much of the power in color theory is fighting the colors default meaning. Online and off, what colors generally represent is common knowledge. You don’t think about it, but you make the associations automatically. Blue for trust and a sense of officialness, Red for sex and passion etc etc.

    The key is to not fall victim to the colors’ accepted meaning. Push the limit through contrast and texture. If design communicates, color can’t solely define. Most of the sites here do exactly that. IMO.

    Oh and thanks for featuring 1M Creative. :)

    -3
  23. 24

    That was a very useful article with some nice practical examples. I’ve actually taken some color theory classes and there is much to the subject, but you managed to pack in some of the key points.

    0
  24. 25

    WHOSE RESPONSIBLE COLOR?

    -5
  25. 26

    Color theory is fascinating, and even more so when you take it to the level of color pairing and how that can affect the message you are sending. Awhile back I wrote a blog solely about the color blue, and how pairing it with different colors can help change the meaning. Check it out if you are interested!

    microarts.com/culture/branding-insights/2009/11/vast-ocean-of-blue.php/?s=bl

    1
  26. 27

    Hey thanks for the mention! We are dependable!

    -1
  27. 28

    excellent article.

    -4
  28. 29

    inspiring and looking forward for the next article :)

    -4
  29. 30

    Wonderful article.
    I always spend lot of time with colors.
    You saved many hours SM :)
    Waiting for the next part :)

    -4
  30. 31

    I live the article.
    Looking forward to the next parts :)

    -4
  31. 32

    Just noted a small error – “The true red accents stand out against the dark red background…”. I think you mean dark BLACK or GREY background?

    -3
  32. 33

    Brilliant article.
    I am in the process of redesigning my company’s website, choosing the colors and all that, and this was a great help in seeing other designs and how to work colors together. Great job, guys!

    0
  33. 34

    Very interesting article! Thanks a lot for your effort.

    -4
  34. 35

    THAT is the kind of quality I expect of SM. thanks a lot.

    -3
  35. 36

    Nice start. I took “Color Theory” in school. That what the most intense and pivotal class of all my foundations. I am looking forward to your discussion on saturation, tints and shades.

    -2
  36. 37

    Xaliber von Reginhild

    January 28, 2010 9:58 am

    Nice post.

    But why the lateness? I thought knowledge as principal as in this should have been dwelling in SmashingMagz years ago. The color theory is the most important thing to know before all else for any designer.

    -3
  37. 38

    This list is a great reference when mood is important to a design (which is always!). Thanks for doing the leg work :-)

    -3
  38. 39

    great job! thanks, looking fwd to next parts :)

    -1
  39. 40

    Very interesting article.

    -2
  40. 41

    This article was way better than my Color Theory class at school. I learned more reading this than in that entire class.

    -3
  41. 42

    I like these overviews but sometimes I think colour meanings are taken a bit too literal. I often get clients that pull up sites about colour meaning they have found when they have an issue with a colour I’ve used. (When dealling with a group of 10 people there is always someone doesn’t like the colour not because of its significance but really just out of personal choice. They search for a ‘colour definitions’ site until they find one that condemns the colour they have an issue with (red=blood, green=jealousy, blue=cold, yellow = cowardice etc etc) I think they miss out on two key considerations

    1. Context. How and where the colour is used. Looking at a page of solid red does not give the same feeling as having a red panel on a white page.

    2. Tones. People will often state blue means this and red means that – but what they don’t realise is that they tend to talk about the solid primary colour and that there are an infinite number of shades and tints of each colour. Grouping them all together against one base colour does not do them justice as each tint has its own distinct feeling.

    Sorry not having a go at the publisher, the more info out there the better. I just think sometimes ‘clients’ use good resources like this in an over simplified way.

    Cheers

    0
    • 43

      well said

      -4
    • 44

      While I agree with your comment, this article is only part 1 of a series. This one deals mostly with the basic emotions/feelings one gets from these colours. Hopefully the next articles will focus on context and toning. I hope some of Kandinsky’s and Itten’s research will be mentioned as well.

      1
  42. 45

    Yeah this is a great article, I like all the pictures and examples, very visually pleasing. You guys have the best images with your posts. Also, I read a similar article for those who are interested

    websitecomplex.com/blog/choosing-the-right-colors-to-represent-your-website

    -4
  43. 46

    Nice article! Very detailed.

    -3
  44. 47

    How about the perception and meaning colors, fot they are also culture related.
    meaning of yellow in europe is dffrent then the meaning of yellow in china.
    or am i wrong?

    -2
    • 48

      Very true about the tones of colors having different connotations around the globe. I was working for an agency a few years ago where we were designing a hospitality website for a client in Germany. After presenting the preliminary designs, the client rejected the hue of blue we had used throughout since it was the same that most all industrial equipment in that country is colored. I hope the next parts of this article touch more on these types of global color connotations.

      -2
    • 49

      It’s not that you’re wrong, it’s that you didn’t pay attention when you read the article, if you even bothered to read the article you’re criticizing. There’s more to an article than the summary list at the end. This was covered – in detail – throughout the entire article.

      -1
  45. 50

    Really Great Article! and very well explain, I all be waiting for part 2/3

    thanks

    -2
  46. 51

    This article is a great example of how flawed basic color theory is:

    Do any of the red website examples raise the association of fire, violence or warfare?
    Do any of the orange examples raise the association of earth, autumn or health?
    Do any of the yellow examples raise the association of deceit or cowardice?

    Color theory is just a sales tool. Its value lies in enabling the designer to “talk the talk”. The real value of colours in webdesign – compared to product design – does not lie in single colours anyway, but in what colours you combine. Using a certain color on a white background will have a totally different effect from using the same color on a white background.

    This is why simplistic views of color theory like this are not only worthless, but much rather counter-productive. Color theory really is something that you can only use when you get into it VERY deep.

    What we need much more is an article on how to COUNTER color theory, because just as woodshed explained, color theory is used against designers a lot.

    Apart from this, great choice of websites.

    2
  47. 53

    Really good job! Waiting for more :)

    -2
  48. 54

    Design That Rocks

    January 28, 2010 1:54 pm

    Excellent post. Very interesting interpretations and examples. Nice work!

    -2
  49. 55

    I hope in a future installment you’ll cover color blindness, and particularly foreground/background contrast issues.

    For example, several of the dark background colors in your examples look black to me, and non-bold red text on a dark red background is very hard for some of us to read. And roughly 7 to 10 percent of men (and a much smaller percentage of women) have some form of color blindness, so if you don’t take this into account when you’re picking colors, you may be losing up to a tenth of your audience.

    0
  50. 56

    Really interesting comment on color blindness, Jed! I’d love to read a posting about that!
    Here’s another blog post about color theory, if you’re interested: microarts.com/culture/branding-insights/2009/11/vast-ocean-of-blue.php/?s=tl

    -2

↑ Back to top