Categories / Tutorials
The Missing Cheatsheet For Brilliant Color Combinations
Peter M May 6, 2021 · 6 min read
The Color WheelLet’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.
Color TerminologyWhen 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: Or, they can be desaturated, like the following: 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 ColorYou 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 CombinationsRemember 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. 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:
Complementary Color CombinationsThe 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. Examples:
Analogous Color CombinationsAnalogous 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. Examples:
Split ComplementaryA 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.
Triad Color CombinationsA 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. Examples: 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 KeyLike 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.
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.