hidden

Smashing Magazine

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.

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

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 2 we’ll talk about how hue, chroma, value, saturation, tones, tints and shades affect the way we perceive colors. And in Part 3 we’ll discuss how to create effective color palettes for your own designs.

[Offtopic: by the way, did you know that we are publishing a Smashing eBook Series? The brand new eBook #3 is Mastering Photoshop For Web Design, written by our Photoshop-expert Thomas Giannattasio.]

Warm Colors

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

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)

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

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

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

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

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

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

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

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

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

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

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

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

Orange (Secondary Color)

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

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

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

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

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

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

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

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

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

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

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

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

Yellow (Primary Color)

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

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

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

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

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

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.

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

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

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

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.

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

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

Cool Colors

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

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)

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

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

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

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

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

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

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

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

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

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

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

Another olive green site with a very natural feeling.

Blue (Primary Color)

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

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

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

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

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

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.

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

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

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

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

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

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

Purple (Secondary Color)

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

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.

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

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

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

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

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

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

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

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

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

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

Neutrals

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

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

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

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

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

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

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

Black, when mixed with icy blues, looks colder.

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

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

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

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

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

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

White

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

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

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

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

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

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

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

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

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

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

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

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

Gray

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

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

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

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

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

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

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

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

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

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

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

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

Brown

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

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

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

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

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

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

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

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.

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

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

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

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

Beige and Tan

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

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

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

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

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

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

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

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

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

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

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

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

Cream and Ivory

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

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

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

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

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

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

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

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

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

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

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

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

In Brief…

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

The Whole Series

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 Internet Famous: A Practical Guide to Becoming an Online Celebrity.

146
Advertising
  1. 1
    Muhammad Usman Arshad
    January 28th, 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.

  2. 2
    Ruslan
    January 28th, 2010 2:57 am

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

  3. 3
    Shiv
    January 28th, 2010 2:58 am

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

  4. 4
    Marcello
    January 28th, 2010 3:05 am

    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.

  5. 5
    Stubi
    January 28th, 2010 3:08 am

    nice work! thx

  6. 6
    Ravi
    January 28th, 2010 3:08 am

    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.

  7. 7
    Arun Satyal
    January 28th, 2010 3:10 am

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

  8. 8
    woodshed
    January 28th, 2010 3:15 am

    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

    • 9
      Chris
      January 28th, 2010 4:42 am

      well said

    • 10
      Bert
      January 29th, 2010 12:41 am

      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.

  9. 11
    ptarmigan
    January 28th, 2010 3:18 am

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

  10. 12
    Eigenthijs
    January 28th, 2010 3:27 am

    Very usefull article with some good exampels thnx !

  11. 13
    Saurabh
    January 28th, 2010 3:32 am

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

  12. 14
    wejick
    January 28th, 2010 3:38 am

    great article. thx ;-)

  13. 15
    remco
    January 28th, 2010 3:45 am

    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?

    • 16
      kola
      January 28th, 2010 10:53 am

      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.

    • 17
      David
      January 29th, 2010 1:57 pm

      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.

  14. 18
    Defifee
    January 28th, 2010 3:53 am

    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.

  15. 19
    willian
    January 28th, 2010 3:54 am

    Thanks, i was just researching this kind of stuff!

  16. 20
    chabuya
    January 28th, 2010 3:56 am

    wow, great article, thank you!

  17. 21
    Rochelle Dancel
    January 28th, 2010 4:02 am

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

  18. 22
    Sina
    January 28th, 2010 4:21 am

    Great article, looking forward to the continuance!

  19. 23
    Felix
    January 28th, 2010 4:37 am

    Great article!

    Bookmarked

  20. 24
    Chris
    January 28th, 2010 4:39 am

    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.

    • 25
      Gedy
      January 28th, 2010 3:01 pm

      Very well said. Totally agree!

  21. 26
    aMUSICsite
    January 28th, 2010 4:53 am

    “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’…

  22. 27
    Mistyukevych Serge
    January 28th, 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!

  23. 28
    giacomo
    January 28th, 2010 5:16 am

    Hei! congrats for this post, very helpfull! Great example and suggestions that i’ll use in my next work.
    Bye
    Thanks
    G.

  24. 29
    Somecallmejosh
    January 28th, 2010 5:22 am

    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.

  25. 30
    Adam
    January 28th, 2010 5:35 am

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

  26. 31
    BJMRamage
    January 28th, 2010 6:23 am

    I thought this might tend to be like all other “Color Theory” articles that are posted elsewhere online. However, this reads well and the examples provided show off well. Plus I like the Condensed Quick-Read version at the end.

    Awesome.

  27. 32
    Antoine Butler
    January 28th, 2010 6:23 am

    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. :)

  28. 33
    tejas
    January 28th, 2010 6:25 am

    There are certain colors that definitely mean something. Like a toxic pink represents lot of modernism, and is still a brave thing to spot. That’s why we made our website (whitehatsweb.com) pink. Our other gallery site Footerama is a subtle ode to noir film posters (Futurama – Footerama, film connection, you got it!) hence the red as a tribute to Saul Bass.

  29. 34
    Thomas McGee
    January 28th, 2010 6:55 am

    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.

  30. 35
    Greg619cw
    January 28th, 2010 7:06 am

    WHOSE RESPONSIBLE COLOR?

  31. 36
    blythe
    January 28th, 2010 7:13 am

    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

  32. 37
    Momentum Sports
    January 28th, 2010 7:26 am

    Hey thanks for the mention! We are dependable!

  33. 38
    tareqBD
    January 28th, 2010 7:27 am

    excellent article.

  34. 39
    okie
    January 28th, 2010 7:32 am

    inspiring and looking forward for the next article :)

  35. 40
    DesignFellow
    January 28th, 2010 7:43 am

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

  36. 41
    magdawebdesign
    January 28th, 2010 8:02 am

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

  37. 42
    James
    January 28th, 2010 8:18 am

    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?

  38. 43
    Laura
    January 28th, 2010 8:26 am

    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!

  39. 44
    Riaan Knoetze
    January 28th, 2010 8:37 am

    Hiya Cameron,
    First things first: good article – enjoyed it thoroughly!

    As a South African, I’m confused as to why you think that red is the colour of mourning in my country – could you shed some light on this?

    Thanks in advance,

  40. 45
    Damion James
    January 28th, 2010 8:49 am

    Cool insight and a great reminder for us

  41. 46
    Adit Gupta
    January 28th, 2010 8:51 am

    Nice article. Good to see that you have also included examples for various colors. I hope you will you will also touch upon various color schemes like monochromatic, analogous, complementary and split-complementary in this series. :)

  42. 47
    Showpage
    January 28th, 2010 9:20 am

    Very interesting article! Thanks a lot for your effort.

  43. 48
    Thomas Strobl
    January 28th, 2010 9:25 am

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

  44. 49
    Drew
    January 28th, 2010 9:27 am

    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.

  45. 50
    Xaliber von Reginhild
    January 28th, 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.

  46. 51
    Ed
    January 28th, 2010 10:13 am

    This was a great read! I’m excited to read the next installment!

  47. 52
    Joe Spurling
    January 28th, 2010 10:39 am

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

  48. 53
    1.april
    January 28th, 2010 10:56 am

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

  49. 54
    Cueburst
    January 28th, 2010 11:04 am

    Very interesting article.

  50. 55
    Francis Baptiste
    January 28th, 2010 11:28 am

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

  51. 56
    Rob
    January 28th, 2010 11:55 am

    Nice article. Important information that every designer should know. I’ll be looking for the next two installments.

  52. 57
    Kristian McIntyre
    January 28th, 2010 12:06 pm

    Thanks for the article. I’ve created work for a client that views red = hot and blue = cool. A common perception indeed but what color is your can of ice cold Coke?

  53. 58
    Kerem Ozkay
    January 28th, 2010 12:24 pm

    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

  54. 59
    Tom - Airopia
    January 28th, 2010 12:31 pm

    Nice article! Very detailed.

  55. 60
    Moksha
    January 28th, 2010 1:01 pm

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

    thanks

  56. 61
    Michael
    January 28th, 2010 1:25 pm

    WOW! I can’t believe how wrong you got this.

    Red, Yellow and Blue are NOT primary colours as is commonly understood within the same colour model. It is important to distinguish between the additive (RGB) and subtractive (CMYK) colour models. Red & Blue are from the additive model and Yellow is from the subtractive model, they are not the 3 parts of a single model

    Your monitor that you are looking at right now creates all the colours you see with Red, Green and Blue which are the primary colours in an additive colour model.

    Cyan, Yellow, and Magenta are the primary colours of pigments of inks in the subtractive colour model and are the ones used in print shops around the world.

    Don’t believe me? Check your colour palette in photoshop!

    • 62
      hari
      January 28th, 2010 9:44 pm

      hey Michael ..

      I was wondering why people are just keep on praising the article without checking the proper credibility. Indeed its a great effort and I truly appreciate it but at the same time you have pointed out the genuine mistakes that author has written.

      I now have some doubt on author’s experience about color theory.. :) Well I would like to suggest to go and check this link for a better understanding of color theory. Correct me if I am wrong..

      http://www.dpbestflow.org/node/286

    • 63
      Fazal Majid
      January 31st, 2010 12:06 pm

      Indeed, and green is not a secondary color. In fact, quite the opposite, green is the single most important color, as it accounts for 50% of visual perception in our retina’s cones, followed by red, then blue.

  57. 64
    brian
    January 28th, 2010 1:31 pm

    I love the list of sites that accompany this article, but if you dont know all of this already you shouldn’t be a designer, period. This should all be very intuitive.

  58. 65
    Xoth Designs
    January 28th, 2010 1:46 pm

    Really good job! Waiting for more :)

  59. 66
    Design That Rocks
    January 28th, 2010 1:54 pm

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

  60. 67
    Jed
    January 28th, 2010 2:08 pm

    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.

  61. 68
    Taylor
    January 28th, 2010 2:12 pm

    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

  62. 69
    InteriorComplex
    January 28th, 2010 3:31 pm

    Great article. Color schemes in design often gets overlooked.

  63. 70
    Unsubscriber
    January 28th, 2010 3:49 pm

    That’s a very Eurocentric view of colors- if your audience is coming from China, Korea, or Japan all of your generalizations are dead wrong.

    • 71
      tsabhira
      February 9th, 2010 11:18 am

      Did you even read the article, where it is mentioned a zillion times that color meanings vary around the world (with specific examples, including Japan, Egypt, and Thailand)? Or did you just skip the reading and decide to take offense?

  64. 72
    Tina Hwang
    January 28th, 2010 4:14 pm

    I was a color-theory-enthusiast back in the uni. Thanks for reminding me!

  65. 73
    Jake
    January 28th, 2010 4:32 pm

    The Dark Crimson designer needs to put a period at the end of that sentence. And work on his grammar. It’s not ’00′s, it’s ’00s. And capitalize his proper nouns — it’s Flash, not flash.

  66. 74
    Raviraj
    January 28th, 2010 5:23 pm

    Excellent article… very very useful…. Thank You :)

  67. 75
    Adrian
    January 28th, 2010 5:51 pm

    With the greatest of repect, while I agree with most of your comments about various colors, you labelled the article Color Theory, and your theory is wrong in relation to the web. The web being screen based is an additive medium, and in the additive world primary colors are Red. Green and Blue, secondary colors are Cyan (Blue + Green), Magenta (Blue + Red) and Yellow (Red + Green)

    • 76
      Designi1
      January 28th, 2010 6:11 pm

      As i already said… i agree with you!! But just because its shows screen web examples. If they´ve put some addictive examples as the CYMK scheme colors would be ok :D instance of that pretty good article!!

    • 77
      Dante
      January 28th, 2010 10:12 pm

      This. Goethe’s color wheel (the traditional standard), the wheel you are referencing for this theory was derived from a paper medium dictated by paints. Apple re-calibrated the color wheel not too long ago as it applied specifically to screens, or the additive wheel that Adrian mentions. Apples wheel was retooled to treat Red, Blue & Green as the primaries of the spectrum, as those are the three colors that screens use to make every other color in the wheel… It also lends greater weight to spectrum, and doesn’t treat colors as an equal split. Meaning that say, Magenta occupies a far greater percentage of the wheel than Yellow, which is almost non-existent. It’s why Pixars color palettes where so much more alive than other animation houses at the time. They were the first to fully migrate to Apples wheel.
      Upon realizing this, both Adobe & Pantone tried to migrate over to Apples wheel and were met with a huge uproar from the traditional art community. Pantone switched back completely, and Adobe kind of played a middle ground. If you are on a Mac and are designing for the screen, make sure you are using Apple’s color Picker, and not Adobe’s. Preferences>General>Color Picker>Apple. It makes a huge difference when choosing complimentary and tertiary palettes.

  68. 78
    Chidambaram
    January 28th, 2010 9:35 pm

    Very use-full article with some good examples thanks !

  69. 79
    hari
    January 28th, 2010 10:17 pm

    hey folks ..

    Its a great article, but from web design perspective the RGB color model is best suited rather than RYB color model.

    RYB color model which was initially develop with the help of printer, painter before there could be any explanation of color theory scientifically. But after studying the various color property the RGB and CMYK Color model was developed and widely deployed for the BEST possible outcome.

    FYI have look on this link ..

    http://en.wikipedia.org/wiki/Color_theory
    http://www.dpbestflow.org/node/286

    Correct me if I am wrong..

    Cheers
    hari

  70. 80
    Ravi
    January 28th, 2010 10:18 pm

    Informative

  71. 81
    Thina
    January 28th, 2010 10:21 pm

    awesomeness

  72. 82
    Deepika
    January 28th, 2010 11:21 pm

    Knowledge of colors is very important for a designer and its good Cameron you have initiated such an article. Covering all areas of color theory in one post is impossible and we look forward for other parts.

    Few weeks back I wrote a post about logo and usage of colors in it, where I touched upon colors at high level since it was not the main subject of my post. Your posts can work as a detailed one my colors section :-) If you want to review the post
    deepikadutta.wordpress.com/2010/01/01/how-to-design-a-logo/
    and feel free to share your comments.

    It would be good if you can add how color changes its meaning from one part of globe to another, and also how color combination’ can change the meaning of a color.

    great going & waiting for more parts!

  73. 83
    izzy
    January 28th, 2010 11:44 pm

    awesome!
    this is a very useful info for web designer.

  74. 84
    CINQ
    January 28th, 2010 11:57 pm

    nice work! thx

  75. 85
    avinash
    January 29th, 2010 12:03 am

    Very use-full article with some good examples thanks !

  76. 86
    Ajay
    January 29th, 2010 1:56 am

    Woha ! this is huge..

  77. 87
    srinivas
    January 29th, 2010 3:30 am

    awesome stuff

  78. 88
    n
    January 29th, 2010 3:46 am

    Nothing I didn’t know before; but a great accumulation! Bookmarked for reference

  79. 89
    Dan
    January 29th, 2010 4:02 am

    IMO the best article ever written on SM :) Loved it
    Can’t wait till part 2 :)

  80. 90
    James Kurtz III
    January 29th, 2010 5:13 am

    In my rookie year as a designer I had a packaging design review for a name brand product to be sold at a HUGE retailer. I spent weeks perfecting my design concepts and colors in preparation. At the conference table filled with executives the best design of the bunch (in my opinion) was instantly removed from consideration with one sentence uttered by the buyer, “purple is the Latin color for death.” No one even looked at that concept again. Except me, in shock, that he had dismissed my work so easily and casually. The lesson: know what your colors mean to all cultures! Great article.

    • 91
      Chris
      January 29th, 2010 5:41 am

      I can feel that, James, but I think you have your conclusion wrong. All the colors can mean something negative in some culture. Especially if extinct cultures like the roman empire are included.

      The conclusion should rather be that color theory in its simplified version is just not a basis for proper decision making in the design process.

      Colors can ONLY be said to have a specific effect on the viewer if their context, their specific shade and a dozen other factors are included. Since that would be an utterly impractical model to use, it makes more sense for designers to concentrate on how to counter non-designers using oversimplified design theories to damage great work.

      • 92
        James Kurtz III
        February 1st, 2010 5:03 am

        Good point! I wish you were in that meeting with me.

  81. 93
    Leonardo Mateus
    January 29th, 2010 5:15 am

    BLUE means SADNESS ?!?!….Sorry, but I desagree… I think BLUE means sky, flying, happiness, dreams, calm (light blue)….
    But is a great reference… Bookmarked too… Thanks!

    • 94
      Greg619fw
      January 29th, 2010 6:01 am

      Blue DOES generally convey dark/sadness. Relating to design.

      • 95
        Chris
        January 29th, 2010 6:17 am

        No it doesn’t. There’s the english idiom “I’m feeling blue.” which expresses sadness. But that doesn’t mean the color blue expresses sadness in design.

        In german, there’s the very common saying “I’m blue.”, which means “I’m drunk.”. But nobody in Germany would associate the color blue with alcohol because of that. And blue is hardly ever used for designing alcohol bottles.

        As with all of “color theory”, it is simply dead wrong to assign any meaning to a color without considering its context.

      • 96
        Carlos Pacheco
        January 29th, 2010 8:34 am

        Well… here in Brazil we remember the blue because our national flag (green, yellow and blue). In this case blue means the sky!

        Besides that we use the expression “Everything azul” on a direct translation, wich means that “everything is just fine”.

        So as you can see, guys, to assign any meaning to a color depends on the context as Chris have mentioned.

        Yep… this is a complex issue!

  82. 97
    Gina
    January 29th, 2010 5:20 am

    Excellent format and good examples. Great article!

  83. 98
    Carlos Pacheco
    January 29th, 2010 5:40 am

    Think this might help:
    http://psd.tutsplus.com/articles/web/color-tools-resources-and-tutorials-for-photoshopers/

    Cheers

    Carlos

  84. 99
    Benny
    January 29th, 2010 6:31 am

    Great article! I just read the whole thing. It took me at least 15 mins. Got inspired and learned some things. I wrote down the list for later reference. Thanks a lot!

  85. 100
    VashTS
    January 29th, 2010 6:33 am

    The red in the China,which makes me give a smile,cuz I am a chinese, Excellent format and good examples. Great article!

  86. 101
    Website Design Contest
    January 29th, 2010 7:01 am

    Excellent work!!! Everyone will get confused when coming to colors like how and which should be taken. But now after looking at your blog I got an idea as which color to use. I would use this in my site design and would enter into contest running by grafikguru.com.

  87. 102
    jairaj
    January 29th, 2010 7:35 am

    Hy,

    Its wonder full article… :)

    I got to know what colors to use and when to use it…

  88. 103
    StudioDino
    January 29th, 2010 7:52 am

    Great examples, thanks for the article.

  89. 104
    A.J. Kandy
    January 29th, 2010 9:56 am

    While this might be a useful starting point for designers to learn cultural color associations, it’s not at all “color theory” in the strict sense. Red, yellow and blue might be “primary” colors in the common cultural context, but that’s completely incorrect and even harmful information for anyone trying to learn to create color formulae in software or mix inks. It would be helpful if you either retitled the piece, or included some proper RGB (additive) and CMYK (subtractive) charts off the top — as well as graphics that explain the concept of tints and shades (so-called 3D color space).

  90. 105
    Ched
    January 29th, 2010 11:26 am

    As designers, we should know that the RYB color wheel is outdated and incorrect. Hopefully they teach that in today’s design schools. Why include the words ‘color theory’ and then kill all credibility with such a glaring error? Why even mention the subtractive model?

    Let’s not misinform people just for the sake of a title. If you don’t know, don’t pretend; daddy will still let you play with your crayons.

  91. 106
    Yheng
    January 29th, 2010 3:54 pm

    Nice example of website lists.

  92. 107
    alfredo
    January 29th, 2010 8:31 pm

    nice article… but seriously, this is Graphic Design Theory 101, not an article “for designers” as described. this would be helpful for the rest of the people, though

    And I also think that “meanings” of colors are not to be taken literally.

  93. 108
    staaa
    January 29th, 2010 8:33 pm

    Color Theory for Designers, Part : The Meaning of Color

    Color in design is very subjective. What evokes one reaction in one person may evoke a very different reaction in somone else.

    Love the site :)

  94. 109
    Mandar Dighe
    January 29th, 2010 11:18 pm

    Great insight about colors, looking forward for other parts, i always am in search of the articles about colors.

  95. 110
    Kresna Akhmadi
    January 30th, 2010 12:35 am

    Perfect article, it’s reveal all i need

  96. 111
    micko
    January 30th, 2010 3:08 am

    This is exactly what I’ve been looking for. I think choosing right colors is hardest part of designing.

  97. 112
    Mete
    January 30th, 2010 4:02 am

    Great Article!

  98. 113
    Conpanna
    January 30th, 2010 5:23 am

    @woodshed – I totally agree with you, the overall color scheme and feeling is what matter and what one solid color means.

    West and East meaning of colors – even in the Feng-Shui you can find examples of color combination between ‘bad’ colors to the situation and ‘good’ ones.

    Nice work, nice articles . I’m waiting for part 3…

  99. 114
    René
    January 30th, 2010 6:57 am

    Hi
    Interesting read, fascinating information. I’m new to this so I got two questions.
    Firstly, is there a term for the design of using two of the ‘same’ color with different brightness, e.g. goes gradually fra bright to dim from left to right?

    And call me dumb, but what’s the distinction between bright and light in color?

    thanks :D

    • 115
      Adrian
      February 2nd, 2010 5:08 pm

      bright and light are not strictly color theory terms but…..
      a bright color would be high saturation high luminance, as in bright yellow
      a light color would be low saturation high luminance, as in light or pale yellow

  100. 116
    Artlesspixels
    January 30th, 2010 7:30 am

    nicely done! very informative mucho!

  101. 117
    DanielthePoet
    January 30th, 2010 5:38 pm

    Dear Smashing Magazine, i hate it when i want to leave a comment and then have to scroll to the bottom of all comments to leave mine. I would much rather leave a comment at the top, as most of my comments will be to the article, not to someone else’s comment.

    Thanks.

  102. 118
    SmashinGeeks
    January 31st, 2010 1:13 am

    Thanks for Sharing Some great Links

  103. 119
    Ismail Biltagi
    January 31st, 2010 2:43 am

    Great article :)
    but in Egypt Yellow is not a color for mourning !

    • 120
      Dina
      February 8th, 2010 1:43 pm

      YES ,,, i was trying to clearify that!

  104. 121
    saidonaro
    January 31st, 2010 5:34 am

    Nice! I’ve learn much from this article! Thanks, cameron! :)

  105. 122
    Wai
    January 31st, 2010 6:15 am

    Thanks a lot. This is invaluable. I hope part-2 will be published soon.

  106. 123
    ram
    January 31st, 2010 8:35 am

    It’s was very good understanding about colors.. and very useful.Excellent article! Thank u! Cameron

  107. 124
    ChrisKirkman
    January 31st, 2010 10:21 am

    Fantastic read. I liked having all of those examples for each color.

  108. 125
    marco
    January 31st, 2010 12:26 pm

    Bookmarked! thank you for the article, I like the examples. This article reminds me of school days where I studied psychology, about colors :)

  109. 126
    Ekrem Büyükkaya
    January 31st, 2010 5:18 pm

    That is really awesome. Thank you for such a great tutorial!

  110. 127
    Paulo Nasol
    January 31st, 2010 7:18 pm

    Thanks for the excellent article. The web samples really helped define the effects and emotions given by each color.

  111. 128
    deanoski
    January 31st, 2010 8:14 pm

    Good article. Maybe part 2 should be about colours and printing.

    Too many people want to print colours that are RGB but don’t understand that printers print CYMK. Or want a pantone colour on digital print job but don’t understand why CMYK will never match it exactly.

    Clients, designers & photographers alike sometimes want to achieve different colours that are outside the CMYK and pantone colour gamut but dont get that you cant print that.

    An article on this topic would be beneficial for a lot of people.

  112. 129
    Porscha
    January 31st, 2010 8:25 pm

    How come it hasn’t been mentioned that red can cause fatigue when used on websites?

  113. 130
    ardyonline
    January 31st, 2010 11:13 pm

    i love this entry!

  114. 131
    Chris
    February 1st, 2010 12:44 am

    I heard green is neither cool nor warm. Since it’s a mix of blue (cool color) and yellow (warm color) depending on what it is associated to, its signification becomes warm or cool.

  115. 132
    kozeyar
    February 1st, 2010 1:57 am

    Hi, Cameron.
    Thanks alot for this post and waiting for upcoming parts

    Cheers!
    Zeyar
    From Myanmar

  116. 133
    stella
    February 1st, 2010 5:27 am

    no pinks?

    great article though.

  117. 134
    orosznyet
    February 2nd, 2010 10:19 am

    Very nice article. I translated into my own language :P

  118. 135
    Heidi
    February 2nd, 2010 8:12 pm

    Great article! Thanks for sharing with us.

  119. 136
    sidman
    February 2nd, 2010 11:00 pm

    Excellent job Cameron!
    Thanks alot = )

  120. 137
    russelpea stickers
    February 3rd, 2010 9:25 am

    Great work, thanks for all the examples.

  121. 138
    Jen
    February 3rd, 2010 2:55 pm

    Excellent article, thank you so much for sharing! Saved it in my bookmarks, definitely a great resource…

  122. 139
    Arvin
    February 3rd, 2010 9:34 pm

    As a programmer learn a bit more about design, I find this article very helpful

  123. 140
    Ashutosh Shukla
    February 4th, 2010 3:20 am

    Nice !

    learnt a lot from the post, about colors and thier significance. First time I came across such a learning >> so desciptive in a very short duration.

    thanks.

  124. 141
    bahareh
    February 6th, 2010 1:36 am

    Thanks for the excellent article. I’ve learn much from this article.

  125. 142
    AteljéDigital
    February 6th, 2010 2:47 am

    Wow, that was very inspiring!
    I too expected one of those standard teory pages. This was awesome.

    Thanks for your work, keep it up!

    best regards
    /Jocke

  126. 143
    George Birbilis
    February 6th, 2010 9:53 am

    an oasis for our tired eyes :-)

  127. 144
    Dina
    February 8th, 2010 1:41 pm

    I like the article a lot,, really good work.
    but i have one comment, coz im from Egypt, and we don’t use yellow for mourning as you mentioned! it is black that is associated with sadness and loss of loved ones, and of course mourning.
    so other than this great job =)

  128. 145
    Dave Wilkinson
    February 8th, 2010 2:16 pm

    What a great piece of work, many thanks, it was truly inspirational. Looking forward to part 2.

  129. 146
    Janet
    February 9th, 2010 7:29 am

    Could you show some examples of colors that don’t work well on web sites? Or common color mistakes?

  130. 147
    WALKER B. D.
    February 9th, 2010 7:31 am

    I LIke it, even for who don get a job how web designer, this article was very good. I think was awesome!

  131. 148
    curtis
    February 9th, 2010 7:48 am

    I have always loved using grey for its professional look. It’s good to know that I’m not the only one that thinks so.

    On a side note (and not to be a grammar Nazi, but I figure a magazine doesn’t mind help with editing…), there’s a grammatical error in this sentence: “It’s sometimes used in it’s darkest forms as a replacement for black, either in backgrounds or typography.” The second “it’s” should be a possessive “its”.

  132. 149
    Keith, M
    February 9th, 2010 7:56 am

    When I was in college for advertising design we HAD to take color theory…it was a pre-rec for all design classes. My instructor was a little batty but said something that totally makes sense “Copy your design with a b/w copier, does the shades of gray look good? If not the color choices are wrong and dont complement each other. You need to follow the color wheel…only after you have mastered that can you break the color rules.”

  133. 150
    Wes Crockett
    February 9th, 2010 8:06 am

    Can’t wait for the third one! :D

  134. 151
    Luke Spencer
    February 9th, 2010 8:21 am

    Hey, great post…I feel like I am color blind, but I am not really color blind. I guess I am color slow. This is a very informative post, I am working on purchasing a new website designer and will need some color instruction. I will bookmark this post.

    Luke Spencer
    Pop’s Survival Guide

  135. 152
    Aravind Jose T
    February 9th, 2010 10:25 am

    The effort put into making something this awesome can NEVER be ignored.
    KUDOS and tons of Thanks for putting this up.

    Loved the Part 2 and Part 3 too.

    Cheers!

  136. 153
    James Daggon
    February 9th, 2010 11:21 am

    As an engineer, and mostly tech-type of guy, the color aspect of things has alwyas impressed (yet eluded) me. Thanks for the primer I needed. Now for Part 2 &3…….(can’t wait!)
    Thanks again for the effort to help those of us who are not designers by talent (or at least me!)

  137. 154
    Richard Choi
    February 10th, 2010 12:08 am

    I love this article! I will focus your post continuously. Thank you!

  138. 155
    Mohamed
    February 11th, 2010 10:21 am

    Yep. Yellow is not for mourning in Egypt. That’s black you’re talking about.

  139. 156
    Jeffri
    February 12th, 2010 11:05 am

    This is really great. Thanks!

  140. 157
    Jeffrey
    February 14th, 2010 7:31 am

    Though I find the article useful, I have one question about your first paragraph which makes me think you either don’t know what science is or you don’t know what subjective means. How can color theory be both subjective and scientific?

  141. 158
    James
    February 14th, 2010 10:32 am

    awesome article. all I need now is a good CSS layout article.

  142. 159
    Grammar Girl
    February 15th, 2010 4:35 am

    Typo/grammar error:

    It’s sometimes used in it’s darkest
    forms as a replacement for black,
    either in backgrounds or typography.

    The first “it’s” is correct (means “it is”), the second one should be “its” (meaning “belonging to it”).

    • 160
      Christiane Rosenberger
      February 16th, 2010 2:30 am

      Typo fixed. Thank you, Grammar Girl :-)

  143. 161
    Biff
    February 16th, 2010 10:48 am

    “Blue … has spiritual and religious connotations in many cultures and traditions (for example, the Virgin Mary is generally depicted wearing blue robes)”

    I think when Mary is depicted in blue (at least in Renaissance and older works), it’s a regal representation. If I’m recalling Art History correctly, the ingredients required to make a bright blue were some of the most rare, so this color was reserved only for very important individuals.

    Interesting tidbit!

  144. 162
    ferdy
    February 18th, 2010 3:12 am

    Cool…nicely :)

  145. 163
    Tony Trapolino
    February 19th, 2010 11:31 am

    Impressive article. Very well composed. Definitely part of my reference collection now. Thanks!!

  146. 164
    Leatrice Eiseman
    February 22nd, 2010 4:48 pm

    What an excellent article! As I have written seven books on color and am constantly updating information on my blog, I am always looking at meaningful, content-rich information on the web and you have accomplished that.It is also refreshing not to see some of the urban legends that are passed off as factual, for example, yellow causes irritation. There is not one study to justify that claim– it was started by someone who simply did not like the color!!
    Thank you again,
    Leatrice Eiseman
    Executive Director, Pantone Color Institute
    Director, Eiseman Center for Color Information and Training
    Eisemancolorblog.com
    http://www.colorexpert.com

  147. 165
    Lisa
    February 24th, 2010 1:47 pm

    Such a great article! Color theory has never been explained so well and thanks for the examples. I am definitely going to bookmark this one!

  148. 166
    PV
    February 25th, 2010 1:50 am

    This article is really helpful for people to come up with good combination of colors when designing web pages/applications. Thanx for sharing such a nice article.

  149. 167
    Patty
    February 25th, 2010 7:49 pm

    Great article. It really makes you think about color. I not so sure I think of yellow as deceit or cowardice but rather joyous!

  150. 168
    Nabil Moosa
    March 1st, 2010 4:22 am

    This article is really inspiring for color-challenged designers like myself. This should actually be used as a beginners / standard article for amateur designers everywhere. Good work! Looking forward to more from your end!

  151. 169
    Borden Rhodes
    March 14th, 2010 1:02 am

    Good effort, but the article is fundamentally incorrect. Hue (red, yellow, violet) does not determine colour temperature; undertone does. Undertone is a more esoteric topic which make-up artists, decorators and image consultants use to explain why girls should only wear some kinds of red lipstick but not others or why the hunter green upholstery seems to clash with the lime green walls but not the burgundy pillows. The rule goes that colours with a yellow undertone are warm and colours with a blue undertone are cool. Ever wonder why aqua blue reminds you of a sunny beach and not a frozen lake? It’s because, although blue, it has a warm yellow undertone.

  152. 170
    Gordon Gregory
    March 17th, 2010 3:32 pm

    Excellent article. I really got a lot out of the examples and the information presented.

    I have bookmarked the site to refer back.

    Thanks!

  153. 171
    Mohmmad Zakaria
    March 18th, 2010 8:40 am

    Thank you Cameron for this Great Info

  154. 172
    Peter
    April 5th, 2010 10:43 am

    Wow, just finally got around to reading the article and just noticed my buddy’s site was listed under the “neutral” section. Congrats to Trevor aka Media Soldier. 19 years old and he’s already making a huge name for himself. Keep an eye out on this up and coming talent =)

  155. 173
    Wdeveloper
    April 15th, 2010 1:51 pm

    Excellent,

    Thanks for this great article.
    http://www.colortools.net

  156. 174
    naveenrao
    April 24th, 2010 7:15 am

    Nice article, Found it usefull

    Hope this continues

    Thanks

  157. 175
    Anonymous
    April 29th, 2010 7:22 pm

    I can’t believe you mention nothing about additive and subtractive color schemes. Red, yellow, and blue are NOT primary colors. You need to do some research because you do not understand color fundamentals.

  158. 176
    Mark
    May 19th, 2010 6:59 pm

    fascinating! I’m not a web designer, but I love to learn new things. I learned quite a bit here. On note though… a yellow ribbon is not really a cultural thing. It’s traced back to a cheesy song, “Tie a yellow ribbon around the old oak tree” by Tony Orlando and Dawn. It became associated with the hostage crisis in Iran and has since become a symbol of homecoming.

  159. 177
    Kirk
    June 9th, 2010 8:18 am

    http://colorbrewer2.org/ is a good website to test color combinations for maps… maybe it works for websites and other apps too.

  160. 178
    theo
    June 9th, 2010 12:21 pm

    i like this one
    “The dark red on this site, because it’s combined with grunge elements, seems more like the color of blood.”
    in combination with people shapes, gives the power of people, labor force

  161. 179
    jess
    June 14th, 2010 5:37 am

    pretty good info thanks!

    im trying to find a colour theory class any clues?

  162. 180
    vicky
    June 20th, 2010 9:09 pm

    very2 use full…..thankks

  163. 181
    tom
    June 27th, 2010 10:36 pm

    Useful information for printing students. Very good.

  164. 182
    Ban
    June 28th, 2010 9:43 pm

    Hello, anyone can tell me about Earthy color? Is it brown with some orange?
    -Pastel Color
    -Retro Color
    -High-Tech color
    This 3, what color is belonging to them?

    Thanks for answering

  165. 183
    medha
    June 30th, 2010 11:37 pm

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

  166. 184
    CH. Lalit Mehla
    August 31st, 2010 11:05 pm

    amazing article

  167. 185
    njmehta
    September 2nd, 2010 5:53 am

    This stuff is very important to people involved in web design. I will probably even use this site as a reference for the future.

Leave a Comment

Make sure you enter the * required information where indicated. Please also rate the article as it will help us decide future content and posts. Comments are moderated – and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!



Advertisement Advertise with us!
Add this widget to your site!
Visit job board Post your job