Let’s set a familiar scenario: you’ve made a great design, but despite your hard work there’s something that still doesn’t look right. What could it be? It might be your color scheme.
If this scenario is all too familiar, then it might be time to refresh yourself on the color wheel. Learn how to mix and match colors in an aesthetically pleasing and compelling color scheme.
The Color Wheel
The color wheel’s basic colors are called primary colors:
Primary colors are NOT made from any other color — they stand on their own. However, primary colors can produce other colors when they are mixed together.
When we mix the primaries, we call these colors secondary colors:
Red + Yellow = Orange
Yellow + Blue = Green
Blue + Red = Purple
The rest of the six colors are called tertiary colors which are the mixing of one primary color and one secondary color.
They are made from the combination of:
Red + Orange
Orange + Yellow
Green + Blue
Blue + Purple
Purple + Red
Moving further into the color wheel, let’s learn the different ways you can combine the colors — this is where the fun starts!
Warm and Cool Colors
The color wheel is made up of warm and cool colors. Warm colors look vivid and give us a sense of energy and comfort. They also appear closer to the viewer. Cool colors look calm and give us a refreshing feeling. Cool colors appear farther from the viewer which makes them perfect for background colors.
Complementary colors are two colors that are directly opposite from each other on the color wheel. For example, red is a complimentary color of green, and yellow is a complimentary color of purple.
Since these colors are located across from each other, we get two colors that have a high contrast. Try not to overuse complimentary colors because of it’s high contrast. The only time you should use them is when you want something to really stand out.
Another thing to keep in mind: make sure your color choices don’t remind your viewers of something else. For example, Red + Green tends to give a Christmas feeling if it’s overused.
Here is an example where the cool color (Light blue) is in the background and its warm complementary color (Orange) is the font:
Here is the same example with the warm color as the background and the cool color as the font:
As you can see, the look and feel is completely different, so make sure you pick colors that fit the feel you are going for.
Analog colors lie on either side of a given color. Unlike complementary colors, the contrast is low which makes them perfect for any kind of design.
Triade colors are three colors that are spaced evenly on the color wheel and are great to use if you want a colorfully balanced design.
One of the more popular triades is the primary triade which is built with the primary colors. The primary triade is very popular for children toys because the simple colors make it easy on children’s eyes.
Again, make sure you give the right feel to your project. You don’t want an IT Company’s logo to look like it was meant for a children’s store.
In addition to the primary triade, there are three other triades that can be found on the color wheel: one secondary triade and two tertiary triades.
These triades produce great color combinations! Particularly, the tertiary triades which have a good contrast and harmonic feel.
You might not have thought to combine these colors but give it a try on your next design.
I hope you aren’t tired yet, we still have more to learn!
Split complementary colors is a “special triade.” Instead of using three evenly-spaced colors, we choose one base color and use its complementary color’s two neighbor colors. This might seem technical, so check out the image below to fully understand:
Your designs will have a strong visual contrast and a refreshing look with this color scheme.
Tints & Shades
So far, we have learned a lot about color schemes and you might be thinking, “How the hell do I make designs with only 12 colors?” This is where tints and shades come into play.
Tints are when you add white to any base color on the color wheel. I added an additional 20% of white on each inner circle:
Shades are when you add black to each base color in the color wheel. I added an additional 20% of black on each inner circle:
The base color can also be called a Hue which is a pure color with NO tints or shades. A hue is commonly referred to by its color name: red, green, etc.
Monochromatic color schemes are quite simple, choose a hue then use shades or tints to get a variety of the color. Monochromatic color schemes are great and I love them! They are nice to look at and are great for a variety of designs, like web design.
You can create more than two tints or shades from one hue but in my example, I have added 20% and 40% of black and white to these hues:
You have successfully scraped the surface of color harmony and there is WAY more to learn, but this tutorial is a great start.
Now, it’s time to color the world and make awesome color schemes for your designs, but don’t forget to wash your hands. 🙂
Have any more questions about color schemes? Let us know in the comments.
From the ocean to the sky, the color blue is seemingly everywhere. Civilizations have long venerated this color for its strong and practical applications. In the past it was a color reserved for royalty, but today nearly everyone walks around in blue jeans. Hospitals use blue on their walls for its relaxed effect, and graphic…
There’s no denying it… Bright, bold colors have been a huge trend this year—not only a 2016 web design trend, but across all mediums. This color palette is popular with good reason; when bright color pops in design, it can conjure excitement, joy and intrigue. For that reason, it’s a great skill to master as a designer. There are many different ways…
What do Facebook, ATT and IBM have in common aside from being household names? They all use blue as the primary color in their logos. Now think about other companies with blue logos. It’s a long list, right? Blue logos might seem as ubiquitous as the blue sky and there is good reason for this:…