The Missing Cheatsheet For Brilliant Color Combinations

By on May 2, 2016 in How To
The Missing Cheatsheet For Brilliant Color Combinations

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 CombinationPin It

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.

ColorWheelPin It

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:

Saturated2Pin It

SaturatedPin It

Or, they can be desaturated, like the following:

Desaturated2Pin It

DesaturatedPin It

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.

MonoSimpsonsPin It

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:

Mono1Pin It

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.

ColorDirectHarmonyPin It

Examples:

Complementary2Pin It

Complementary1Pin It

PokeComboPin It

GoogleComboPin It

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.

ColorsAnalogousPin It

Examples:

Analogous1Pin It

Analogous2Pin It

AnalogosCombo2Pin It

AnalogosComboPin It

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.

ColorSplitComplementaryPin It

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.

ColorTriadsPin It

Examples:

Triad2Pin It

Triad1Pin It

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.

AdobeColor2Pin It

AdobeColorPin It

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.

Free lettering worksheets


Download now!

img

Download now!

Getting started with hand lettering?

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

14 Comments

  1. 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.

  2. 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.

  3. 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.

  4. Is there a list of codes for color--- like example the code for black is #000000

    Thank you Photogal007

  5. 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!!!

  6. . . ★ . . :: beautiful presentation on the principles of colour theory . . a subject I study every day and love so much :)) :: . . ★ . .

  7. . . ★ . . :: 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 :: . . ★ . .

You must be signed in to post a comment.

Made with Creative Market

Browse a gallery of inspiration made with design assets from Creative Market.

Explore the Gallery →

Meet the Creative Market Authors

Learn more about the talented writers behind the articles.

Meet the Authors →

Download Our FREE Branding eBook

Get a FREE, fun, and friendly guide to design your own brand.

Get your eBook →