You are reading a MIX Online Opinion. In which we speak our minds. Tim Aidlin Meet Tim Arrow

Opinions

12Comment Retweet

Luminance to Choose A Palette

Oct 28, 2010 In Process By Tim Aidlin

Hue and saturation are not necessarily the most important part of creating a palette. How the colors interact with each other is just as important, if not more important

“I’m not sure about that blue. Do you have a more ‘corporate’ blue? I’ve heard that blue inspires trust.”

Designers hear this sort of comment myriad times throughout their career, and it’s rarely a good conversation. Often the client isn’t even asking for a specific color change, but rather, a color palette that’s similar to sites that resonate with their personal tastes or articles they’ve read about the “meaning of colors”—the theory that blue paired with tan will look much more corporate than a blue paired with florescent orange is one example. Unfortunately, even base colors can be interpreted different ways, as is noted on the Microsoft Office site:

Colors and their common connotations in Western culture

COLOR POSITIVE NEGATIVE
White Clean, innocent, pure Cold, empty, sterile
Red Strong, brave, passionate Dangerous,aggressive,domineering
Yellow Happy, friendly, optimistic Cowardly, annoying, brash
Brown Warm, earthy, mature Dirty, sad, cheap
Green Natural, tranquil, relaxing Jealous, inexperienced, greedy
Blue Strong, trustworthy, authoritative Cold, depressing, gloomy

Frequently, it’s the way colors interact together that make it difficult to create a strong palette for the web. Once he or she decides on a primary color—whether that be corporate blue or royal blue—how does a designer extrapolate that out into a full palette that accounts for the many different places a color might be used on a site?

An easy, expedient and free way to quickly generate a color palette is to use one of the many online tools available:

So how does a designer determine which of the thousands of pre-existing palettes to use? Or what combination are actually worthwhile? One empirical, helpful trick is to refer to the contrast / luminosity of the colors in combination.

Color decisions need to consider contrast because contrast is key to usability. It’s also the most powerful visual information – before hue and saturation – and therefore best capable of guiding attention. Furthermore, it’s much more effective to counteract color deficiency confusion by testing for contrast, than trying to choose the “right” color hue.

http://www.lighthouse.org/accessibility/design/accessible-print-design/effective-color-contrast

In other words, hue and saturation are not necessarily the most important part of creating a palette. How the colors interact with each other is just as important, if not more important.

That’s because people find edges first. The human eye is geared to recognize changes in contrast/luminosity first, before recognizing actual colors. One way to help determine the best choice out of many is to simply desaturate the image and examine the difference in contrast between the colors.

This simple process makes choosing an effective palette much more simple. You’ll note in the color example above, the text in the “not as effective” panels seems jumpy and more difficult to read than the panels above them.

In most cases, the goal of good design is readability and usability. In certain cases, however, it could be advantageous to actually use weakly-contrasting colors to force the user/reader to slow down and digest the content. Of course, this idea is sometimes difficult to sell to a client because it does, in fact, look strange.

The avatars we use on MIX Online is another example of using similarly-valued colors to produce a jarring effect. This forces the user to pay more attention to the image, and sets it apart from the the rest of the content in a very particular way. Below is an example using my avatar and demonstrating the results of desaturating the image.

A real-world example would be going to ColourLovers to pick out a color palette based on the color #0099ff. Below are three nice random palettes to consider.

If we desaturate the colors, we get a different understanding of how they relate to each other.

In the case above, we see that “Automan” has three colors that are of very similar luminosity, making them difficult to use together without causing optical confusion. “Island Mist” is even more even in the luminosity, so it could be very difficult to use these colors together in any extended capacity.

Of course, just because a palette has more levels of contrast in doesn’t necessarily make it a better choice over another. It does, however, help with a sometimes-difficult decision by giving the designer and client empirical information to lean on.

Each person sees color a little differently and has his own tastes. As time progresses and I work on more projects, it becomes evident that clients and designers will often defer to their personal tastes with “creative” decisions such as color. Sometimes, though, getting even the most basic data can help inform a designer’s decision… and can offer a good explanation of why you chose *that* blue, which is just corporate enough.

How do you choose palettes for the sites your build? Do you use any indispensible tools? Just go with your gut? What about mood-boards and creative explorations? Let us know by leaving a comment below and be sure to follow us on Twitter @mixonline.

Follow the Conversation

12 comments so far. You should leave one, too.

fjpoblam fjpoblam said on Oct 28, 2010

Color scheme? I go with a mixture of gut and the interest of the client''s product. For a garden group''s site, I used a gradient from light green to the local sky''s blue (but very light pastel with the blue). For a restaurant I used a gradient of their yellowish menu fading into white (at their request). For a Hawaii rental, I used light turquoise of the ocean waves with dark highlights for the lava cliffs and white highlights for the foam. ...and like that.

fjpoblam fjpoblam said on Oct 28, 2010

(I *do* wish you had a comment editor.) I forgot to mention the excellent tool at http://colorschemedesigner.com/

Tuhin Kumar Tuhin Kumar said on Oct 31, 2010

Really like the way you support the ideology and method by saying it allows you to slow the speed of the user if that is what a design requires.

Moss said on Oct 31, 2010

One thing you have wrong, is the assumption that desaturating an image reveals luminosity.

As you can see from the first image you desaturated, that is not true. If it were true, the blue-yellow combination couldn''t have been labeled "effective", as it''s very hard to read once desaturated. In the same vein, the lower half of the second column looks just fine, and not "not as effective" as labeled.

There''s a proper way for this, and it is Lab color space.

Tim Aidlin Tim Aidlin said on Nov 1, 2010

Moss, I agree with you regarding the Lab colorspace, and personally find it a great tool especially in color-correction. Your point about my particular language is well-taken, and perhaps I could have been a little more specific. I hope you''ll agree, however, that this method in many ways has the benefits of Lab colorspace -- given the context above -- without requiring designers to learn a whole new way of thinking about color.

For those that are interested, check out the standard Wikipedia Article (http://en.wikipedia.org/wiki/Lab_color_space) to get started.

Damien Damien said on Nov 1, 2010

I love color! And I really appreciate articles that talk about how people are creating color schemes for their designs. I come from a painting background and as a result often what I perceive in nature or the environment around me inspires me with colors I think will work well. But I will often bring those colors to apps like Kuler and Colorlovers and then tweak them so they are more suited to a digital environment.

I''m still experimenting and I don''t think I''ll ever have one particular formula for forming color pallets but as I said I enjoy these articles as they do push me to consider how and why I choose the colors I do.

Thanx and good job.

iPhone Development iPhone Development said on Nov 2, 2010

This post has helped me in learning a new area in color concept. Thanks a ton.

Gretchen Gretchen said on Nov 3, 2010

I completely agree. When I was putting together palettes for my new booklet (contains 30 palettes, 10 colors in each) there were many times I''d put a good-looking palette together, only to find out that when I put it in my sample map certain colors either clashed or blended too much. There''s always a lot of reworking between an inspirational palette and the actual thing you are applying it to.

Bernie Bernie said on Nov 3, 2010

Hmmm there''s more to this seeing lark than meets the eye.

blackduck said on Nov 8, 2010

I agree with Gretchen in that it sometimes needs a little real-world testing. I stray a bit from equal sized squares of color for a palette and create them larger or smaller in the amounts they may be used- say outlines or text versus background fill. I also create a light on dark, and dark on light text area with the chosen scheme. It becomes more of a starting mood board as well.

Tim Aidlin Tim Aidlin said on Nov 8, 2010

@blackduck, I think your process of having color swatches of proportional sizes is a useful one, as are the light-on-dark (and opposite) palettes. As you''ve made even more apparent, choosing color is science and art, requiring some significant process and consideration.

Thanks for your comments, all!

Tim Aidlin Tim Aidlin said on Jan 10, 2011

I thought this was an interesting article which relates. It concerns how it''s hard to notice when moving objects change.

http://visionlab.harvard.edu/silencing/