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!
Tags:
About the Author
Author
Peter M
Go to My Shop
Related Articles
15 Comments
  • Very nice article, can use this for future designs and such! thanks :) 6 years ago
  • I love a great and interesting color scheme. I think many underestimate the value of well done color combinations...so I absolutely ADORE when someone comes up with a rarely seen yet exquisite color scheme with perfectly balanced colors. 6 years ago
  • I was in a need of having amazing color palettes at my hand and created my own trendy swatches for Illustrator. They have being super helpful and I decided to share them with all designers! https://creativemarket.com/pixelbypixel/105765-Colour-Trends-Modern-Swatches-Vol1 6 years ago
  • This color scheme in-browser app lets you quickly design a color scheme using the various models mentioned in this post: http://colorschemedesigner.com/csd-3.5/ Another recommendation I have: http://design-seeds.com/ -- anybody could do this (pick colors from a photo to build a color scheme) but this designer chooses really beautiful pictures and then finds the really attractive colors in them -- just pretty to look at even if you don't use them. 6 years ago
  • It felt like I just revisited a lesson from my design school days. Great article! 6 years ago
  • Thank you for this! 6 years ago
  • This is great! Thanks for posting it. I tried to print out the cheat sheet to laminate it, but the color combinations for the font (white/pastel) are hardly legible when printed. The backgrounds eat a lot of ink, too. 5 years ago
  • This is great, thanks for posting and sharing with us! 5 years ago
  • I couldn't download the cheatsheet ! It's so helpful thx! 5 years ago
  • Is there a list of codes for color--- like example the code for black is #000000 Thank you Photogal007 5 years ago
  • Thanks! Just a query: I can't download the cheatsheet. It just opens in another window. I'm on an iMac ... not sure if that makes any difference? Thx again!!! 5 years ago
  • . . ★ . . :: beautiful presentation on the principles of colour theory . . a subject I study every day and love so much :)) :: . . ★ . . 4 years ago
  • . . ★ . . :: this is very helpful . . an eyedropper colour pick extension tool by google chrome on your desktop . . it's fantastic . . When you see an image online in a colour tone or hue you love select your favourite colour values from webpages . . it provides the hex code as well so you can enter it into photoshop colour picker foreground colour for backgrounds or text . . graphic design . . etc . . it is useful and wonderful! :) https://goo.gl/h5bdJy :)) . . I also use Colour Hex . . (color-hex) . . A wonderful resource where you may search for create and save your favourite colours + experiment with colour theory + explore complimentary colours as well as to create your own palettes . . details provide Triadic, Analogous, Monochromatic, Complementary, CSS Codes, Text Font Colour, Text Shadow with Hex Values, Related Colours + more . . you can easily get hooked on this . . I love it! . . create your own profile . . it's free . . . here's mine . . . . . http://www.color-hex.com/member/naturalimpressions :: . . ★ . . 4 years ago
  • Excellent article! 4 years ago
  • An excellent tool for exploring colors (and getting the hex codes for the ones you like) is https://coolors.co/. So much fun. It can eat up hours of your life in pure color bliss. 3 years ago