Categories / Tutorials

The Missing Cheatsheet For Brilliant Color Combinations

Peter M May 6, 2021 · 6 min read
Our world is filled with color. When presented in one of its infinite variations it can do everything from convey a message or even influence an emotion. Writing on color can be found all the way through history, from the journals of Leonardo Da Vinci to analysis of the inks chosen by painters of the Renaissance. And it’s of particular importance when it comes to the world of design. Whether you’re drafting up the UX of a website or brainstorming a new brand identity, it’s essential to get a handle on the basics of color. Here’s a quick guide to color theory and how to combine the colors of the world to create something beautiful. Missing Cheatsheet Color Combination Download this cheatsheet →

The Color Wheel

Let’s revisit one of the most basic concepts: the color wheel. You’re probably familiar with this, whether it’s from elementary school or from studying design. The color wheel below is divided up into 12 different color hues. These include primary colors (like red, blue and yellow), secondary colors which are made up of a mixture of primary colors (like green, orange and violet) and also tertiary colors. Using this color wheel, we can mix hues to create new ones, and also combine different hues to create color schemes. ColorWheel

Color Terminology

When it comes to the chromatic world, there’s a handful of unique terms. Being well-versed in the vocabulary will help you out. Hue is a traditional color’s “name”. Like red, or orange. Often when we use color, we really mean hue. Saturation is the relative strength or weakness of a color. Colors in a film for instance, can be saturated like the ones below: Saturated2 Saturated Or, they can be desaturated, like the following: Desaturated2 Desaturated A shade is made by adding varying amounts of black to a pure hue. Maroon for instance, is a shade of red. While a tint is made by adding varying amounts of white. As you might guess then, pink is a tint of red.

The Psychology of Color

You could spend hours reading about the psychology of color. In fact, there’s thousands of books out there on just that. But for now, it’s handy to know the 101. And like the US elections, it all starts with the primaries. Red is the most passionate of all colors. It’s linked to impulse and excitement and works well when associated with food and fun. Blue, on the other hand, is a little calmer. It conjures up cleanliness, knowledge and precision. The boldness of yellow ties in nicely with sport, leisure and kid’s products. Finally, green is suitable for imagery associated with the environment and nature. Colors can be termed “hot”, like orange and red, which are associated with action and emotion. Or they can be “cool”, which connotes water and sky and is a little more relaxed. Warm colors assault the senses, advancing towards the viewer or “popping” as they say. Cooler colors sit back a little and play it, well, yep… cool. From there, we can mix it up, creating infinite variations of color combinations in order to create the outcome we want.

Monochromatic Color Combinations

Remember when Homer was learning how to be a Monorail driver on ‘The Simpsons’? If you recall, the half-hearted lesson basically imparted the fact that the word ‘mono’ meant one, and ‘rail’ meant rail. MonoSimpsons Similarly, a monochromatic color scheme is a color scheme that is just made up of one color (or hue). They’ll include different variations of the one hue. Like a red, a slightly darker red, and then an even darker shade. It’s a color combo that’s easy to create, and is a good place to start if you’re a beginner designer as it’s difficult to make anything that’s too jarring. Monochromatic color combinations can go well when accenting a predominantly black or white site or layout. But they can also be a little dull. Examples: Mono1

Complementary Color Combinations

The next kind of color combination you can make is one that’s complementary. This is made up of colors that sit directly across from each other on our color wheel. Like red with green, or blue with yellow. Complementary color schemes can be seen in nature, like the picturesque beauty of a purple lilac against a green leafy background. They work well when you’re driving for a bold, high contrast look that stands out. It’s best used in small doses like as a heading or a key visual, and avoided for things like body copy. ColorDirectHarmony Examples: Complementary2 Complementary1 PokeCombo GoogleCombo

Analogous Color Combinations

Analogous color schemes are built from hues that sit side by side on the color wheel. Like teal and army green. Or orange and red. They feel harmonious and make for client and eye-pleasing designs. Try starting with one primary analogous color as a base, and then pick your palette from there. Also, be sure your color choices have enough contrast to avoid everything washing together. ColorsAnalogous Examples: Analogous1 Analogous2 AnalogosCombo2 AnalogosCombo

Split Complementary

A split-complementary color combination involves a base color and its two neighbors on the color wheel. It makes for harmonious color combos, but because the colors aren’t as far away from each other, feels less bold or tense. ColorSplitComplementary

Triad Color Combinations

A triadic color combination uses colors that are equidistant around the color wheel. Because of the higher number of hues involved, triadic combos can be bold and vibrant, or cool and calm, depending on the ingredients. ColorTriads Examples: Triad2 Triad1 So there you have it, the five different basic categories of color combinations. They’re a handy roadmap to have by your side before you set off into the ‘bow-adorned world of color schemes, spot colors, Pantone matching and Photoshop palettes.

Experimentation Is Key

Like most aspects of design, color can be equal parts art and science. As much theory as there is behind it, it often helps to try out lots of different variations before settling on your final look. While there’s thousands of years of art history to incorporate into your design repertoire, nothing beats sitting down in Photoshop, or with a notepad and just experimenting.
There’s also a vast range of online tools and apps out there to help you get started. Colourlovers is the perfect place to pick out your own unique color assortment or get inspired by the millions of others out there people have already created. Adobe Color CC is also a handy tool to create color palettes based on real-life objects. Their mobile app allows you to capture fun color schemes that you spot on a day-to-day basis. AdobeColor2 AdobeColor

What Are Your Thoughts?

Got a favorite color, or a color combinations you swear by? Or how about tips and techniques for creating an awesome color scheme? Let us know in the comments.
Lettering Worksheets
Getting started with hand lettering?
Free lettering worksheets

Download these worksheets and start practicing with simple instructions and tracing exercises.

Download now!
About the Author
Peter M
Go to My Shop
Related Articles