WHY COLOR SCHEMES WORK

WHY DO SOME COLOR SCHEMES WORK, AND OTHERS DON’T?

COLOR THEORY CATEGORY • 48 COMMENTS

The one question that comes up the most about using color is “why do some color schemes work and others don’t?” Maybe you’ve wondered that yourself? Today, we’re going to start tackling that question.

The answer you’re looking for actually comes in three parts. One, it depends on where the colors are on the color wheel in relation to each other. This means you need to know what a color wheel looks like, what’s on it, and what the basic color relationships are. Two, the contrast between colors is important, so you’ll need to know about value and saturation. And three, it’s about understanding how colors react next to each other.

Because each part is a big topic, I’m breaking them up into separate posts. Today, we’re going to start with the color wheel and color relationships.

 

 

THE COLOR WHEEL

The first thing you need to know is that color is made up of three parts: hue, value, and saturation. Hue is the purest form of a color, what color looks like in its most basic form. Value deals with how light or dark a hue is. Saturation deals with how vivid or dull a hue is. Here’s an example of the different parts at work:

All three parts work together to create a color, but of the three, the one part that absolutely has to be present is hue. A color can’t be a color without a hue, because hue is the biggest visual indicator of, and the starting point for, color.

That’s why color wheels use bright, fully saturated, undiluted hues. If you’re not familiar with the color wheel, this is what one looks like:

Most artist color wheels will have 12 basic hues on it – 3 primary colors, 3 secondary colors, and 6 tertiary colors. You already know half of them by name, if not category – the primary colors of red, blue, and yellow, and the secondary colors of orange, green, and purple.

The primary colors are called “primary” because they can’t be made or mixed; they exist as is, and different combinations of them create all of the other colors in the traditional artist’s color model. For example, combining two primary colors together creates a secondary color. Combining one primary and one secondary color creates a tertiary color.

Makes sense, right? And you could keep combining them, but most color wheels will stick to the primary, secondary, and tertiary colors to keep things simple. These 12 colors are also the simplest forms of individual colors; further mixing would only create various hues of these 12. Think of them as the larger categories that all other colors will fall into.

Since the primary and secondary colors are pretty familiar, let’s talk about the tertiary colors real quick. You may know them by fancier, jazzier names like “aqua” or “lime green”, but to keep things straight, color theory refers to them by the two colors that make them up, with the primary color going first. They are red-orange, yellow-orange, yellow-green, blue-green, blue-purple, and red-purple.

As far as arrangement goes, all the colors sit around a circle (hence the “wheel” part), with the secondary and tertiary colors sitting between the two colors that made them on the color wheel. So, green will always sit in between blue and yellow, and blue-green will always rest in between blue and green, no matter the shape of the wheel or which color is on top (I prefer red, but it varies).

This is done to show how colors are made, which is the first purpose of a color wheel. Here’s what they all look like together again, this time with labels:

 

 

COLOR RELATIONSHIPS

Now that we know how colors are made, the second purpose of a color wheel is to explore color relationships.

Color relationships are set methods of choosing colors that relate in some way to each other and look good together. Eighteenth century scientists wanted to create an easily repeatable method of creating and using color that anyone could do. From that desire color theory was born, and a lot of study has been devoted to finding quick and easy ways to put together appealing color schemes over the centuries. That’s why we have color relationships today.

Knowing that, let’s ask the question again: why do some color schemes work when others don’t? A big part of “why” has to do with what color relationship is at work in that color scheme. Your eye knows when something is working and when it’s not. So, if you’re looking to replicate a “good” color scheme, you’ve got to be able to identify what relationship you’re looking at.

There are seven color relationships – monochrome, analogous, complementary, triad, tetrad, neutral, and random – so let’s go through them one by one.

 

 

Monochrome is the first and simplest color relationship. It uses just one color, but different variations and shades of that color. One example would be shades of blue – light blue, medium blue, dark blue, dull blue, etc.

Why it works: Monochrome relationships work because it’s clean and simple. There’s a sense of unity to the piece because all of the shades are derived from one color. Visual interest can be added and focus can be directed to a particular section or area by choosing different shades with different values and saturations. Take a look at the six swatches above – where does your eye wander to? It should end up back on swatch #2, because that is the most vibrant blue of the bunch. That’s a perfect example of how to create visual interest and focus in a monochromatic color scheme.

When to use it: Use a monochrome relationship when you want your piece to feel cohesive. This is especially true if you have a lot of details that compete with each other that you’d like to blend together. Focusing on just one color will help unite all of the parts of your piece. This is also great for beginners learning how values and saturations work (which we’ll cover in depth in a later post).

 

 

Analogous relationships use two or more colors that sit next to each other on the color wheel. Examples would be orange/yellow-orange/yellow or yellow-green/green/blue-green. You can choose as many colors to use here as you like, but generally you want to stick to two, three, or four.

Why it works: Analogous relationships work because the colors transition into one another in a way that makes sense to our brains (thanks to the secondary and tertiary colors, which help connect the dots). This goes back to learning the colors of the rainbow as children – we know that green comes before blue, and blue comes before purple. So, if we use blue-green, blue, and blue-purple together, it makes sense to us. There is a natural flow because blue is used to create the other two colors.

When to use it: Use an analogous relationship when you want more than one color, but still want a sense of unity. Because the colors sit next to each other on the color wheel, using analogous colors will help your piece feel blended together and purposeful. Using a brighter, more vibrant shade of a color can help direct attention to a specific part of your piece, while still working with that natural flow of colors. Generally speaking, analogous relationships have less contrast to them than a complementary relationship, because of how the colors flow into each other.

 

 

A variation on an analogous relationship is split-analogous, which would still use two or more colors, but you’d choose every other color on the color wheel (assuming your color wheel has 12 swatches like mine does above). So, a split-analogous example would be blue-green/blue-purple/red-purple, red/orange/yellow, or blue/purple/red.

 

 

Complementary relationships are done in pairs, and those pairs sit directly opposite each other on the color wheel. Red and green, orange and blue, yellow and purple are all complementary colors.

Why it works: Complementary colors are powerful because they naturally play off each other, thanks to their color wheel positioning; red never looks more red than when it’s against green, and vice versa. Additionally, complementary colors will have one warm color (red, orange, yellow, and their variations) and one cool color (green, blue, purple, and their variations). Because the colors sit opposite each other, and a warm color is paired with a cool color, there’s a natural tension to this color relationship, which is intriguing to our brains. Whether we do it consciously or unconsciously, our brains are constantly searching for harmony, and color is no exception. So, when we see natural tension between complementary pairings, it forces our brain to stop and look.

When to use it: Use complementary colors when you want to emphasize the colors, when you want lots of contrast, or when you want to draw attention to multiple areas at the same time. Change the value and saturation of at least one of the pair for a more sophisticated color scheme, like a bright red against a soft sage green.

 

 

The variation on a complementary color is called split-complementary. You’d start with one color, then pick the two colors that sit on either side of its complement. So, instead of red/green, you’d choose red/yellow-green/blue-green for a split-complementary color scheme.

Why it works: Split-complementary colors play off the complementary relationship, and also makes our brains stop and look (but for a different reason). Where red and green makes us pause because they are exact opposites, we’re pausing with red/yellow-green/blue-green because they aren’t exact opposites. There’s enough tension and visual interest to keep our brains engaged while it puzzles out what it’s seeing. And while our brains are engaged, we’re still looking, which is always a plus when it comes to art.

When to use it: All of the suggestions for complementary colors apply here, too. Additionally, you could use split-complementary colors when you don’t want to be obvious about the color scheme, when you want to add a little more drama, or want an extra color to play with.

 

 

The triad relationship uses three colors, and these are chosen by picking every fourth color on the color wheel. The name comes from the shape that occurs between the colors, if you’re curious, and the split-complementary relationship could also act as a variation of a triad relationship. Triad examples include red/yellow/blue as well as red-purple/yellow-orange/blue-green.

Why it works: Triads work because there’s equal distance between the colors on the color wheel. Even if a viewer isn’t familiar with the color wheel or color theory, their brains see the relationship as a balanced one, and “balance” equals “harmony” to our brains and eyes.

When to use it: Use a triadic color grouping when you’re looking for a more complex color scheme, something that’s intriguing without being obvious.

 

 

The tetrad relationship uses four colors that are chosen from every third color on the color wheel. Like the triad relationship, the name tetrad comes from the shape made between the colors. Orange/yellow-green/blue/red-purple is just one example.

Why it works: Despite having one more color than the last color relationship, tetrads are remarkably similar to triads. They work for the same reason triads work – there’s a balance to this relationship because of the way the colors methodically chosen.

When to use it: Like a triad, use a tetrad grouping when you want a more complex color scheme that still feels balanced and harmonious.

 

 

One variation on a tetrad relationship would be to use double complements, no matter the positioning of each pair. Instead of orange/yellow-green/blue/red-purple, you could do red-purple/red-orange/yellow-green/blue-green. So long as each pair is a complementary pair, your color scheme will work no matter if the second pair sits 90 degrees away from the first, or if they sit side-by-side. Since it still uses four colors that create a rectangular shape, this falls under a tetrad relationship.

 

 

The sixth relationship is called a neutral relationship because it uses variations of just black and white. Since black and white aren’t really colors (they don’t have hues), I like the accented neutral variationinstead. Think of it like a cross between a monochrome relationship and a neutral relationship. You’re still using black and white, but you’re bringing in a few shades of a single color for added interest.

Why it works: This relationship works for all of the reasons a monochrome relationship works – you’re using just one color, so there’s a sense of unity to it. The added benefit of an accented neutral relationship is that you’re also bringing in whites, blacks, and grays, neutrals that help ground or brighten the color scheme.

When to use it: This is a great option when you want to draw attention to a specific spot, while making everything else fade back.  Generally speaking, you’d want to use only one or two shades of your chosen color and rely on the neutrals for additional shades, rather than multiple shades of your color like a true monochrome relationship. You’d then use that pop of color on a particular spot to pull attention to it, while the majority of your piece remains neutral.

 

 

The last relationship is usually called clashing, but I prefer random (it sounds nicer). This is when your color scheme isn’t methodically chosen; there’s no direct relationship to the colors, and no set way of picking them.

Why it works: These can feel intimidating, but they don’t need to be. Think of red and blue; those two colors aren’t next to each other, or directly across from each other. They have no real relationship to each other that makes sense, but they still look good together. There’s nothing clashing about them – our eyes still find them pleasing. That’s the very definition of a random relationship that works.

When to use them: I’ve found that a lot of random color schemes that I’ve used were happy accidents. Because they don’t fit into a pattern like the other color relationships do, there’s going to be a lot of visual interest and contrast with random colors, simply because our brains want to classify or puzzle out a relationship that isn’t there. So, use these when you want a more complex color scheme that is inherently interesting or a lot of contrast.

 

 

There’s a lot of info here to digest, so I hope this begins to clear up the mystery of why some color schemes work. If you’ve got a color scheme that really catches your eye, try to use what we’ve talked about here to break down and classify what relationship it is.

Now, on to Part 2 and Part 3!

WHY COLOR SCHEMES WORK :: PART 2

COLOR THEORY CATEGORY • 14 COMMENTS

Last week, we talked about the first part of why some color schemes work and why others don’t (quick recap: it has to do with the color relationship at work in the color scheme we’re looking at). Now, let’s talk about the second reason a color scheme can pop – contrast.

In order to do that, we’ve got to know more about the two parts of color we haven’t covered yet: value and saturation. So, keep our general question in mind; we’ll come back to it after a brief side trip.

 

 

WHERE’S BLACK AND WHITE?

In Part 1, did you notice that black and white weren’t on the color wheel? Why is that? Because black and white aren’t really colors.

Oh, sure, we call them colors (me included) because we can see them and they are a visual property of an object. But in color theory, they aren’t colors because they don’t have a hue. If color is made up of hue, value, and saturation, and it needs a hue to be a color, what happens when there’s no hue present? We get the neutral colors of black and white.

The neutral colors aren’t passive, even if their name suggests they are. Mixing black and white with a color will affect that color’s value, or how light or dark it is. Gray, a mix of black and white, will affect a color’s saturation, or how dull or vivid it is. Because of the neutrals, we can turn 12 basic hues into thousands of complex colors.

Since the neutrals have no hue, there’s no place for them on the color wheel. In order to understand their effects on color, we need another reference tool: a scale.

Value scales will show what happens when you mix black and white with a color. Likewise, a saturation scale will show what happens when different shades of gray are mixed with color. The purpose of each scale is to fill in the information that a basic color wheel doesn’t show, namely all of the available shades and tints and tones of each color.

Here are value scales for the 12 basic hues:

I’ve placed the pure hue from the color wheel in the middle, with white on the left and black on the right. In between the neutrals and the hue rests the different color changes as the color moves closer to each end. I’m only showing three steps here, but there are countless changes as the color shifts to a particular neutral. The more steps you have, the more subtle the change.

I’ve done something similar with the saturation scales:

The hue still rests in the middle, but since there are different grays, I picked a lighter one and a medium one to illustrate how a color loses saturation the closer it slides to gray. Depending on the gray, there can be subtle value changes happening, too.

Now that you know what the value and saturation scales look like, you can see that it might be cumbersome to have flip back and forth between each of these and the color wheel. Some of the more detailed color wheels you can find at craft stores will incorporate black and white into the wheel for quick reference, but I still wanted to show you what they look like separately. I think by showing them this way, you can focus on each individual color to get a sense of what’s happening between it and the neutrals. It also helps show how specific shades are made.

You can make your own value and saturation scales from scratch using paint if you want to, but that can be time consuming. Instead, if you have a graphics program like Photoshop, Photoshop Elements, GIMP, or another alternative that has a color picker, you can find out this information digitally.

Here’s how:

This is the Color Picker Tool in Photoshop Elements; yours should look similar to this. All of the information we’ve talked about up to this point can be found here. See the color column running vertically next to the square color field? That’s the color wheel split back open into a spectrum. It varies slightly from a color wheel, in that the colors aren’t shown in equal amounts. Instead, they are arranged to show the amounts of color naturally found in a spectrum. Notice how wide the blue band is compared to yellow; that’s reflective of what occurs in light and nature.

That difference aside, this is your color wheel, and you’d slide those arrows (or click with your mouse) anywhere along that column to change what hue you’d like to work with in the square color field.

As for the square color field, this is a mix of the value and saturation scales we’ve talked about today. The neutrals are located on the left, the pure hue at the top right. The value scale for red is broken in half, with the lighter half running along the top edge, and the darker half running along the right side. Everything in between is a mix of value and saturation. The further left you click, the more desaturated, or closer to gray/neutral, the color becomes. The further right you click, the more saturated the color. The higher up you click, the lighter the color. And the lower down you click, the darker the color. I’ve put the value and saturation scales next to that square color field so you can see this better.

Knowing what you’re looking at now, you can pull up your color picker and play with the values and saturations of any color you like.

 

 

WHAT ABOUT BROWN AND BEIGE – AREN’T THEY NEUTRALS?

In fashion, yes. In color theory, not so much.

Here’s why: brown and beige still have a hue, even if it’s dark or faint, so they aren’t neutrals, they’re colors. Both actually come from yellow and orange; take a look at those value and saturation scales again.

I’ve highlighted a few shades of brown and beige here – those are courtesy of the neutrals!

The darker, lighter, and grayer shades can sometimes act like a neutral. I tend to think of them as quasi-neutral, because they can calm down a brighter hue. The lighter and grayer shades of color are especially great for wall paint in your house, providing enough color to not be boring without overwhelming you with saturation. That same line of thinking is also great for background colors on a blog or website.

 

 

PUTTING IT TOGETHER

Now that we know about value and saturation, we can use that and our knowledge of color relationships to put together a specific color scheme. The goal here is to work on making contrast by only altering the values and saturations of the colors.

I’m going to use the same color relationship throughout each example – a triadic relationship with red, yellow, and blue.

I can change the values so that every one is the same. This provides a lighter or richer color scheme, depending on which values I choose. But this doesn’t add any new contrast; since the values are the same for each, they are going to read as similar or equally important.

The same is true if I match the saturation levels for each color. It gives the colors an interesting look, but not a lot of contrast is made.

Instead, I need to choose different values and saturations for each color, making sure each is different. See how this makes the colors pop against each other? A color scheme becomes more interesting when you play and alter each color’s value and saturation.

If I have a secret to working with color, this is it.

Alternately, you could keep two of the values and saturations similar while the third color is nice and bright. This is a good way to highlight or direct attention to a particular area. If you’re having trouble seeing past the colors to the value or saturation, use a drawing trick and squint when you look at the three examples on the left. Beginning drawing students do this to help them focus on particular shades.

 

 

I know I’m only showing a few examples, but can you see how many different options you have with just one color relationship and one set of colors? And I haven’t even shown all of the options with this example, either, so you can imagine all of the alternatives you can make with all of the color relationships and all of the different color choices.

Now it’s time to ask our bigger question: why do some color schemes work when others don’t? Part of “why” is because of the contrast created from altering just the values and saturations of a color scheme. By changing each color’s value and saturation so that they are all different, we can showcase specific colors, we can highlight particular areas, and we can make a color scheme more interesting.

Coupled with Part 1, I hope you have a better understanding of why certain color schemes pop when others don’t! In Part 3, we’ll recap and finish up answering this question with how colors react to each other.

 

WHY COLOR SCHEMES WORK :: PART 3

COLOR THEORY CATEGORY • 8 COMMENTS

It’s Part 3 of our color theory series! We’ve covered the importance of color relationships, and worked out how value and saturation help create contrast. Now, we’re heading into the last part of our answer of why some color schemes work when others don’t: how colors interact with each other.

 

 

INTERACTION AND REACTION

This part to our answer relies on human perception and how our eyes see color, and it’s very, very simple:colors will look different depending on the other colors surrounding it.

We can look at colors individually and identify which color is which, no problem. On its own, the color appears as it should. Once we introduce multiple colors, though, that first color won’t look the same. Our brains aren’t reading them as separate colors anymore, it’s seeing everything as a set. The colors around it will affect the way that first color looks.

The example above is derived from the work of Johannes Itten, a Swiss painter and theorist. The color in the inner squares is the same, but see how it looks different depending on the background color? Against the red or gray square, the orange looks darker than when it does against the blue or purple squares. That is color interacting with each other.

This is not just an art principle. Ever paint walls in your house and hated it? It’s confusing, right, because you liked the color in the store. But once you got home and put it on the walls, it looked awful. That’s because of the way that color looks in the lighting of your house, coupled with whatever colors you have on furniture, rugs, decorations – all things that aren’t present in the store. The paint color is interacting with the colors of your living space. It looks different because the colors around it are different.

I pay attention to this in my color palettes. I can take the swatches and rearrange them in different ways, and each feels a little bit different, even though the photo is the same and the colors are the same. The way the color swatches are arranged is deliberate on my part because I want them to have a certain feel and to look a certain way together. I want to present the colors in a particular way.

Take a look at just the swatches. Do the colors look a little different to you depending on what colors are next to them? They should, even if it’s really subtle; they are reacting to each other.

 

 

YOUR WORK

Replicating this in your own work can feel frustrating because this interaction has less to do with actual steps to follow and more to do with a general awareness of how color reacts. There aren’t really any hard and fast rules here. It’s about developing a sensitivity to color by consciously seeing and analyzing the color schemes you work with over and over.

Taking it a step further, it’s about using colors in a way to get your message across to viewers. It’s about presenting colors to viewers to elicit a particular reaction. It’s subtle, and it’ll change depending on the artist, the piece, the message, and the color scheme.

So, when you’re deciding on a color scheme, ask yourself how those colors look together. Individually they may be strong, but look at them now as a whole. Are there any strange reactions going on? Do the colors read the way you want them to? Meaning, does Color A still look like Color A against Color B, or does it shift a little? Is it a good shift or a bad shift?

Mostly, it comes down to playing with the colors you’ve chosen – using different amounts and arrangements, deciding on a focus, then stepping back to see how it all comes together. Use everything you know. If you’ve got a color scheme that just isn’t working, try shifting the values and saturations. A subtle shift one way or another can make a color scheme pop. If it’s still not working, consider eliminating the offending color all together.

Also remember the color relationships. Complementary colors are going to oppose each other naturally, so red will look redder against green. A similar effect will happen with any colors far enough apart on the color wheel, and grays, too, will cause color to pop out from them. The closer in value, the closer to neutral, or the closer together colors sit on the color wheel to each other (analogous colors) will have the opposite effect and cause the colors to blend together.

 

 

PERCEPTION

Before I wrap up this post, here’s a few quick tips about perception and color.

 

Warmer, brighter, or lighter colors will advance towards a viewer, while cooler, desaturated, or darker colors recede back. Using warmer, brighter, or lighter colors on a focal point will not only bring attention to it, it’ll cause it to come forward visually. This is a good for things beyond art like links on a website, or a brand’s color.

Similarly, using a cooler, desaturated, or darker color on a website’s background is a good choice to keep attention on the content, and not the background. Because they will recede back, this is also good for art pieces where you want to create a background that doesn’t scream for attention.

 

Placing a lighter color next to a darker color will make both look lighter and darker. This is good to do when you really want to emphasize an edge or line, or make a highlight or shadow pop.

 

Placing two colors with similar values or saturations will cause them to blend together, even if they have different hues. Because the values are similar, they are going to read as similarly important. This is good for non-focal areas of a piece.

Having trouble seeing the values? Squint.

 

Placing three or more colors with the same hue but different values right next to each other will cause one edge to look darker and one edge to look lighter (squint if you can’t see it). Why? It’s an optical illusion. Your brain is blending the colors together, and is making one edge look darker and one lighter as your eye moves across the scale. This is exactly why I didn’t put the swatches of the value and saturation scales right next to each other; I wanted your focus to be on the color versus the optical illusion that’s happening.

Chances are, you’re going to be using a variety of colors at one time, or a monochromatic color scheme on different shapes, so this may never occur for you. But if you are creating value scales or use grids in your work, you’ll notice this very quickly. To avoid it, leave a little space between each box.

 

 

WRAP UP

I don’t think there’s such a thing as a bad color, or even a bad color scheme. It’s more about how a particular color scheme looks together and works together – how successful is it? What’s not working? Sometimes, a fixed color relationship is needed. Sometimes, a simple change in one value or one saturation can help a color scheme. Sometimes, it’s not putting two colors right next to each other.

Makes sense now, right?

Knowing a little color theory can only help you as an artist, so I hope you’ve enjoyed these posts! I do plan to do more of them in the future, most probably in the new year, so keep an eye out. In the mean time, if you have a color question, send it over. Thanks for reading and bookmarking and sharing!