Source: Chris Glass, Cincinnati, USA (flickr.com)
[CC-BY-2.0 (http://creativecommons.org/licenses/by/2.0)], via Wikimedia Commons

Fall Colors

Posted November 6, 2013, under Gosh, That's Handy!

The best thing about autumn (besides the extra hour of sleep when the Daylight Savings switch happens) is the way the leaves change color. As the great philosopher Bill Watterson (of Calvin and Hobbes fame) said, “It’s like nature’s own fireworks display.”

Kapow! Fwoosh! Zingg! (Source)

Unless you live in Los Angeles, where the only colors you can really count on are shades of brown.

And cleanup is practically a civic disaster. (Source)

Now, a quick query to the online search engine of your choice will reveal the reasons behind the leaves’ color change, but since we’re designers, we’re a little more invested in a different question.


What Is Color?

Color theory is a huge deal in the design world, informing thousands of design decisions at every part of production.

There are lots of ways to make color – for instance, you’ll be thrilled to know that food dyes can be made using anything from coal to South American insects.

But what we see as color is simply a function of how light bounces off of things and into your eyeballs.

You could think of light as a fire hose, sending out a solid stream of white. When the stream hits, some of it stays on the target, some of it splatters. The splatter in this analogy – what bounces off – is the color that you see.

Black is no color, because black doesn’t allow any splatter.


Different Strokes

The physics of color is one thing. Using that physics to achieve your desired effect is another.

It is possible to make better color through chemistry. Fortunately, we work in the design world, not the food dye world, so we don’t have to deal with bug paste. Instead, we’ve got the difference between your electronic display and print.

The left is what all your online cat pictures are really made up of: Tiny dots of red, green or blue (RGB). On the right is what all your printed cat pictures are made of: cyan, yellow and magenta. RGB is for monitors; CMYK (“k” is for “black” because someone was feeling contrarian that day*) is for print.

You might be thinking right about now that your cat pictures have way more than three or four colors. And they do, but only because all of those other colors are derived from those three or four basic colors.

You see, when two colors really like each other, they get close together and make a whole new color. Those combinations make up the visible spectrum, like one big, happy family.

* Or because the “k” stands for “key color,” or “keyline,” since black was the color used to line up the other inks when printing.


Fifty Shades of “Oho, We Went There”

But some colors just never get together no matter how much the fans complain, and that’s where Color Attributes come in.

rainbow

Check out this picture of a rainbow. What colors don’t you see?

Maybe you did see the click bait article claiming that pink isn’t a color because it’s not in the rainbow.

Some colors are made by mixing colors that aren’t adjacent on the spectrum, and varying their strength. This is monitored by the color attributes of Hue, Saturation and Value.

Hue is where the color is on the spectrum.

Saturation is how much color it has. This dictates how dull or vibrant a color is. You can get pink by washing a red sock with your whites, or you could just dial back the saturation.

Value or Brightness is simply the degree of light or dark.

These attributes are the inseparable trio of color definition, and when applied to design software like Photoshop or InDesign, allow us to precisely refine your design for maximum communication.


Colors Talk. Sometimes They Sing.

Not what I meant, but those guys are pretty good, too.

You may be familiar with the color wheel. If not, we guess you’ve never been dragged to Home Depot by your significant other to pick out the perfect color to paint the bathroom, even though you privately think the current color is just fine.

Anyway, the color wheel is a fantastic tool for working with color (and if you’re interested, this website is a fantastic site for working with color wheels).

With color wheels, you can see which colors complement each other and which don’t.

You can easily select primary, secondary, and tertiary colors in your design.

You can contribute to the tone of the design with the “color temperature.” 

JohnHughes

Director of iconic ’80s coming-of-age movies not actually included.

Collectively, these relationships are referred to as “color harmony.”


So Close, Yet So Far Away

There are many, many decisions related to color that go into any visual art piece, very much including your printed items and websites.

Distance or depth is one more of those. Though the effect is often overlooked by designers or photographers, colors interact with each other and with the viewer to create an illusion of space. When it’s done wrong or ignored, the result can be dizzying, even revolting.

Color depth and color harmonies are closely linked, and using them in tandem can often make color choices obvious, or at least easier.


As you’ve seen, there’s a lot more to color than simply arbitrary assignments to gender identity, and there’s a lot more to it than we’ve even covered. But now you’ve got the basics, and we’ve managed to do the whole thing without one reference to the United Colors of Benetton’s shock advertising.

…Oops.