Color For Developers, V1

It is time to open the temple.
The secrets of the art ones can finally be spoken. Having gone to a school that was too expensive then and ridiculously so now, I am a fully qualified shaman of these mysteries. Line up to the left of the Hibachi and keep the coals smoldering.

The great truth is an anthem that has rung true from the beginnings of byzantine painting to the abstract impressionists:

Warm colors advance, cool colors recede.

That is the first axis. Hue, the amount of color & it’s context are primary definitions of what will be perceived in which order.

Sounds simple, doesn’t it? Like a little saying to remember a musical scale, it is easy to recall. It happens to be the basis of hundreds years of painting explorations, which influenced a couple of formal design philosophies - what some people call Swiss Modernism & the International Style.

The real connector here is a Mazdaznanian cultist employed by the Bauhaus - Johannes Ittens. In a nutshell, he liked to draw mandalas and label them. Now we call them color wheels. His codifications of color theory have been disseminated by Bauhaus students who became teachers, and their students, globally since 1919.

Historical theatrics aside - I am trying to pad this because it is really pretty straightforward - warmer colors dominate your attention. But wait, there’s more.

The other axis is a cognitive one that is more elemental than color - our perception of contrast.

The highest point of contrast becomes a focus point as well.

This is strictly about tone; the interplay of light and dark. Shape and scale work in a different way; context is more important here. A good example would be stars - not that bright or large, but you can’t help but notice them.

So imagine two sliders, one that goes from warm to cool colors, one from high to low contrast. High contrast and warm colors converge at one end of the slider, but cool high contrast areas can dominate perception if the context is controlled.

Additionally, the scale is relative. In a very pastel environment, we are still biologically compelled to compare & discern. We will look for the warmer tones & highest available contrast.

So there you have. Welcome to priesthood, those tattoos will heal in a just few weeks, and you’ll be ready for the piercing.

Comments

[Rick]

Helpful posting, and one that more developers should read. You ought to post this over at http://www.dzone.com - a digg-like site specifically for developers. I bet people would like it there.

[Ivan]

This is a great intro. I've been looking for a concise set of tutorials about color theory and presentation as it applies to UI. looking forward to the rest!

[uberalex]

Interesting article. I am curious as to why you chose a high-contrast menu with warm colours to pull the eye away form the text though.

[CharlesF]

Hi uberalux

I think you make a good point about the warm colors - they happen to be the visual code for "link" on the site though, so there is a symbolic element to the choice.

But the grey background behind the links allows the column to remain black type on white; the highest point of contrast. [It's relative.] Not sure it quite trumps the warm hue though.