--- title: It’s Only Color teaser: Three colors are all you need. tags: design,color,back to basics author: Mike Borsare published_on: 2015-02-23 --- Working with color while designing is really about creating another dimension in your medium. Choosing a successful palette creates a foundation for adding meaning and hierarchy to your design. Although it may seem overwhelming at first, choosing a palette can be a very straightforward process. I've found that three colors are all you need – and choosing them doesn't have to be arduous. Equally, putting them to use shouldn't be stressful. In this post I'll introduce some basic color theory and share a few tips I've learned along the way. Hopefully, it will help inform your choice and use of color – enjoy. ## The color wheel If you close your eyes and picture a color wheel, the image that comes to mind is likely one designed by a man named Johannes Itten. Johannes was a product of the [Bauhaus](http://en.wikipedia.org/wiki/Bauhaus "Bauhaus Wikipedia") and his serious study of Eastern religions. He believed that "our outward- looking scientific research and technology must be balanced by inward-looking thinking and by our spiritual forces."² Because of that, he used to instruct his students on breathing, mental, and physical exercises before class. (Which is pretty awesome.)

Johannes and his students prep for class

Here's the breakdown of Johannes's creation. There are twelve colors on the wheel – three primary, three secondary and six tertiary – represented as hues. The beauty of Itten's design is that it's all you need as a basis for complex color theory lessons or for something as simple as choosing complementary colors. ### The colors - *Primary* – Yellow, Red, Blue - *Secondary* – Orange, Violet, Green - *Tertiary* – Yellow-orange, Red-orange, Red-violet, Blue-violet, Blue-green, Yellow-green

### Some key terms - *Hue* – Another name for the pure spectrum colors, remember ROYGBIV from elementary school? - *Tint* – When we add some white to the hue, thus lightening it - *Shade* – When we add some black to the hue, thus darkening it - *Saturation* – The vividness of a color, from dull to pure ## Choosing a palette When it comes to picking a palette your choices aren't limited to the twelve colors on Johannes's wheel. That can be an overwhelming fact when designing. But the beauty of the wheel is that it's there to guide. It shows that color isn't supremely complicated. There are millions of tints and shades with varying levels of saturation out there, but they all spawn from this simple set of 12 hues; it's comforting. Now let's put things to practice. A good rule of thumb is to begin your design using just black and white. This lets you lay the groundwork for a solid hierarchy without complicating things. Let's say you're working on an editorial layout with a feature up top followed by a listing of articles in a grid. Perhaps the wireframe for that design looks like this. ![Editorial wireframe](https://images.thoughtbot.com/its-only-color/editorial-wire-bw.gif) You can see that we've already started to establish points of emphasis and created a path through the design via contrast. If something is amiss at this stage, color will not be a fix. Only when you're confident in the layout should you start thinking color. We're feeling pretty good about this though, so let's bring in color – remember to embrace simplicity. Pick three colors to work with and stick with them. My philosophy is to have two colors do the heavy lifting and reserve a third in a sidekick role. It's something that can serve as a complement for the more saturated colors to come forward. The two primary colors are then free to establish hierarchy, meaning, pathways, and identity. To find these colors one could look into color harmonies or use a tool like [Adobe Color](https://color.adobe.com/ "Adobe Color"), but when first beginning I find it's easiest to draw inspiration from elsewhere. ### Look around I like to pick palettes from nature and my surroundings. The next time you're walking around the block, try and notice the colors around you. Are they chill, aggressive, wintery, or gritty? Pick out the three colors that define what you're experiencing and give a bit of thought as to why. Your phone is a great tool to help you do this. If you're an iPhone user I highly recommend [Sip](http://theolabrothers.com/ "Sip by the Olá Brothers"). For Android folks, [SwatchMatic](http://www.appbaan.com/swatchmatic/ "SwatchMatic") can lend a hand. Here's some inspiration from my life with the three key colors pulled out. I've also noted the feelings they evoke after the caption.

A brick and sky in Burlington, VT – calm, sturdy

An old railroad engine in Maywood, NJ – industrial, macho

Neon spray paint in Boston's Southwest Corridor Park – energetic,
earthy — Neon spray paint in Boston's Southwest Corridor Park – energetic, earthy

### Check out classic works of art Classic works of art are another great place to seek inspiration. If you look at the masterpieces hung on museum walls, their palettes are simple. Each color plays a distinct role in the composition. Everything on the canvas is purposeful and nothing is extraneous. Lets take a look at a couple of striking examples.

Van Gogh creates three distinct planes with a cool blue and a warm
yellow – cozy, earthy — Van Gogh creates three distinct planes with a cool blue and a warm yellow – cozy, earthy

Georgia O'Keefe creates great depth using only tints of orange with
black – energetic, active — Georgia O'Keefe creates great depth using only tints of orange with black – energetic, active

### Keep this in mind The meaning of color is a science unto itself, dependent on cultural factors, gender, and quirks, and could easily be the topic of an entire academic paper. Since this is out of scope of this post, let's simplify. Color can be broken down into two very broad categories: cool and warm. Warm colors such as red, orange, and yellow are active. Cool colors such as blue, green, and violet are chill. These are roughly split down the middle of the color wheel. Here's a key fact to remember about this divide. Warm colors will always win a hierarchy battle between the two. Think about it like a landscape. The cool blue sky recedes into the background as the earthy, warm landscape comes forward.

Yosemite Valley by Bierstadt — Here, Albert Bierstadt creates incredible depth by playing warm and cool colors against each other. Warm colors create the foreground while the cool colors recede and create another plane for the background.

Let's pull out the three key colors from Albert's painting and put them to work on a typical marketing page. We'll use the same principles Albert used to create his composition. Let's create a base with the sky blue, since it's a cool color. Then, we'll create another plane that sits above that using the dark green. Lastly, we'll utilize the warm golden color to bring things forward once more. ![Albert's marketing page](https://images.thoughtbot.com/its-only-color/albert-wire.gif) ## Using a palette Let's build from Albert's example and put the three palettes from *Look around* into practice using the editorial layout from earlier. First off is the brick and sky from Burlington. Here, sky blue serves as a base because of blue's natural recession as a cool color. Brick red acts as the brand color and comes forward since it's a warm color. Lastly, the charcoal black establishes a pathway through the page by bringing information forward via contrast on the subheadings. Hooray! We're creating dimension by putting things on different planes with color.

The brick and sky palette at work – calm, sturdy

Now for the railroad engine from New Jersey. Here, we let silver serve as the base. It's a neutral color and doesn't like the spotlight very much. Neutrals are the type that want others to shine. Consequently, the dark cranberry red acts as the main color and also establishes a pathway through the page by bringing information forward due to its nature as a warm color on the subheadings. Lastly, the charcoal black serves to anchor the footer as well as provide provide contrast to the button beneath the articles and draw attention to it.

The railroad engine palette at work – industrial, macho

Finally we come to the neon spray paint palette. Here, once again, a cool color serves as the base. This time it's forest green. Ash gray acts as the main color, and the bright orange establishes a pathway through the page by creating focal points for the eye. It also adds energy due to its saturation.

The neon spray paint palette at work – energetic, earthy

## Keep it simple Choosing and implementing your palette should be a little less daunting now. Keep it simple: choose three colors that fit your design and use them to establish a pathway through your design. Use them to bring things forward and push things back. Most importantly, use your palette with a thoughtful hand. ---- 1. Pegie Stark Adam, *Color, Contrast, and Dimension in News Design* (St. Petersburg: Poynter Institute for Media Studies), 9. 2. Adam, *Color, Contrast, and Dimension in News Design*, 13.