Color theory

15

1.Your Guide to Colors: Color Theory, The Color Wheel, & How to Choose a Color Scheme

 

When you’re sifting through your News Feed, what tends to catch your attention? More likely than not, it’s YouTube videos, pictures, animated GIFs, and other visual content, right?

While text-based content is always important when seeking answers to a question, creating visuals such as infographics, charts, graphs, animated GIFs, and other shareable images can do wonders for catching your readers’ attention and enhancing your article or report.

I know what you might be thinking: „I don’t know how to design awesome visuals. I’m not creative.“

Access 195+ Marketing Design Templates

Hi. I’m Bethany, and I will be the first to tell you that I’m not naturally artistic. And yet, I found a strength in data visualization at HubSpot, where I’ve spent most of my days creating infographics and other visuals for blog posts.

So, while I wouldn’t say I’m naturally artistic, I have learned how to create compelling visual content. So can you.

While there are many tools out there to help even the most inartistic of us to create compelling visuals, some parts of graphic design take a little more background knowledge.

Take picking the right colors, for instance. It’s something that might seem easy at first, but when you’re staring down a color wheel, you’re going to wish you had some information on what you’re looking at.

Consider this your introductory course to color theory. Read on to learn about the terms, tools, and tips you should know to pick the best colors for your designs.

Color Theory 101

Let’s first go back to high school art class to discuss the basics of color.

Remember hearing about primary, secondary, and tertiary colors? They’re pretty important if you want to understand, well, everything else about color.

Circular color theory model with labels for primary colors, secondary colors, and tertiary colors

Primary Colors

Primary colors are those you can’t create by combining two or more other colors together. They’re a lot like prime numbers, which can’t be created by multiplying two other numbers together.

There are three primary colors:

  • Red
  • Yellow
  • Blue

Think of primary colors as your parent colors, anchoring your design in a general color scheme. Any one or combination of these colors can give your brand guardrails when you move to explore other shades, tones, and tints (we’ll talk about those in just a minute).

When designing or even painting with primary colors, don’t feel restricted to just the three primary colors listed above. Orange isn’t a primary color, for example, but brands can certainly use orange as their dominant color (as we at HubSpot know this quite well).

Knowing which primary colors create orange is your ticket to identifying colors that might go well with orange — given the right shade, tone, or tint. This brings us to our next type of color …

Secondary Colors

Secondary colors are the colors that are formed by combining any two of the three primary colors listed above. Check out the color theory model above — see how each secondary color is supported by two of the three primary colors?

There are three secondary colors: orangepurple, and green. You can create each one using two of the three primary colors. Here are the general rules of secondary color creation:

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

Keep in mind that the color mixtures above only work if you use the purest form of each primary color. This pure form is known as a color’s hue, and you’ll see how these hues compare to the variants underneath each color in the color wheel below.

Tertiary Colors

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

From here, color gets a little more complicated. And if you want to learn how the experts choose color in their design, you’ve got to first understand all the other components of color.

The most important component of tertiary colors is that not every primary color can match with a secondary color to create a tertiary color. For example, red can’t mix in harmony with green, and blue can’t mix in harmony with orange — both mixtures would result in a slightly brown color (unless of course that’s what you’re looking for).

Instead, tertiary colors are created when a primary color mixes with a secondary color that comes next to it on the color wheel below. There are six tertiary colors that fit this requirement:

  • Red + Purple = Red-Purple (magenta)
  • Red + Orange = Red-Orange (vermillion)
  • Blue + Purple = Blue-Purple (violet)
  • Blue + Green = Blue-Green (teal)
  • Yellow + Orange = Yellow-Orange (amber)
  • Yellow + Green = Yellow-Green (chartreuse)

The Color Theory Wheel

Okay, great. So now you know what the „main“ colors are, but you and I both know that choosing color, especially on a computer, has much wider range than 12 basic colors.

This is the impetus behind the color wheel, a circle graph that charts each primary, secondary, and tertiary color — as well as their respective hues, tints, tones, and shades. Visualizing colors in this way helps you choose color schemes by showing you how each color relates to the color that comes next to it on a rainbow color scale. (As you probably know, the colors of a rainbow, in order, are redorangeyellowgreenblueindigo, and violet.)

Color theory wheel with labels for each color's hue, tint, tone, and shade

When choosing colors for a color scheme, the color wheel gives you opportunities to create brighter, lighter, softer, and darker colors by mixing white, black, and gray with the original colors. These mixes create the color variants described below:

Hue

Hue is pretty much synonymous to what we actually mean when we said the word „color.“ All of the primary and secondary colors, for instance, are „hues.“

Hues are important to remember when combining two primary colors to create a secondary color. If you don’t use the hues of the two primary colors you’re mixing together, you won’t generate the hue of the secondary color. This is because a hue has the fewest other colors inside it. By mixing two primary colors that carry other tints, tones, and shades inside them, you’re technically adding more than two colors to the mixture — making your final color dependent on the compatibility of more than two colors.

If you were to mix the hues of red and blue together, for instance, you’d get purple, right? But mix a tint of red with the hue of blue, and you’ll get a slightly tinted purple in return.

Shade

You may recognize the term „shade“ because it’s used quite often to refer to light and dark versions of the same hue. But actually, a shade is technically the color that you get when you add black to any given hue. The various „shades“ just refer to how much black you’re adding.

Tint

A tint is the opposite of a shade, but people don’t often distinguish between a color’s shade and a color’s tint. You get a different tint when you add white to a color. So, a color can have a range of both shades and tints.

Tone (or Saturation)

You can also add both white and black to a color to create a tone. Tone and saturation essentially mean the same thing, but most people will use saturation if they’re talking about colors being created for digital images. Tone will be used more often for painting.

Adding and Subtracting Color

If you’ve ever played around with color on any computer program, you’ve probably seen a module that listed RGB or CMYK colors with some numbers next to the letters.

Ever wondered what those letters mean?

CMYK

CMYK stands for Cyan, Magenta, Yellow, Key (Black). Those also happen to be the colors listed on your ink cartridges for your printer. That’s no coincidence.

CMYK is the subtractive color model. It’s called that because you have to subtract colors to get to white. That means the opposite is true — the more colors you add, the closer you get to black. Confusing, right?

Subtractive color diagram with CMYK in the center

Think about printing a piece of paper. When you first put a sheet in the printer, you’re typically printing on a white piece of paper. By adding color, you’re blocking the white wavelengths from getting through.

Then, let’s say you were to put that printed piece of paper back in the printer, and print something on it again. You’ll notice the areas that have been printed on twice tend to colors closer to black.

I find it easier to think about CMYK in terms of its corresponding numbers. CMYK works on a scale of 0 to 100. If C=100, M=100, Y=100, and K=100, you end up with a black color. But, if all four colors equal 0, you end up with true white.

RGB

RGB color models, on the other hand, are designed for electronic displays, including computers.

RGB stands for Red, Green, Blue, and is based on the additive color model of light waves. This means, the more color you add, the closer you get towards white. For computers, RGB is created using scales from 0 to 255. So, black would be R=0, G=0, and B=0. White would be R=255, G=255, and B=255.

Additive color model with RGB in the center

When you’re creating color on a computer, your color module will usually list both RGB and CMYK numbers. In practice you can use either one to find colors, and the other color model will adjust accordingly.

However, many web programs will only give you the RGB values or a HEX code (the code assigned to color for CSS and HTML). So, if you’re designing digital images, RGB is probably your best bet for choosing colors.

Now that we’ve got all of the basics of color theory down, let’s talk about how to actually use this newfound knowledge to form designs that perfect your brand and resonate with your audience.

You’ve probably noticed before that some colors look great together and others, well, just don’t. The colors we choose can help enhance a design, or it can take away from a design.

When you’re figuring out how to design a graphic, it’s important to remember that how we perceive colors depends on the context in which we see it.

1. Consider your color context.

Color context refers to how we perceive colors as they contrast with another color. Look at the pairs of circles in the example below to see what I mean.

The middle of each of the circles is the same size, shape, and color. The only thing that changes is the background color. Yet, the middle circles appear softer or brighter depending on the contrasting color behind it. You may even notice movement or depth changes just based on one color change.

Four pairs of colored circles showing different color context

This is because the way in which we use two colors together changes how we perceive it. So, when you’re choosing colors for your graphic designs, think about how much contrast you want throughout the design.

For instance, if you were creating a simple bar chart, would you want a dark background with dark bars? Probably not. You’d most likely want to create a contrast between your bars and the background itself since you want your viewers to focus on the bars, not the background.

Choosing colors with high contrast, however, isn’t always as hard as choosing colors that look good together.

For me, this is where choosing color is trickiest. I could spend hours choosing colors for an infographic simply because it takes awhile to get a feel for what looks best together.

In reality, though, I usually don’t have hours to spend just choosing colors. (And that’d probably be a waste of time even if I did have a few hours.)

Luckily, there are logical rules for how to create color schemes that work together.

2. Refer to a color wheel to identify analogous colors.

Analogous color schemes are formed by pairing one main color with the two colors directly next to it on the color wheel. You can also add two additional colors (which are found next to the two outside colors) if you want to use a five-color scheme instead of just three colors.Color wheel with five analogous colors plotted between blue and yellow

Analogous structures do not create themes with high contrasting colors, so they’re typically used to create a softer, less contrasting design. For example, you could use an analogous structure to create a color scheme with autumn or spring colors.

I like to use this color scheme to create warmer (red, oranges, and yellows) or cooler (purples, blues, and greens) color palettes like the one below. There isn’t a high contrast between these colors, but don’t they just look nice together?

I’d probably use this palette to design an image rather than an infographic or bar chart as I would want all of the elements in the image to blend together nicely.

3. Refer to a color wheel to identify complementary colors.

You may have guessed it, but a complementary color scheme is based on the use of two colors directly across from each other on the color wheel and relevant tints of those colors.

The complementary color scheme provides the greatest amount of color contrast. Because of this, you should be careful about how you use the complementary colors in a scheme.It’s best to use one color predominantly and use the second color as accents in your design.

The complementary color scheme is also great for charts and graphs. High contrast helps you highlight important points and takeaways.

However, if I were to use these colors in an infographic, I’d probably need to use a much lighter color for the actual background. Can you imagine choosing one of the oranges as a background with blues as accents and text? That’d probably be too overpowering and difficult to read.

4. Focus on monochromatic colors in the same hue.

Color wheel with two monochromatic colors plotted along the red hue

Using a monochromatic schemes allows you create a color scheme based on various shades and tints of one hue. Although it lacks color contrast, it often ends up looking very clean and polished. It also allows you to easily change the darkness and lightness of your colors.

I like to use monochromatic color schemes for charts and graphs, but only when creating high contrast isn’t necessary. However, monochromatic schemes don’t tend to „pop,“ so if you’re looking for a color scheme that’s bright and attention grabbing, this one isn’t your best bet.

Check out all the monochromatic colors that fall under the red hue, a primary color.

Red color bar with red hue, tint, tone, and shade

5. Use a triadic color scheme to create high contrast.

Triadic color schemes offer high contrasting color schemes while retaining the same tone. Triadic color schemes are created by choosing three colors that are equally placed in lines around the color wheel.

Color wheel with three triadic colors plotted between purple, green, and orange

Triad color schemes are useful for creating high contrast between each color in a design, but they can also seem overpowering if all of your colors are chosen on the same point in a line around the color wheel.

To subdue some of your colors in a triadic scheme, you can choose one dominant color and use the others sparingly, or simply subdue the other two colors by choosing a softer tint.

The triadic color scheme looks great in graphics like bar or pie charts because it offers the contrast you need to create comparisons.

However, if I were using this color scheme to create an infographic, I’d be more likely to choose one color as the background color, such as the yellow or light green, and a darker contrasting color as the dominant color. I then might use the other three colors as accents throughout. By changing up the intensity of the colors in the design, I can highlight important points and takeaways.

Color bar with purple, green, and orange triadic colors

6. Create a split complementary color scheme.

A split complementary scheme includes one dominant color and the two colors directly adjacent to the dominant color’s complement. This creates a more nuanced color palette than a complementary color scheme while still retaining the benefits of contrasting colors.

The split complementary color scheme can be difficult to balance well because unlike analogous or monochromatic color schemes, the colors used all provide contrast (similar to the complementary scheme).

I can imagine using the following split complementary color scheme in a variety of ways. I could use this in an chart or graph because it gives me the contrast I need and the colors remain visually appealing.

I could also imagine using these colors in an infographic, although I’d play around with the colors a bit more to see which pairs look best together.

The positive and negative aspect of the split complementary color model is that you can use any two colors in the scheme and get great contrast … but that also means it can also be tricky to find the right balance between the colors. As a result, you may end up playing around with this one a bit more to find the right combination of contrast.

No matter which color scheme you choose, try and keep in mind what your graphic needs. If you need to create contrast, then choose a color scheme that gives you that. On the other hand, if you just need to find the best „versions“ of certain colors, then play around with the monochromatic color scheme to find the perfect shades and tints.

I’ve found that simply understanding how color schemes are built goes a long way for helping me choose the right color scheme. If I just think: „What is the goal of this graphic?“ I can start to determine how much (or how little) contrast I need.

Remember, if you build a color scheme with five colors, that doesn’t mean you have to use all five. Sometimes just choosing two colors from a color scheme looks much better than cramming all five colors together in one graphic.

7. Think beyond the presets, but start with just one color.

Before I send you off to create amazing images to improve you blog and social posts, let me give you a few extra tips for choosing colors:

  • Don’t stick with presets. Almost every program you use will automatically give you preset colors. Get past the presets and explore color on your own. Don’t let the program decide how you use color in your design.
  • Start with one color you like. Every time I design something, I start with one color and build the color scheme from there. If you try and start with more than one color, you’ll have a harder time finding harmony between your colors.
  • Save your color schemes. If you find a color (or color scheme) you like, it’ll probably be useful to you later. I wouldn’t suggest using the same color scheme for every chart or graphic you create, but you can always use different schemes in different ways later on.
  • Practice makes perfect. The more you play with color and practice design, the better you get. No one creates their masterpiece the first time around.

Color Tools

There’s been a lot of theory and practical information for actually understanding which colors go best together and why. But when it comes down to the actual task of choosing colors while you’re designing, it’s always a great idea to have tools to help you actually do the work quickly and easily.

Luckily, there are a number of tools to help you find and choose colors for your designs.

Adobe Color

One of my favorite color tools to use while I’m designing anything — whether it’s an infographic or just a pie chart — is Adobe Color (previously Adobe Kuler).

This free online tool allows you to quickly build color schemes based on the color structures that were explained earlier in this post. Once you’ve chosen the colors in the scheme you’d like, you can copy and paste the HEX or RGB codes into whatever program you’re using.

It also features hundreds of premade color schemes for you to explore and use in your own designs. If you’re an Adobe user, you can easily save your themes to your account.

Color wheel on dashboard of Adobe Color

Illustrator Color Guide

I spend a lot of time in Adobe Illustrator, and one of my most-used features is the color guide. The color guide allows you to choose one color, and it will automatically generate a five-color scheme for you. It will also give you a range of tints and shades for each color in the scheme.

If you switch your main color, the color guide will switch the corresponding colors in that scheme. So if you’ve chosen a complementary color scheme with main color of blue, once you switch your main color to red, the complementary color will also switch from orange to green.

Like Adobe Color, the color guide has a number of preset modes to choose the kind of color scheme you want. This helps you pick the right color scheme style within the program you’re already using.

After you’ve created the color scheme that you want, you can save that scheme in the „Color Themes“ module for you to use throughout your project or in the future.

Color options on Illustrator Color Guide tool

Preset Color Guides

If you’re not an Adobe user, you’ve probably used Microsoft Office products at least once. All of the Office products have preset colors that you can use and play around with to create color schemes. PowerPoint also has number of color scheme presets that you can use to draw inspiration for your designs.

Where the color schemes are located in PowerPoint will depend on which version you use, but once you find the color „themes“ of your document, you can open up the preferences and locate the RGB and HEX codes for the colors used.

You can then copy and paste those codes to be used in whatever program you’re using to do your design work.

Color swatches and meters in PowerPoint

There’s a lot of theory in this post, I know. But when it comes to choosing colors, understanding the theory behind color can do wonders for how you actually use color.

 

2.Basic color schemes
– Introduction to Color Theory

With colors you can set a mood, attract attention, or make a statement. You can use color to energize, or to cool down. By selecting the right color scheme, you can create an ambiance of elegance, warmth or tranquility, or you can convey an image of playful youthfulness. Color can be your most powerful design element if you learn to use it effectively.

Content

color wheel The Color Wheel
primary secondary Primary, Secondary and Tertiary Colors
warm cool colors Warm and cool colors
tints shades tones Tints, Shades, and Tones
color harmonies
Color Harmonies – basic techniques for creating color schemes
– Complementary
– Analogous
– Triadic
– Split-Complementary
– Rectangle (tetradic)
– Square

Colors affect us in numerous ways, both mentally and physically. A strong red color has been shown to raise the blood pressure, while a blue color has a calming effect.

Being able to use colors consciously and harmoniously can help you create spectacular results.

The Color Wheel

Color wheel

The color wheel or color circle is the basic tool for combining colors. The first circular color diagram was designed by Sir Isaac Newton in 1666.

The color wheel is designed so that virtually any colors you pick from it will look good together. Over the years, many variations of the basic design have been made, but the most common version is a wheel of 12 colors based on the RYB (or artistic) color model.

Traditionally, there are a number of color combinations that are considered especially pleasing. These are called color harmonies or color chords and they consist of two or more colors with a fixed relation in the color wheel.

ColorImpact is designed to dynamically create a color wheel to match your base color.

Primary, Secondary and Tertiary Colors

In the RYB (or subtractive) color model, the primary colors are red, yellow and blue.

The three secondary colors (green, orange and purple) are created by mixing two primary colors.

Another six tertiary colors are created by mixing primary and secondary colors.

The above illustration shows the color circle with the primary, secondary and tertiary colors. Click on the labels to turn the colors on / off.

Warm and cool colorsWarm and cool colors

The color circle can be divided into warm and cool colors.

Warm colors are vivid and energetic, and tend to advance in space.

Cool colors give an impression of calm, and create a soothing impression.

White, black and gray are considered to be neutral.

Tints, Shades, and Tones

These terms are often used incorrectly, although they describe fairly simple color concepts. If a color is made lighter by adding white, the result is called a tint. If black is added, the darker version is called a shade. And if gray is added, the result is a different tone.

Tints – adding white to a pure hue:

tints


Shades – adding black to a pure hue:

Shades


Tones – adding gray to a pure hue:

Tones


Color Harmonies
– basic techniques for creating color schemes

Below are shown the basic color chords based on the color wheel.


complementary Complementary color scheme
Colors that are opposite each other on the color wheel are considered to be complementary colors (example: red and green).

The high contrast of complementary colors creates a vibrant look especially when used at full saturation. This color scheme must be managed well so it is not jarring.

Complementary color schemes are tricky to use in large doses, but work well when you want something to stand out.

Complementary colors are really bad for text.

complementary scheme


analogousAnalogous color scheme
Analogous color schemes use colors that are next to each other on the color wheel. They usually match well and create serene and comfortable designs.

 

Analogous color schemes are often found in nature and are harmonious and pleasing to the eye.

Make sure you have enough contrast when choosing an analogous color scheme.

Choose one color to dominate, a second to support. The third color is used (along with black, white or gray) as an accent.

analogous scheme


triadTriadic color scheme
A triadic color scheme uses colors that are evenly spaced around the color wheel.

 

Triadic color schemes tend to be quite vibrant, even if you use pale or unsaturated versions of your hues.

To use a triadic harmony successfully, the colors should be carefully balanced – let one color dominate and use the two others for accent.

triadic scheme


split-complementarySplit-Complementary color scheme
The split-complementary color scheme is a variation of the complementary color scheme. In addition to the base color, it uses the two colors adjacent to its complement.

 

This color scheme has the same strong visual contrast as the complementary color scheme, but has less tension.

The split-complimentary color scheme is often a good choice for beginners, because it is difficult to mess up.

split-complementary scheme


Rectangle (tetradic) color scheme
The rectangle or tetradic color scheme uses four colors arranged into two complementary pairs.

 

This rich color scheme offers plenty of possibilities for variation.

Tetradic color schemes works best if you let one color be dominant.

You should also pay attention to the balance between warm and cool colors in your design.

rectangle scheme


squareSquare color scheme
The square color scheme is similar to the rectangle, but with all four colors spaced evenly around the color circle.

 

Square color schemes works best if you let one color be dominant.

You should also pay attention to the balance between warm and cool colors in your design.

square scheme

 

3. Learn the Basics of Color Theory to Know What Looks Good

 

Illustration for article titled Learn the Basics of Color Theory to Know What Looks Good

Even if you don’t consider yourself an artistic person, chances are you’ve probably encountered situations where you’ve had to select colors for something. This most likely happens every morning when you get dressed (unless, like cartoon characters, you have an entire closet of the same outfit) or when setting up a new room in your home or office.

And though we know that colors are an important part of what makes things look good, not everyone instinctively knows that orange and blue is a perfect combination. If you can’t trust your own judgement, understand and rely on the basics of color theory to always pick the right colors.

Learn the color wheel

Illustration for article titled Learn the Basics of Color Theory to Know What Looks Good

This is the basic color wheel and it will guide you in making color choices. You’ve probably seen it in school, but here’s a quick refresher just in case you’ve forgotten.

 

Red, blue and yellow are primary colors. When you mix red and yellow, you get orange; mix blue and yellow, you get green; mix red and blue, you get violet. Orange, green and violet are hence called secondary colors. Tertiary colors like red-violet and blue-violet are derived by mixing a primary color with a secondary color.

All colors have tints and shades. A tint is the variation of that color when mixed with white; a shade is the variation of that color when mixed with black. But generally, you don’t need to worry about tints and shades for basic color schemes, says Color Wheel Pro:

According to color theory, harmonious color combinations use any two colors opposite each other on the color wheel, any three colors equally spaced around the color wheel forming a triangle, or any four colors forming a rectangle (actually, two pairs of colors opposite each other). The harmonious color combinations are called color schemes – sometimes the term ‘color harmonies’ is also used. Color schemes remain harmonious regardless of the rotation angle.

In the color wheel, there’s yet another separation that you need to be aware of so that you can understand color schemes better: warm and cool colors. Each has its own purpose to convey emotions. Warm colors exhibit energy and joy (best for personal messages), while cool colors convey calmness and peace (best for office use). The wheel itself can be divided easily to get an idea of which colors are warm and which ones cool, as demonstrated by Kissmetrics:

Illustration for article titled Learn the Basics of Color Theory to Know What Looks Good

Master the Basic Color Schemes

Illustration for article titled Learn the Basics of Color Theory to Know What Looks Good

Based on the wheel, there are a few basic rules to match colors. And they’re actually pretty simple.

Complementary colors are any two colors opposite each other on the wheel. For example, blue and orange, or red and green.

These create a high contrast, so use them when you want something to stand out. Ideally, use one color as background and the other as accents. Alternately, you can use tints and shades here; a lighter tint of blue contrasted against a darker orange, for example.

Split complementary colors use three colors. The scheme takes one color and matches it with the two colors adjacent to its complementary color. For example, blue, yellow-orange and red-orange.

This scheme is ideal for beginners because it is difficult to mess up. That’s because you get contrasting colors, but they aren’t as diametrically opposite as complementary colors, says Tiger Color.

Analogous colors are any three colors next to each other on the wheel. For example, orange, yellow-orange, and yellow.

With analogous colors, it’s best to avoid hues as they can be jarring. Instead, focus on tints of analogous colors. Another tip Color Wheel Pro shares is to avoid combining warm and cool colors in this scheme.

Triadic colors are any three colors that are equally apart on the color wheel. For example, red, yellow and blue.

The Triadic scheme is also high-contrast, but more balanced than complementary colors. The trick here, Decor Love says, is to let one color dominate and accent with the other two.

Tetradic or double complementary colors uses four colors together, in the form of two sets of complementary colors. For example, blue and orange is paired with yellow and violet.

This is the hardest scheme to balance, notes TheArtClasses:

It offers more color variety than any other scheme (but) if all four colors are used in equal amounts, the scheme may look unbalanced, so you should choose a color to be dominant or subdue the colors. Avoid using pure colors in equal amounts.

Understand black and white with monotones

Illustration for article titled Learn the Basics of Color Theory to Know What Looks Good

After you know the basic color schemes, you can step it up a notch with tints and shades. As we have already discussed, tints come from adding white to hues while shades come from adding black to hues. And this goes on till you get pure white or pure black. Apart from tints and shades, there are also tones, which is mixing the hue with grey.

Blacks and whites are used for “monochromatic color schemes,” which are further divided into monotone chromatic and monotone achromatic. Colors On The Web has a great explanation of what this means:

Monotone chromatic

A monotone color scheme is just one single hue and its variations in terms of tints, shades and saturation. Using saturation and tint/shade variations of a color is always good. However, in most cases I would advise against using a fully monochromatic scheme, as there is a risk of monotony. Using it with pure white or black can be efficient, though.

Monotone achromatic

A monotone achromatic color scheme is a special instance of the monotone scheme which consists of only neutral colors ranging from black to white. A scheme like this can be efficient, but it can very easily look boring. Using an achromatic scheme with just one bright color for highlight can be very effectful.

Use popular color palettes and apps

Illustration for article titled Learn the Basics of Color Theory to Know What Looks Good

While the basics of color combinations are now clear to you, that doesn’t mean you will always nail it. But like with anything, there’s an easy way out!

Public speaking expert Zach Holman says you can use web sites where designers suggest color palettes, like ColourLovers. This portal shows popular color schemes, which you can quickly and easily incorporate for any need.

While that helps when starting from scratch, what do you do when you have a color in front of you but need to know what are its complements or triads? That’s where apps come in. SwatchMatic for Android identifies any color you point your camera to (no need to take a photo), and suggests what you can match it with using the basics of the color wheel.

Though it’s not exactly the same, ColorSnap is a good option for iPhones. You need to take a photo and the app then identifies various colors in it. Tap one and you’ll see a palette of matching colors from paints company Sherwin Williams, which made the app. You can ignore that part and just use the palette for reference. Paint companies seem to have the market cornered on this type of app, with others like Color Smart (Behr), Color Capture (Benjamin Moore) and Pick-a-Paint (Valspar).

Finally, Color Matters says you needn’t always rely on the color wheel and take inspiration from nature, or other elements around you:

Nature provides a perfect departure point for color harmony. In the illustration above, red yellow and green create a harmonious design, regardless of whether this combination fits into a technical formula for color harmony.

Apply color theory in everyday life

Now you have a basic idea of color theory, but what does that mean for your daily life? Essentially, these concepts help you figure out how to make things look better.

A common application is in the clothes you wear. Some people always seem to be able to dress well, while others wear clothes that clash or don’t match. Print out the color wheel and stick it to your wardrobe’s door. The next time you pick out one clothing item, just refer to the chart to see what colors in your closet will best complement it; and use the basics of warm and cool colors to convey the emotion you want to project. Of course, colors areonly a part of learning to dress better. Style blog Kinowear has a few tips on how to use colors in clothing:

As a general rule of thumb you don’t want to have more than three colors in your outfit. Use the right colors for your skin tone and coloration. Try different colors against your skin and learn which palettes look best on you. Also, get a second opinion. Never use holiday colors like red and green unless it is close to that holiday. Avoid matching gray colors with bright colors such as yellow.

Similarly, color theory can help you out in the office, whether it’s jazzing up your resume for a job hunt or making your presentation and slides pop out. Again, the general rule of thumb is to restrict yourself to three colors or less. You should also check this color psychology chart to figure out what vibes your chosen colors will give out. And remember, it’s going to be on a digital projector, so your colors need to be safe for that, as Holman points out:

Usually I look for bright colors that go well on projectors. That means colors with a lot of contrast. For example, choose a dark, a light, and an accent. That way you can layer the dark on the light and still read it from in the way back of the room you’re giving the talk.

And of course, color theory is super useful when you are looking to paint your house or any major item in it. There are plenty of websites and plenty of professionals who will help you pick the right colors, but these three tips from Apartment Therapy are worth remembering at all times:

Three Rules To Keep in Mind:

• More than one color in a room can look great, but if you go in that direction, keep it to three colors maximum. If you are going with two bold colors, the third should be a neutral to give your eye a break.

• When choosing your colors start by choosing your boldest color, and then choose the others with the first color in mind.

• Don’t be scared! Paint is not permanent and you can always change it.

The Spruce also has some great tips for choosing the right colors, including pulling a color from a print that you love and looking to historical color schemes for inspiration.

Of course, these aren’t the only uses for color theory. Colors and their combinations come up in life quite often and knowing these basics will serve you in picking a scheme that looks good to you as well as everyone else.

This story was originally published on 7/22/14 and was updated on 6/14/19 to provide more thorough and current information.

4. What is color theory?

Color theory is a set of rules that combines creativity and science. Color theory sets the fundamental guidelines around color combinations and harmony. Designers and artists rely on color theory to make the correct choices for their projects, but they are not the only ones who use it.

Most people unknowingly make everyday decisions based on color theory and color harmony. Understanding the guidelines of color theory can help you in so many areas of life, from your business to your clothes.

color theory man drawing color wheel

 

We live in a highly visual world and it is impossible to master the art of visual communication without a good grasp of color theory. If you are a brand that wants to connect with your audience, then getting confident with the color spectrum is advisable. From understanding colors, all the way through to a deep understanding of color wheel definitions.

Color Theory Definition

Colors are everywhere. In our daily lives, we are constantly surrounded by colors. These colors can influence our emotions – how we feel about someone or something – even how we think about brands. Marketers have been using the psychology of colors for decades and often draw on them to gain an emotional response from the customer.

In this post, we will examine the different rules of color theory and break down some different color combinations and definitions. There is also a section on specific color meaning and the power that color has on branding.

What is a color wheel? How is it related to color theory?

Step one to understanding color theory starts with the color wheel. In 1866, Isaac Newton used physics to develop a color disc based on how light reflected off prisms. His discoveries have laid the foundation for the color wheel as we know it today.

color theory wheel color warm cool

 

There are two models of the color wheel and the first is red, yellow and blue (RYB), which are universally known as the primary colors. Their corresponding secondary colors are then green, orange and purple. Tertiary colors are green-yellow, yellow-orange, orange-red, red-purple, purple/violet-blue and blue-green.

The second is RGB, or red, green and blue,which is a digital color. You could say there are two types of color, subtractive and additive. Subtractive is physical color, the most common type would be paint. Subtractive color works by removing light, so if you kept adding purple paint to a canvas, it would eventually build to black.

Additive color is digital and adds light as you add more color. Keep adding and it will eventually end up white.

Color harmony

Think of color harmony as the visual results from the rules of the color wheel. In order to understand the color theory definitions, you need to know the importance of color placement on the color wheel.

color theory image macaron 3

 

These guidelines can be explained through 9 main color wheel rules: primary colors, secondary colors, tertiary colors, intermediate colors, complementary colors, monochromatic colors, analogous colors, triadic colors, and tetradic colors.  Knowing each rule can help comprehend the importance of each to color theory.

In order to create true color harmony in your marketing collateral, your wardrobe, and your interior design, it’s important to understand what colors work well together and why.

Primary Colors

color theory primary colors

 

As mentioned above, there are simply three primary colors and they are red, yellow, and blue. The purpose of primary colors is that they’re the base from which all other colors may be derived.

These three colors combined in all different sequences result in secondary colors. Without these three primary colors, we would not be able to create any other beautiful colors.

Secondary Colors

color theory secondary color

 

Colorwheelartist.com nicely describes secondary colors as the children of the three primaries and that is simply what they are. Red, yellow and blue (the primary colors) combined result in orange, purple, and green.

Tertiary Colors

tertiary colors color theory

 

Can you now guess how we make tertiary colors? Yes, primary colors mixed with secondary colors. Again, Colorwheelartist.com calls these colors the six grandchildren of the primary colors, therefore, six tertiary colors are created in total.

Intermediate Colors

color theory intermediate colors

 

Intermediate colors are best described as opposite colors on the color wheel. These colors exist between each primary and secondary color on the color wheel. When naming the intermediate colors, you always take the primary color name first.

Complementary Colors

This is a method of combining colors that are opposite each other on the color wheel – one side of the color wheel that consists of warm colors and the opposite side cool colors. Having one warm color and one cool color is going to increase the contrast of these colors.

color theory complementary colors

 

The aim is to achieve a vibrant, harmonious color scheme by combining both. The important thing is to remember not to have those two colors at a high saturation as they will most definitely clash and be harsh on the eyes to look at. A good idea would be to pick one of the two colors to be your focus color and then the second color will complement the main color.

Monochromatic Colors

Enter your description about the heading title here.

color theory monochromatic

 

Monochromatic colors are all the colors from a single hue, using tints, shades, and tones to lighten or darken the original hue. In simpler terms, it may be an image of the clear sky and clear water below, the sky may be a pale blue color, and the more defined areas a dark blue color, but all from the same hue.

Analogous Colors

These are colors right next to each other on the color wheel – so for example red, red-orange, and orange. Analogous is defined as things performing a similar function, but having a different evolutionary origin.

All three colors have similar traits, but also have their differences. Analogous colors are evident almost everywhere and work so well to create a nice harmony in an image or in a real-life setting (like a sitting room).

color theory analogous

 

For example, when creating a design from scratch using analogous colors, you wouldn’t have equal amounts of each color in the design. Typically, you would choose just one ‘mother’ (some people may call it ‘dominant’) color and then use the rest to compliment it in your design. There are no specific rules, but 3-4 colors work best.

Triadic Colors

Triadic color schemes are three colors taken from the color wheel by forming a triangle connecting the three colors. Triadic color schemes always contain rich and vibrant colors of huge contrast. You could say they’re the opposite of a monochromatic color scheme that we spoke about above.

color theory triadic

 

For example, a triad could be made up of yellow, red, and blue, but if you think they wouldn’t compliment each other very nicely, then you could take different hues, tints, and shades from each color and create a triadic color scheme from those.

Tetradic Colors

color theory tetradic

 

Similar to triadic colors a tetradic color scheme is combined of four colors that are made up of two sets of complementary colors. The four colors form a rectangular shape on the color wheel.

On the short side of the rectangle, there is only one color separating the colors and on the long side of the rectangle there are three in between. Again, like the triadic color scheme, it is best to let one color be the dominant or mother color.

Color Combinations

So, now that you know the basic rules around color harmony, and its relation to color theory, let’s delve a bit deeper into color combinations. Knowing how color theory is more or less the art or science of combining multiple colors and our perception of those colors is invaluable. Putting colors together is definitely a skill in itself, because the potential combinations are endless.

The most important thing to remember is balance, one color should balance the next. If you are decorating a room, for example, it would be advisable to have one strong color, and then the rest can work in harmony with that shade.

color theory duo lime green grey

 

Take this interesting duo – lime green and grey. The zesty lime green packs a serious punch and could be garish if it was paired with something equally strong. Teamed with a flat dark grey, it creates harmony and becomes a really cool and contemporary combination.

color theory deep green rose pink

 

Another pairing is this mysterious deep green combined with a rich rose pink. What works here is the balance between the masculine green and feminine pink, neither of which are too extreme in either direction.

color theory coral brown peach

 

A fabulous trio color combination would be this coral, soft brown, and peach. Together they conjure up feelings of homeliness. Here, the warmth of each color creates harmony. This combination would be perfect for a living room or bedroom!

color theory purple shaded quadrant

 

Once you go above three color combinations, it is important that you have a clear vision of what the end goal is. Harmony and balance is harder to achieve, so make sure you try and test before committing.

This purple-shaded quadrant is in perfect harmony, because it pulls inspiration from different families of hues. The rich raspberry is the perfect companion to the dark, inky purple. Both of these rich shades are then set off by the lilac and mid-tone blue/purple.

 

The meaning of colors

Green

color theory green

 

We often associate green with nature, health and vitality, so it’s no wonder we see this color in environmentally-friendly products or natural beauty and health products. Use nature-inspired hues in your designs to convey a natural feel.

Red

color theory red

 

Red is powerful and can convey many different emotions and feelings, depending on its context. It can evoke passion and love in some, but anger and rage in another. Universally, red is a color of strength and brands often use it to show power, even dominance. Prominent brands when it comes to red are Coca Cola, YouTube, Toyota, CNN and Canon.

Blue

color theory blue

 

Some see blue as a calming color, while others associate it with sadness. It has of course long been a color to denote masculinity, often campaigns associated with men’s health overwhelmingly use blue. A dark navy blue is often used in business campaigns as it conveys a sense of seriousness and professionalism. Use navy blue in your design for that corporate feel and conservative look.

Purple

color theory purple

 

A traditionally royal color, purple has been associated for centuries with royalty and majesty. Purple will always be a color of luxury and it is often used to show opulence or expense. To give your designs a luxurious feel, incorporate purple throughout.

Orange

color theory orange

 

It is said that the happiness associated with the color yellow combined with the energy of red combines in orange.  Orange gives a sense of sunshine, joy and the tropics. The color is associated with happiness, creativity, warmth, sunshine, fun and happiness.

Orange has the appearance of general wellness, vibrancy and emotional wellness. Orange is believed to offer emotional strength in difficult times.

Yellow

color theory yellow

 

Yellow can be seen as having two different meanings. The first is being a bright, fresh, positive energizing color. Sunshine and optimism are characteristics of yellow, along with building confidence and encouraging communication. Bright yellow tends to be used a lot in products for children in particular as it’s fun and attention grabbing.

On the other hand, the overuse of yellow can be negative. A lack of focus, frustration and inability to complete tasks can be the result of the overuse of a bright yellow color.

Pink

color theory pink

 

Pink on the color wheel instantly reminds people of femininity and girlishness and gives a sense of calmness, love and kindness. The soft and relaxing, romantic color is actually a light shade of red, but it’s so popular it has become a color of its own. It is said to be the sweet side of red.

Ever wonder why Iowa Hawkeyes has pink locker rooms for visitors? (Or did you know they do) Well it is famously said to be to make the opposing team be so relaxed at the sight of the color and also another theory of the pink locker rooms was they would psychologically beat the opposing team before they stepped out on the field.

Black

color theory black

 

The color black comes with many mixed emotions and meanings for everyone. Some include power, mystery, aggression, sophistication, evil, aggression, grief, mystery or even both positivity or negativity.

The color can also be used powerfully among rebellious teens or people wanting to cover up weight or even feelings, fears and insecurities.

The color black is commonly used in brands in contrast with white to stand out. You would think since they are opposite colors they would not work well, but in actual fact they’re very effective.

White

color theory white

 

A color that is associated with purity, innocence, light, safety, brilliance and cleanliness. A blank canvas being pure white is satisfying and clear to look at. Painting the walls in your entire house white is now a trend as it has a clean and classy look.

The color white gives mental clarity and a look of freshness that is clutter free. Like most colors, when overused white can have a negative impact, being blinding if it is in very bright light. White is a very complimentary color as it almost goes with any color on the color wheel.

Turquoise

color theory turquoise

 

Being a color between blue and green color, turquoise can be summed up as cool and calming. The meaning of the color can be described with words such as wisdom, creativity, emotional balance, growth, peace of mind and mental clarity.

It is said to have turquoise around is good in case of emergency and the color can help you think clearly and make decisions.

Brown

color theory brown

 

Even though it can appear to be dull and serious, brown can be associated with quality, comfort and friendliness and approachability.

Another side to the color brown is that it can be associated with wholesomeness, nature, outdoors and agriculture. The color that brown is teamed up with also depends of the meaning it gives off. For example, brown and ivory can appear stylish and classy.

Grey

color theory grey

 

Grey is a color that has more negative characteristics rather than positive. This timeless and practical color is often emotionless, moody, dull and dirty, but on the other in the right setting it can be sophisticated, knowledgable and wise.

The perfect neutral, an intermediate grey color can be used as a canvas for designers. The ‘grey’ area is commonly heard of and can be characterized as the area between black and white.

Coral

color theory coral

 

Coral is a color made up of pink and orange, giving the vibe of warm and tropical seas and it can be seen as a color of peace. Coral helps you focus and gives you clairity to form balanced and healthy opinions.

Living coral (color of the year in 2019) a shade of the coral family is very popular and is nourishing and youthful without being overbearing. Our color combinations blog goes into more detail about living coral and many more colors.

Indigo

color theory indigo

 

Indigo is often described as a color that is a mix between blue and purple. In times of deep concentration, the color indigo helps us to focus and is powerful and dignified.

It is a color that go well with imagery related to wisdom and devotion. This color is strong and on the negative side, is associated with addiction. Too much of the color is also said to give your ego the potential to go out of control.

Amber

color theory amber

 

Similar to coral, yet more akin to a shade of dark yellow, amber promotes feelings of joy and energy, but can be daring. The color amber can make one feel safe and create an atmosphere full of happiness.

In marketing, the orange-yellow color of amber can draw impulsive shoppers into a store. Amber is also commonly used in call-to-actions (CTAs) on websites.

Olive Green

color theory olive green

 

Olive green is a dark shade of green that signifies ambition, greed and flattery. There is a mixture of  meaning for this color, also symbolizing luck in most Western cultures.

Leadership, especially among women, is commonly associated with the color olive green.

Lilac

color theory lilac

 

Lilac is a soft, relaxing and friendly looking color that has a sense of innocence about it. It’s a very light purple, giving a sense of tranquility, peace and friendship.

More traits of the color lilac are bravery, value and loyalty. Brands may choose this color to express the personality of their brand as open-minded and friendly. It’s a nice, unique color that we don’t see enough of.

Fuchsia

color theory fuschia

 

You would presume fuchsia is a shade of pink, but it is actually a purplish-red color that is very vibrant and eye-catching. This confident, bright and bold color is perceived as a ‘girly’ color.

Fuschia inspires commitment and attracts a lot of attention. If it were a person, it would be loud and outgoing.

Burgundy

color theory burgundy

 

A touch lighter than the color maroon, burgundy can be viewed as a color to represent power, wealth and high society.

It’s one of the more sophisticated colors on the color wheel. Many wine companies would use burgundy as a color in branding, seeing as burgundy is part of the wine color family.

Color And Branding

Savvy marketers and business owners know the importance of color on branding. As we showed you above, colors hold their own special meaning and significance and they have the power to evoke emotions.

The color choice of certain brands is so successful that they have trademarked the exact shade. Tiffany & Co is the famous New York City Jewelers known not only for their amazing choice of jewelry, but for their iconic robin’s egg blue branding. Tiffany Blue was trademarked in 1998 and is also a Pantone color.

Barbie Pink, Cadbury Purple, T-Mobile Magenta and UPS Brown are all trademarked colors that have worked spectacularly for their brands.

They have found the formula for brilliant brand recognition. It is estimated that brand recognition can be increased by up to 80% by effective use of color throughout marketing, packaging and logo design.

Creative marketing uses the emotions of consumers to sell their product or service successfully. Using color as a tool to do so is a quick and inexpensive way to carry the right message. As outlined in the section above, every color carries its own meaning. As a business owner or marketer, use this to your advantage.

If you are a brand new health drink, then chances are you wouldn’t use black as your primary color, because the immediate associations that people automatically think of would be way off what would you want to portray. On saying that, there is room for creative licence. Sometimes a bit of shock value works wonders!  But always make sure you understand what you are doing and why.

Brand colors can be used everywhere, from their logo and website, to social media and marketing collateral. But they are just the obvious ones, business owners need to think about staff uniforms, store fit-outs and advertizements. Before you commit to a color, make sure that you have thought all these things through.

Let’s look at some strong brands and the reasons why their colors work. Here are some of the most popular brands that are instantly known by their colors:

color theory color and branding

Conclusion

An understanding of color comes naturally to some people, but there is always room to improve and push the level of your comprehension.

Those for whom it doesn’t come so easily, this blog post should help you to lay the foundations to build on your color knowledge.

 

5. Color Theory


What is Color Theory?

Color theory is a multitude of categories, definitions and concepts.

This tutorial covers the parts that are most useful for web design:

  • Primary, Secondary, and Tertiary Colors
  • Color Wheels (RGB, CMY, RYB)
  • Color Hue, Lightness and Saturation

The Color of Light

Sir Isaac Newton developed the theory that all colors are mixtures of RedGreen, and Blue light.

This resulted in the first known color circle in 1666.

Sir Isaac Newton
Color Wheel

The Color of Paint

In 1766 the scientist Moses Harris created the first color wheel to classify RedYellow, and Blue as the primary colors.

Moses Harris worked with paint (Newton worked with light) following a theory (by a French painter) that all colors are mixtures of Red, Yellow, and Blue pigments.

Moses Harris
Color Wheel

 

Leave A Reply

Your email address will not be published.