Working with and creating your own Web 2.0 Color palettes

By: Chris Murphy

There is a lot of buzz surrounding the so-called Web 2.0 color palettes that are circulating around the industry right now. In one case, someone had actually taken the time to run through approximately 25 sites considered to be Web 2.0 and collected their primary site colors into a somewhat comprehensive color palette. This is all fine and good and I am sure it will have spawned many interesting variants and applications online.

It is one thing to hand out a color palette and say “run with it!” It is another thing altogether, to actually know what to do with it. So, in response to that particular endeavor and as a follow up to my “Getting emo with color” post, I thought I would take a little time to put together an overview of how to create a palette of usable colors.

If you look at the compilation of colors as assembled by Mike Burke and outputted by Salvatore Sanfilippo, you will notice that the colors are organized by the sites from which they originate. What you do not notice immediately is the fact that the samples are all analogous, with a smattering of tertiary and achromatic colors – but largely analogous never the less.

Analogous colors are any three colors which are side by side on a 12 part color wheel, such as yellow-green, yellow, and yellow-orange. Usually one of the three colors predominates. Source

If you take some time and actually organize the colors into a proper matrix, you will find that there are at least half a dozen of these colors that are the same with only minute differences. From that list of 72 colors you may actually only end up with 20+ colors. For comparative purposes, take a look at the orange colors listed; particularly:

1. RSS Button Orange #ff6600;
2. Furl Orange #ff6c17;

To the naked eye they are the same colors in terms of temperature; now if you go down and start adding colors that are alike, you’ll come up with:

1. RSS Button Orange #ff6600;
2. Blogger Orange #ff6600;
3. Firefox Orange #df7417;
4. Furl Orange #ff6c17;

Do the same with the blue and green colors. You will see the original list of 72 colors trimmed considerably.

What the compilation fails to recognize is that Web 2.0 colors are actually limited to only a handful of colors; variants are made by creating tints, tertiary, or shades of those colors. Try it yourself. Take one of the colors and extract four or five different tints (colors achieved by adding white). Then take the same color and create an equal number of shades (colors achieved by adding black to the mix). You use the same exercise to create tertiary colors.

Note: The term “Tertiary Color” is rather conflicting one as people have learned to create tertiary colors based on different color systems (additive, subtractive, etc.). On a modern color wheel, Tertiary colors are described as being defined as equal mixtures (at equal tinting strength) of a “primary” color with a secondary color next to it on the color wheel. In classical practice, Tertiary colors stood for the dull, unsaturated or near neutral colors inside a color triangle, not the hues of maximum chroma or saturation along its sides.

I mentioned the posting that prompted me to write this response; I am still not convinced that it is a “serious” posting but there are some interesting responses to it.

This web2.0 secret weapon is yours absolutely free – now just mash those colours up, whip up some nice CSS goodness, whack a BETA button somewhere on it, and you’re on the road to riches. Source

Be sure to read the quote in context for clarity, as I’m assuming it’s meant to be a humorous post. If it is not, then I have some serious gripes.

Color selection for a website – whether you want to consider it Web 2.0 or otherwise – is much less about mashing and more about planning. You do not create a good looking website simply by throwing random colors together or by mimicking the colors of popular sites. You create a good looking website by understanding how your color choices affect or influence the user’s perception of your design.

Blogger’s color scheme is attractive because it presents its main brand color (orange) within the context of its supporting color (blue). Contrast is created and attention is drawn to the places where the main color is most effective. In the case of the Blogger website, it is the logo which garners that attention. This approach works for Blogger because it defines its presence amongst the multitude or other similar blogging software. We could go into the whole science behind color and branding but I will leave that for another time. Suffice to say that these sites did not stumble upon their unique look and feel by accident.

RGB Colors range in the millions. You can have a million variants on a single color, whether a tint, shade, or tertiary. It is all up to what you want to accomplish with your palette. Since we are talking about practical application of color in design, I find that the best rule to live by is K.I.S.S. – Keep it Simple Silly. This applies well to color. Keep your color palette simple. If you followed the exercises above, you will more than likely have trimmed that Web 2.0 color palette down from 72 to about 20+.

A few weeks ago, a designer asked me how I come up with my color palettes for a particular layout/design. I know many designers who start off with the actual design and then start applying color afterwards. It works for them and I do it on occasion. But for me, the most productive thing that I do before I start off with a design is defining a color palette the old-school way: play with color like paint.

Since color is naturally occurring, it only makes sense to study color visually, in a natural form. For me, seeing color in rigid blocks does nothing. I do not get a sense of how color is interacting with other colors and it is difficult to see how tints or its tertiary counterparts work. I prefer to play with color as if it were oils, gouache, or acrylics in broad swaths. My illustration below is a result of doing a color study for a recent project.

What you see is a color study based on related colors and how the same colors can be used as contrasts when applied against the other. In some cases I introduced a complimentary color or another tertiary to contrast with the related colors. This is for me, is a great way to see colors in a natural context. The Photoshop color palette I screen-grabbed is a subsection of colors I introduced in my previous post “Getting emo with Color”. The one thing that I find truly important about color selection is how they work against or with achromatic colors. Since Web 2.0 colors comprise achromatic colors as well, it would be foolish to finalize a color palette that does not work well with achromatic colors.

You can see that some of the color selections fight or vibrate with my two main achromatic colors. This is what is called a Bezold effect. I purposefully include the achromatic colors as part of this illustration to demonstrate how to spot conflicts. On the right hand side of each study are tints and tertiaries created by the introduction or white or black. At the center of each study are a series of color blocks that straddle the achromatic backgrounds. You can see how colors become livelier against white and how they are less lively against black/grey. Conflicting colors can be easily solved by using a darker or lighter tint of the base color. This affects the perceived temperature of the surrounding color, and affecting the intensity of the color in focus.

I am sure by now you are asking yourself: “How can I apply this to my design?” My answer to you would be the same approach I stated in a related post. Get emo.

In my experience color is better thought of in terms of a theme. The theme can really be anything from emotion to an idea. I tend to separate the idea from the emotion. An idea is best supported by emotion. Emotion is the backdrop against which an idea is brought to life. Different tones bespeak different emotions and different tints evoke different emotional responses. You can run the spectrum from cool to hot or otherwise neutral/indifferent to passionate.

Take a look at your favorite Web 2.0 sites and try to put them into the context if color and emotion. Forget about content for a moment – what do you feel when you look at the site? Do you feel excited? Do you feel calm? Do you feel agitated? Why? What made you feel that way? If you can answer those questions, then the designer’s job is done. She has created an experience based on color and you are able to respond to it in definable terms.

Web 2.0 color palettes are about harmony between design and content. Color is used as a backdrop for the content and where one does not overpower the other. Create harmony through appropriate color selection and usage and don’t be fooled by those sites that throw color in your face like a rainbow.

So before you start trying to compile you compendium of color, take some time out to remember these simple things:

1. RGB colors number in the millions, trying to catalogue them is like trying to catch a sunbeam – it’s possible but not practical;
2. Conscious or unconscious, colors evoke emotional responses;
3. K.I.S.S.

The color palette assembled by Mike Burke shows a great number of colors without true organization or consideration for application. With a little work you can distill it to something useable and from there, generate your own unique color palette for your next project.

Technorati : Color, Color Theory, Web 2.0

• Posted: November 21, 2006
• Comments: (9)
• Permalink
• Follow This Post: RSS 2.0