Capturing the colors

Maria Matveeva

Director of Design

Maria Matveeva

If you’re interested in learning about color for UX Design, we’re teaching a hands-on workshop on October 29th!

Red fall foliage

For me, autumn is the most fascinating time for colors. The obvious fall foliage attraction (all the streets and parks are suddenly so pretty!) and the fall fashion (summer was casual, fall calls for a slightly dressed-up, more academic, more pulled together style) combine to create an intense appetite for color. Naturally and seasonally, I am attracted to the rich earthy rust and gold in the leaves, but also the burgundy, darker navy and all kinds of leather colors that people wear to the offices downtown.

There’s just one problem. The color effects of autumn are frustratingly difficult to capture.

Difficult to capture.

The fleeting nature of colors in the fall increases my fascination with them. It’s not just that the leaves change every day, and shrivel up and dry within hours of bringing them home. It’s the difficulty of reproducing how these colors feel. Peak foliage color attracts crowds every single year. Everyone dutifully takes photos. But those photos rarely compare to the vibrant feeling in real life.

Comparing fall colors to an approximation of what the camera might see

How the colors feel in real life (left) does not always match up to the photographic results (right). But which one is more “real”?

You can’t always capture what’s in your head

The reason photos often don’t live up to out vibrant expectations (think ~90% of all sunset photos ever) is partially that the camera is only able to capture a small part of what our eye can see (the human eye has a very high dynamic range), and partially our brain.

The way our brains “read” colors is not only based on the colors’ measurable intensity, hue, and brightness, but also on the context. For fall foliage specifically, we might “read” a very saturated orange in the maple leaves when they are surrounded by less saturated brown leaves, grass or buildings, and against a complimentary blue sky.

So, I imagine that reality is somewhere in-between: my brain makes the fall colors feel very intense, while a camera might dull them in the process of trying to capture all the information.

A way to look at colors

Today at the library, I picked up this book on colors – Mix your own watercolors : an artist’s guide to successful color mixing by John Lidzey. I have painted with watercolors for a while, but this specific book attracted me because of its focus on mixing specific shades of colors and getting predictable results. In the introduction, John Lidzey makes an important point distinction: colors will always appear to be a certain way, but we actually need to measure and isolate them to accurately understand the hue and value of the color before we can reproduce it. Context can change a color, and we can only truly see it by isolating a swatch.

Open book with swatches

He suggests making a simple tool to help judge colors: a white paper card with a small square cut out of it. Because I am interested in color for many uses, not just on (white) watercolor paper, I modified this tool to have a neutral gray and a black context for the small cut-out as well.

DIY - making a color tool

DIY color evaluation tool!

Here’s what I found

I used my new, very scientific (also, a bit like magic!) color analyzing tool. I found actual autumn leaf colors to be more complex and less vibrant than they first appear. I also confirmed that context can significantly alter the perception of a color — a concept I had learned in my freshman year of design school, but keep having to go back to look deeper.

Here’s an exercise straight from the book:

book without gray swatch

The colors in the still life appear more vibrant than the paint swatches next to them.

book with gray swatch

However, by comparing the swatch of mixed paint to an isolated swatch of the still life, we see the match is very close. Context makes such a difference!

brown oak leaf on felt

The golden-brown leaf suddenly feels dull when brought in to photograph on a lighter color. But the actual color swatch, when framed by gray, is quite saturated and warm. A good choice of context to bring out this kind of brown is any neutral, like I show here with felt.

yellow leaf in three views

Here, a yellow leaf looks quite a bit more intense either framed by gray, or on a backing of a less saturated color.

yellow leaf on top of red leaves

In a pile of leaves, this yellow looks saturated.

yellow leaf on white

The yellow by itself, on a lighter background, still looks quite vibrant.

yellow leaf + flower

Compared with a very saturated yellow flower, we see that the leaf was not such a saturated color after all.

What to do

In summary – I highly recommend making this simple color context tool. It can help evaluate and compare colors in nature, and understand them better. Also, when expectations do not line up with reality, it could be that because the subject was removed from the environment in which it was first evaluated. When I design, I need to use color well. Today’s exercise helped me get a better understanding of just how important context is. I might alter my process in the future, to start with establishing a “backdrop”, or a context, for my color selections. Just like a painter, I might “underpaint” my Photoshop file before I start fine-tuning the accent colors for any given layout.

And I might just use the little gray square trick on my computer screen, when no one is looking.


Stay in the Know

Get the latest news and insights on Elixir, Phoenix, machine learning, product strategy, and more—delivered straight to your inbox.

Narwin holding a press release sheet while opening the DockYard brand kit box