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 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.”2 Because of that, he used to instruct his students on breathing, mental, and physical exercises before class. (Which is pretty awesome.)
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.
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, 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. For Android folks, 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.
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.
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.
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.
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.
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.
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.
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.
- Pegie Stark Adam, Color, Contrast, and Dimension in News Design (St. Petersburg: Poynter Institute for Media Studies), 9.
- Adam, Color, Contrast, and Dimension in News Design, 13.