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.
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.
If you liked this post, I cover all of this and more in my book, Understanding Color. You can grab a copy for yourself right here.