Hello, I'm Chris Murphy — I specialize in creating engaging, user-centric interactive experiences.

Getting emo with color

Color is an important aspect of design, and understanding various facets of color can help to better your work and improve the value of your final product. Unfortunately many post secondary courses that target the design industry fail to provide a solid foundation for students in certain areas; Color Theory is one of them. Many designers tend to run with their 'gut feeling', which is only natural because, without knowing why, they are responding to color in a way that we all do - emotionally.

The use or misuse of color is an important factor in any design. Whether the application for color is for print, screen, broadcast etc., it is important for designers to understand what color is and how we respond to it. I am not about to write a whole book on the subject; all you have to do is visit your local Chapters bookstore (or Barnes & Noble if you live state-side) and troll through the various visual arts sections to find masses of books on said subject. Instead, the intent of this particular posting is to address questions that designers have asked me on my particular use of color in my work: “How do you get contrast into your design?” and “How do you make colors jump off the screen?”

In reality, both questions are related more closely that it might seem (I always like that last question; I’ll refrain from my typical response and leave you to form your own). As for the first question regarding color contrast, it’s a little more involved than simply picking contrasting compliments or matching a light tint against a dark tint. Take a step back and try to forget what you know about color for a moment. It’s not so much that the colors look like they contrast but that they feel like they contrast. I have mentioned the typical approach to thinking about color and its application but one factor that seems to go largely unused or misused for that matter, is that color’s most powerful attribute is its ability to evoke an emotional response. Color is the perception of light, or more accurately the lack of perception.

A ‘red’ apple does not emit red light. Rather, it simply absorbs all the frequencies of light shining on it except the frequencies we call red, which are reflected. An apple is perceived to be red only because the human eye can distinguish between different wavelengths. Three things are needed to see color: a light source, a detector (e.g. the eye) and a sample to view. Source: Wikipedia

Color also brings about a reflex action upon the vascular system if not only through the emotions associated with the colors (Birren, 1978). These emotional excitements, which are recognized through changes in blood pressure, pulse-frequency and rhythm, are brought forth through associations made with the colors presented. Source

With that in mind, think about how certain colors can provoke a response. A combination of responses creates an experience. So when we design with color, what we’re really doing is designing an experience. So before you start mashing pixels together in your next design, ask yourself this one question: “What kind of experience do I want to create?”

When I sit down to put together a layout for a website, logo, or print piece, I try to figure out the emotional response a person might have to it; or in contrast – how does my client want to stimulate their audience? Pick one color that embodies your primary goal or evokes the necessary response, and then select colors that will surround and support that main color without diluting it.

What’s really happening here is that you are not explicitly selecting colors that are strict contrasts; the colors can be in the same spectrum, close in temperature (frequency), and might even be a tertiary. The result is contrast created by intelligently selecting colors that will support your main color. In literary terms, you could think of this as a theme. Be aware, some colors in combination might completely “pop off the screen” but overpower your main color. Try not to select colors that fight with one another; consider temperature or intensity; and always keep your final goal in mind.

It’s all about working in concert and building an experience.

Note: There’s a great little effect that gives me migraines every time: the Bezold Effect. Ever see those sites with the magenta text on a cyan background? Instant migraine.

I have a small color pallet that I created over the years and narrowed down to what seems to work best for certain types of jobs. The colors are a selection from each portion of the spectrum and have their equivalents for print and for screen. Picking the right colors, whether, compliments, tertiary, triads, or monochrome and using them correctly can help you bring your designs to life.

One really great side-effect of good color selection is that photographs have a tendency to appear more vibrant and if you use your contrasts properly, text and content become that much more legible. The best advice that I was ever given on how to choose colors is to look at life. Photography is one of my better sources for color ideas, especially cross-processed photos like you might have seen on photography sites. Search Google Images for Ektachrome Elite, E6 Film in C41 Chemicals, C41 Film in E6 Chemicals, etc. You’ll get the idea when you see some samples.

Try to remember that certain emotional responses can be generated from a number of different colors (color frequencies), though not everyone will respond in the exact same way to the same color – there is a whole science behind this and its constant evolving; we refer to it as Color Theory.

A great example of how color is used to generate emotional responses can be seen on the CBS television series, CSI. The various spin-offs all have their own unique color palette that’s appropriate to the region; not only that, but within the episodes themselves, color is used to enhance the emotional impact of scenes. The same theory can be applied to design with great results.

Obviously there is much more to designing with color than thinking in these terms, but right now we’re only talking about color and its emotional impact. There are a number of sites out there that explain color in much more detail than I have done here. Take a look at some of the material on Colormatters.com, worqx.com. There are also a number of sites out there with a few handy tools like ColorBlender.com. I love ColorBlender.com because it lets you save out Photoshop color tables and can even match it up with print ready Pantones. Another handy site is this one and of course Jon Snook’s Color Contrast Tool.

Take the time to consider how color really works and how it affects us. Good design is not only about great visual presentation but about connecting with the viewer. I like to consider graphic design as a practical application of fine arts. If it sounds a little emo, well it is; but when you’re trying to justify why you selected certain colors for a particular project then at least you have something to fall back on instead of the typical response: “It looks so cool!”

Additional reading:

  1. The reds, whites, and blues of emotion. Read It.
  2. Relationship between color and emotion: a study of college students. Read It.
  3. Understanding color emotion triggers. Read It.

Technorati : , ,


Comments on This Post:

  1. Mahud
    Date: November 17, 2006
    Time: 4:50 am

    This is an area I’d like to learn more about. My approach is to just throw colours together in the hope I’ll chance upon a workable combination. Hopefully I’ll be able to get my head around this stuff. Thanks for the reading material! :)

  2. far from fea…
    Date: November 21, 2006
    Time: 5:01 pm

    [...] [...]

  3. WordPress Th…
    Date: January 24, 2008
    Time: 3:30 pm

    [...] my previous article "Getting emo with color" I discussed the benefits of understanding the emotional impact of color. …think about [...]

Add a Comment: