How to Choose a Color Scheme? The 3 Cats Labs Guide to Color Theory & The Color Wheel

You’re probably reading this and thinking about how to choose a color scheme for your business website, logo, or marketing materials. You’re also likely questioning your artistic ability and wondering if what you have in mind will look good to others.

Fortunately, you don’t need to be a born artist to create compelling visual content. It’s something that can be learned. Luckily now there are many tools available to help even the most inartistic people create images and graphics that at least look presentable. However, even with some of the most helpful tools available, there are still some aspects of design that require some background knowledge.

A perfect example of this is picking colors. It seems super easy.. and then you see the color wheel and it suddenly becomes confusing.

Keep on reading for an introduction to color theory. We’ll be going over the terms, tools, and some tips for choosing the best colors to use when working on some of your own designs.

Color Theory Basics

Let’s discuss the basics of color. Yes, this might cause flashbacks to high school or even middle school art classes.

Primary, secondary, and tertiary colors; do any of those ring a bell? Primary colors are probably somewhat familiar to you. Well, these are important so pay attention because you’ll be lost about everything color if you don’t.

Primary Colors

Primary colors cannot be created by mixing two or more other colors together. There are three primary colors. Those 3 colors are:

• Red
• Yellow
• Blue

These are the colors that will serve as the anchors for the overall color scheme of your design. They will be the guardrails when you begin experimenting with other tones, shades, and tints.

However, don’t feel as if you’re restricted to the primary colors. Colors such as orange or purple are are not primary colors, but can be dominant colors. For example, 3 Cats Labs, we use purple as our color.

Knowing the primary colors that create, for example, purple, is the key to identifying the colors that go well with purple – with the right shade, tint, or tone.

Secondary Colors

Secondary colors are formed by combining any two primary colors. Refer to the color wheel image above to see how secondary colors are supported by two of three primary colors.

There are three secondary colors. They are orange, purple, and green.  You can create each of these colors by combining two primary colors.

There are a few generals rules that apply to secondary color creation.

• Blue + Red = Purple
• Red  + Yellow = Orange
• Yellow + Blue = Green

For these to work you must use the purest form of the primary colors involved. This pure form is known as the color’s hue. We’ll look at how different hues compare shortly using a different color wheel below.

Tertiary Colors

Tertiary colors are created when you mix a primary and secondary color.

This is where color gets a little more complicated. You’ll need to keep on continue reading and learning if you want to really develop your understanding of color and in turn, how to choose a color scheme. It’ll be necessary to understand all of color’s components.

Now make sure you take not of this – not every primary color can mix with a secondary color to create a tertiary color. For example red and green cannot mix harmoniously. Likewise blue and orange do not have a harmonious relationship for creating a tertiary color. Both of these mixtures create a brown color – but that might be what you want.

Tertiary colors are created when a primary color mixes with a secondary color that lies next to it on the color wheel (see below). There are 6 tertiary colors that fit this requirement.

• Red + Purple = Magenta
• Red + Orange = Vermillion
• Blue + Purple = Violet
• Blue + Green = Teal
• Yellow + Orange = Amber
• Yellow + Green = Chartreuse

The Color Theory Wheel

Now we know the “main” colors!  But, as we both know there are a lot more than 12 colors to choose from, especially when viewing color selection on a computer.

Enter: The Color Wheel, a circle graph that charts every primary, secondary, and tertiary color – plus their respective hues, tints, shades, and tones. This visualization of colors can help you choose a color scheme because it shows how each color relates to each other using a rainbow color scale.

When choosing color schemes you can use the color wheel to create lighter and brighter colors as well as darker colors by mixing white, black, and grey with the original colors picked for the color scheme. Next we’ll look at the variations created by these mixes.

Hue

Hue is pretty much synonymous with what we refer to as “color.” All of the primary and secondary colors are hues.

Hues are important because they need to be remembered when mixing primary colors to create a secondary color. If you combine two primary colors that contain other tones, tints, or shades you’re technically adding more than two colors to the mix – the final color will be dependent upon the compatibility of all the colors involved.

By mixing the hues of blue and red together you’ll create purple, right? If you mix a tint of blue with the hue of red you’ll get a slightly tinted purple as a result.

Shade

You likely recognize this term because it’s commonly used to refer to the lighter or darker versions of the same hue. However, a shade is technically the color that you get after adding black to any hue. The different levels of “shades” refer to how much black is being added to the hue.

Tint

Tint is the opposite of shade. However, in conversation and daily life people generally don’t distinguish between the tint or shade of a color. You’ll get a different tint depending on the amount of white to a color. A color can have a wide range of tints and shades.

Tone (Saturation)

Adding both white and black to a color creates the tone. Tone and saturation have what is essentially the same meaning, but saturation will usually be used for digital images and tone for painting.

Adding & Subtracting Color

If you’ve ever played with color on a computer you’ve likely seen something about RBG or CMYK colors and numbers next to the letters.

Did you wonder what those mean? I know there was a time long ago that I did.

CMYK

The letters CMYK stands for Cyan, Magenta, Yellow, and Key (Black). Do you know where you’ll also see these letters? On the ink cartridges for your printer. It’s not a coincidence because CMYK colors are generally used for printed materials.

CMYK is a subtractive color model. What does that mean? It’s because you need to subtract colors to get the color white. Also, the more colors you add the closer you will get to black.

Perhaps the best way to visualize this is to think of printing on a piece of paper. Typically the fresh sheet of paper in the machine is white. When you begin printing the colors printed on the paper are blocking the wavelengths of white light from getting through.

Now you put that piece of paper and print again. You’ll see that the second layer of printing moves the colors closer closer to black.

CMYK color scales are weighted 0 to 100. If C=100, M=100, Y=100, and K=100, you will end up with black. If all are set to 0 you will have true white.

RGB

RGB, on the other hand, is meant for electronic displays like computers and phones.

RGB stands for Red, Green, and Blue. RGB is an additive color model, and this means that the more color you add the closer you will get to white. The RGB scale, on your computer for instance, is measured from 0 to 255. R=0, G=0, and B=0 would result in black. In contrast R=255, B=255, and G=255 would give you white.

When creating colors on a computer, often you will see both CMYK and RGB options. You can often use either and the color model will adjust. However, web programs often use only RGB values and HEX codes. HEX Codes are the umber and letter combinations assigned to colors in HTML and CSS.

If you’re designing digital images, RGB is almost always your best bet when choosing your colors.

How to Choose a Color Scheme

1. Consider the context of the colors.
2. Use a color wheel as a reference tool to identify analogous colors.
3. Use a color wheel to identify complementary colors.
4. Have a monochromatic focus of colors in the same hue.
5. For high contrast use a triadic color scheme.
6. Create a split complementary color scheme.
7. Push yourself beyond presets, but start with only one color.

Now that we have an understanding of color theory, let’s explore how we can use this newfound knowledge to apply to designs how to choose a color scheme that perfect your branding and also resonates with your audience.

Certainly you’ve noticed before that some colors look great together and others… not so much. Colors can add or subtract from a design. Always keep in mind that when you choose a color scheme, often how it is perceived depends upon the context in which it’s being seen.

1. Consider Context

Context when in reference to colors considers how we perceive colors in contrast with another color.

An example of context can be seen using the squares above. The purple center square o the right side appears to be lighter on the left and could be described as calming and more visually pleasing. Now look at the left side. The purple center square on the left looks more intense. The intense feeling is caused by the brighter background. Despite the center squares being of the same hue, the appearance and feelings when viewed are different.

When you’re choosing your colors, consider how much contrast you want because that will affect the perception of the colors by its viewers.

For example, if you’re designing a bar chart you most likely wouldn’t want to have a dark background with light colored bars. The goal is for your audience to focus on the bars, so you would most likely have a light colored background so the contrast draws the attention to the bars data.

However, sometimes defining the needed contrast is easy. Sometimes the most difficult part can be selecting the colors. Sometimes it feels like it might take hours to find just the right colors. Clearly that would be a waste of hours that could be used more productively. So what’s the shortcut?

Fortunately there are some logical rules you can follow when determining how to choose a color scheme for your brand or project.

2. Refer to the Color Wheel – Identify Analogous Colors

An analogous color scheme is formed by pairing a single main color with two colors directly next to it on the color wheel. You can actually turn this into a 5 color scheme by adding two colors found next to the outside colors.

Using an analogous scheme will not give you high contrasting colors, and you’ll typically find the scheme used for softer and less contracting designs. Think about the colors you often see for pring and autumn color schemes to get an idea.

Take a look at the analogous color scheme example below. This is a color scheme that could be great for an image but probably not something to be used for a chart or infographics, because, there is very little contrast between the colors.

3. Refer to the Color Wheel – Identify Complementary Colors

A complementary color scheme uses two colors directly opposite from each other on the color wheel and the relevant tints of those colors.  The complementary color scheme also provides the greatest amount of contrast.

Due to the large degree of contrast, it is necessary to take some care in the use of the use of this color scheme when considering how to choose a color scheme.

The best approach with a complementary color scheme is to go with one color as the dominant color and use the second color to accent your design.

Complementary color schemes are excellent for charts and graphs because the high contrast helps to highlight important points.

However, for more complex designs such as infographics, for example, a much lighter background would need to be used. Using an orange as a background with blue for accents would simply be just too overpowering for the viewer and likely difficult to read any text.

 

4. Have a Monochromatic Focus of Colors in the Same Hue

Going with a monochromatic color scheme allows you to create a color scheme using the shades and tints of a single hue. You might have already figured out that a monochromatic color scheme lacks contrast. However, often monochromatic color schemes give off a very smooth and polished appearance.

Monochromatic color schemes are more subdued and don’t have the “pop” of high contrast color schemes. Monochromatic can be good for branding, presentations, and some charts and graphs. If you’re looking for something bright and in your face, a monochromatic color scheme is probably not the best choice.

Take a look below at this example of a purple monochromatic color scheme.

5. For High Contrast Use a Triadic Color Scheme

Triadic color schemes offer high contrast while using colors in the same tone. You create a triadic color scheme by selecting three colors equally placed along lines around the color wheel.

This color scheme is useful for creating contrast between each color, but can also become overpowering if all of the colors are selected along the same line in the color wheel.

To subdue some of the colors in a triadic color scheme, choose one dominant color and use the other sparingly, or, alternatively choose a softer tint as another way to subdue the accent colors.

This color scheme can be a great choice for presenting data such as pie charts because of the contrast that can be used for easily identifying comparisons. However, if you’re working on something a bit more complex such as an infographic, it would be recommended to choose the light green or yellow as the background color.

6. Create a Split Complementary Color Scheme

A split complementary color scheme has a single dominant color and uses the two colors directly adjacent to the dominant color’s complement on the color wheel. You’ll find the color palette of a split complementary color scheme to be more nuanced than a complementary color scheme, but you’ll retain the benefits of contrasting colors.

This can be a difficult color scheme for finding a balance because all of the colors create contrast. It might take some time to find a palette that is balanced and also uses the colors that you’re looking for when determining how to choose your color scheme.

You could certainly use a split complementary color scheme for charts and graphs as well as pieces like infographics. However, with an infographic there might be more of a need to play around with the colors and find what color pairs look best together.

What’s great about the split complementary color scheme is that you can use any pair of colors to create contrast. However, on the other hand, this can prove difficult because it can be difficult to find a good balance between colors. For these two reasons, working with a split complementary color scheme can take a bit more time to work out which colors will pait best together for the right contrast.

When choosing a color scheme, always keep in mind what your design requires. If you’re design requires high contrast then choose a high contrast color scheme. If you’re only looking for the best version of a color, try using a monochromatic color scheme for visualizing the various shades and tints available.

Also remember that it’s not necessary to use all the colors that you’ve built into your color scheme. Maybe you’ve created a scheme of five colors and you only use two. That’s fine, because sometimes that’s all you need for an attractive design. Don’t push yourself to sue colors just because they’re in your list.

7. Push Yourself Beyond Presets, But Start With Only One Color

Hold on! Don’t go rushing off yet, there are still a few things to note before we move on.

• Don’t be satisfied with presets. Almost all programs have preset colors to start with, which is nice of them. Move past the presets and explore your own colors.
• Start with the color you like. You probably have a preferred color in mind before you even sit down and turn on the computer. Stick with that one color and build up one color at a time.
• Save Your Color Scheme. After finding a color scheme you like, it’ll probably be used again so save it. This doesn’t mean to use the same color scheme every single time, but you might be able to repurpose it later.
• Practice. Practice. Practice. The more you play with color the more comfortable you’ll be experimenting with and applying color schemes to your projects.

Color Tools

We’ve colored a lot of theory in an effort to better understand what colors go well together and the reason for them being attractive to viewers. It’s all great information to have, but it’s also beneficial to use the tools at your disposable when designing to help you do the work more quickly and easily.

Fortunately there is a good variety of tools out there to help you choose colors.

Adobe Color

Adobe Color is a free online tool that allows you to quickly create color schemes based on the structures we’ve explored throughout this post. Once you’ve chose your colors you can simply copy the color codes into your favorite graphic design program.

Coolors

Head on over to Coolors.co and have a little bit of fun with your color selection. Coolors offers a free color palette generator. Press the spacebar and the site generates a five color palette for you. Also, you can enter HEX codes and lock the colors you like and only unlocked colors will be generated to match.

Go!

We covered a lot of theory but a little bit of color theory knowledge can go a long way when not only figuring out how to choose your color scheme for a design project but in daily life, like putting together a matching outfit.

Let’s Talk About Your Brand

shane@3catslabs.com | Call +65-3159-4231

Contact 3 Cats Labs

Share