only color combinations cheat sheet you’ll ever need //
Color is a part of our lives. Color affects our moods and feelings as well as our decision making processes. Your choices in color combinations are crucial in designing your brand or website.
It is both an art and science to choose the right color combination. There are principles and methods that you can use to create strong impressions and achieve the desired effect. To help you make the process easier, we have created a cheat sheet.
Shopify allows you to start selling online right away
Color combination basics
It’s important to understand the basics of color before we can start choosing color combinations.
Let’s begin by showing you the visual representation of the colors and their relationships: the color wheel.
The color wheel
This essential guide for designers and artists dates back to the early 1800s. Most of us have seen the color wheel, whether it was in elementary school or when we last used Photoshop. It’s important to understand the basics of the color wheel in order to make the right color combinations, particularly if you don’t know much about color theory.
What is the color wheel?
A simple color wheel that consists of 12 colors arranged around a central center.
A color wheel that includes primary, secondary and tertiary colours
All colors are a combination of primary coloursspan-style=”font weight: 400 ;”>. Red, blue, and yellow are the primary colors. These colors are the parents of all other colors.
The color wheel highlights primary colors
Combining equal parts from any two primary colors creates secondary colours.
-
Purple + Blue
-
Yellow + Green =
-
Yellow + Red = Orange
On a color wheel, secondary colors are highlighted
Tertiary colours are created by mixing one of your primary colors with one or more of your nearest secondary colors. Tertiary colours are those that lie between the primary and secondary colors.
-
Red + orange = Red-orange
-
Yellow + orange = Yellow-orange
-
Yellow + Yellow = Yellow-green
-
Green + = Blue-green
-
Purple + Blue = Blue-purple
-
Red + purple = Red-purple
Tertiary colors highlighted in a color wheel
Color terminology
The world of art, design and color is full of technical language, just like any other area of study. It will help you in your future business and here, if you have a basic understanding of color terminology. Let’s take a look at the most common terms in the chromatic realm.
- Hue. Artists and designers often use the terms hue and color interchangeably. They actually refer to different things. The general meaning of “color” is that it refers to all colors including gray, white, and black. Contrary to that, “hue”, refers to the origin or source of the color we see. It is the base color of the color, and it is always one of six primary or secondary colors on the colour wheel.
- Tint. Tint is a lighter shade of a given hue. A tint is a hue with only white added to. Tints can be as light or dark as the original, and can even appear to have a little more color.
- Shade. This is the opposite to a tint. A shade is a color that has only black added to it. The shade can contain varying amounts black. It may appear slightly darker than the original color or almost black. This is easy to remember. Think about how grass under a tree appears darker than grass under it.
- Tone. Tone is very similar to tint or shade. However, instead of a hue that has white or black added to, it is a color with only gray. To make a tone, the gray must be only black and white. Many colors that are considered gray have a base that’s a hue. Toned colors are more sophisticated than pure hues.
- Warm colors versus cool. Warm colors are those that are associated with heat. Cool colors are those which are associated with ice or cooler temperatures. Red, orange, yellow and red-purple all represent warm colors. Blue, purple, green and blue-green, on the other hand, are cool colors.
The psychology behind color
After we have covered color theory briefly, let’s take a look at the psychology behind color.
It’s not about picking the right colors, it’s about selecting the colors that will evoke the emotions you want from your audience. This is crucial because the colors and hues that you choose will influence how your clients and customers feel about your website, business cards, or office space.
Color is a power that directly influences the soul.” –Wassily Kandinsky
Here’s a quick overview of the different colors and the emotions they can evoke:
- Red: excitement, danger, energy, courage, strength, anger
- Orange: creativity, enthusiasm, health, happiness, encouragement, balance
- Yellow: sunshine, hope, optimism, light, positivity, freshness
- Green Health, Nature, Renewal, Generosity, Freshness, Environment
- Blue : Freedom, trust, expansiveness and dependability
- Purple : Royalty, luxury, power pride, creativity, mystery
Warm colors can evoke energy and passion and infuse the senses. Cool colors are more relaxing and calm.
For more information about color psychology and how meanings of colors affect us, please read the full post .
Now we understand color in art and design. Let’s get on with the fun stuff
Color combinations
It’s easy to find colors that match your chosen psychology once you have decided. You can quickly identify color combinations that are monochrome or complementary, analogous and split, triad or tetradic by using a color wheel. These color schemes allow you to choose between harmonious and contrasting colors depending on what effect you are trying to achieve.
Monochrome combinations
Monochrome is a combination of different hues. This combination can include a variety of tints, shades and tones. You can choose from dark, light, or slightly lighter shades. These combinations are great for creating harmonious and visually appealing looks by simplifying complicated designs.
Monochrome is a great strategy for branding your brand with a specific color. It’s also useful to show progression in a design, such as a tiered price list, or to create a more sophisticated-looking design using a brighter color.
Complementary combinations
Complementary colors can be found directly across from each other on the color wheel. These colors can be used to make your design stand out by contrasting strongly. They can also be visually jarring if they are not used correctly.
You shouldn’t use complementary colors in the same design. Pick one hue to be your main color and then highlight or make important items stand out with the complementary color.
These color combinations can also be found in nature, and give a design a natural yet vibrant feel. For example, an orange coral standing out against the blue ocean or lavender against the softly green foliage.
These are some examples of complementary color combinations:
-
Red and Green
-
Orange and blue
-
Yellow and Purple
-
Red-purple and yellow-green
-
Blue-green and red-orange
Below is an example for a complementary combination: orange and blue. You can see how they are right across each other on a color wheel.
Analogous combinations
These colors can be found side-by-side on the color wheel. Harmonious combinations evoke peace and serenity. This is likely due to the existence of similar combinations in nature. You should choose a primary and secondary color to be your base. Then, choose two colors to highlight. It is best to have a secondary and third color. It is important that your primary color dominates the space and that the secondary and tertiary colors complement each other. Be careful not to choose colors too close together, as they could blend together and ruin your design.
An analogous combination:
-
Blue, violet, and teal
-
Red, purple, and fuchsia
-
Red, orange and yellow
-
Purple, green, and blue
Split complementary
This is a variation on the complementary color scheme. Split combinations consist of one color and two colors that are symmetrically placed around it. This strategy allows for more variety than the complementary color schemes, as it includes three colors without being too bold or jarring. This method results in combinations that have both warm and cool colors that are easier to balance than those of complementary color schemes.
Examples for split complementary color schemes:
-
Red, yellow-green and blue-green
-
Red-orange, blue, and yellow-orange
-
Red-purple, blue-purple and yellow
-
Yellow-orange, purple, and yellow-green
Triadic colors
Triadic color schemes can be used in place of the split complement color scheme. This color scheme has equal spacing on the color wheel. Place an equilateral triangular triangle on the color wheel. The triadic color scheme is made up of the colors at each point.
Triadic color palettes have the first color as the dominant color, and the next three colors are the accent colors. A triadic color pallet can be modified by changing the saturation or brightness of the colors.
If you are wondering how triadic colours can be toned down, tertiary and subdued colors might be the answer. You can swap out a yellow gold for a soft honey glow or an iridescent blue for an oceanic teal.
Examples of Triadic colors:
-
Red, yellow and blue
-
Purple, orange, and green
-
Red-orange, blue-purple and yellow-green
Triadic harmony is the combination of three colors that creates an aesthetically pleasing effect. These colors are distinctive and create a vibrant, lively color palette.
Tetradic combinations
The tetradic combination of colors is similar to the triadic scheme. It uses colors that are equally distant. These color combinations use four colors, instead of the usual three. A tetradic combination can be found by placing a square on a color wheel and selecting the colors at each corner. Or, you can choose two opposite sets of complementary colors.
These combinations of colors are loud and exciting, and make designs stand out. These combinations can be overwhelming so be careful when choosing the right balance.
Tetradic color schemes examples:
-
Red and green, with blue-purple and yellow-orange
-
Red-orange, purple, and blue-green
Experimentation and innovation are key
It can be difficult to choose the right color combinations if you don’t have an artistic background or natural talent for design. You will not know how your chosen colors will look in your design until they are actually applied. Experimenting with different shades, tones, tints and hues can help you discover the right color combination for your purpose. They will help you convey the message and feel you want.
You can also use a variety of websites and apps to help you make your decisions. Canva’s color palette generator is our favorite. Drag and drop your favorite photos to create a color palette.
We’re confident that you will find the right color combination for you, whether you’re searching for a color scheme to color your website, office cards span-style=”font weight: 400 ;”>,, or business cards ,
Our favourite combos
Monochrome
Art by
Kimberly Rachelle
. Color palettes
Canva
.
Complementary
Art by
Kimberly Rachelle
. Color palettes
Canva
.
Analogous
Choose from a variety of color palettes
Canva
.
Art by
Kimberly Rachelle
. Color palettes
Canva
.
Triadic
Art by
Kimberly Rachelle
. Color palettes
Canva
.
Tetradic
Choose from a variety of color palettes
Canva
.
Shopify allows you to start selling online right away
Would you like to learn more?
-
Photoshop Tutorials for Beginners
-
Top 20 Online Logo Makers
-
17 Ecommerce Store Design Tips to Increase Sales Now
-
40 Incredible Examples of Ecommerce Website Design
Do you have any creative tips and tricks? We would love to hear your tips and tricks. Please leave your comments!