We don’t live in a black and white world. From Pantone to Pinterest, color theory impacts the way we see and feel the world around us. It can influence our purchasing decisions and affect our mood. It attracts the eye and it even tells us what to look at and what to ignore—which is why it’s important that anyone working with visual media and stock images learns to speak the language of color. Once you know what you’re looking for, you can even search by color in our Storyblocks (formerly known as GraphicStock) library to find the perfect photos, vectors, and illustrations to complete your projects.
To get you started, we’ve drawn up a crash course in the basics of color theory. These essentials are important building blocks for any artistic endeavor, from graphic design to painting and photography.
The Basics of Color
Let’s start at the very beginning, shall we? Long, long ago, Newton began studying color theory. His color wheel laid the groundwork for later generations of scholars, most of whom lived and worked in the 19th century. These scholars provided us with modern color theory, one tenet of which is the principal that there are primary, secondary, and tertiary colors.
Primary, Secondary, and Tertiary Colors
Primary Colors are, in their most basic definition, the colors from which any other color can be created by mixing. Not everyone agrees on what colors are true primary—but we’ll discuss that later. In traditional painting, the primary colors are red, yellow, and blue (as seen in the color wheel above).
Secondary Colors are colors that result from mixing two primary colors, such as green (yellow + blue), purple (blue + red), and orange (red + yellow)
Tertiary Colors are colors that are obtained by mixing two secondary colors or a secondary color with a primary color. For example, if yellow is a primary color, and orange (the mixture of yellow and red) is a secondary color, yellow-orange would be a tertiary color. Tertiary colors are shown on the color wheel above in parentheses.
The Other 10 Million Colors
Obviously, we all know that there are more than 12 colors available to you for any given project. In fact, the human eye can see approximately 7-10 million colors. So how do we make up this massive difference? With hues, shades, tints, and tones.
Hue is almost the same as color, and the words can sometimes be used interchangeably. However, there is a slight difference in that hue generally refers only to those 12 basic colors from the color wheel. They are the twelve purest and brightest colors on the spectrum.
A shade is the mixture of a color with black.
A tint is the mixture of a color with white, also known as a pastel.
Tones (also called saturation) is achieved by mixing a color with both black and white (gray) to adjust the intensity of the color.
Additive and Subtractive Color
Now that you understand how colors are created, it’s time to fill you in on why people disagree on what colors are primary. It all comes down to how you are creating your colors, for what purpose, and with what medium. Are you working on a digital screen? With oil paints? For print? All of these things make a difference because how we see color is determined by one very elusive property: light.
Join Our Creative Community
Access the best video tips, design hacks, and deals straight to your inbox.
CMYK is a subtractive color model whose primaries are cyan, magenta, and yellow (the CMY in CMYK). In simple terms, that means that when all three primary colors are combined, the result is black (K). Removing one of the colors will result in red, green, or blue. Removal of all of the colors results in white. This is the most common color model used for printing—just think of your color printer ink cartridges.
The RGB color model is an additive color model whose primaries are red, green, and blue. An additive color model means that if you combine all three primary colors you get white instead of black. This works the same way light waves do, which is perfect for systems that emit light, such as electronics like monitors. Because of this, RGB is used for computers, phones, and other digital displays including web graphics.
The computer code for black on an RGB model would be B=0. Each primary is 255 (R=255 ; G=255 ; B=255) and all the colors in-between will have a corresponding code somewhere between those values. If you are looking to create a color on a web-based platform, many will only give you the option to use RGB values or a HEX code, so this system is hugely important for web designers in particular. It’s worth noting, however, that most computer and non-web-based systems will allow you to use either RGB or CMYK numbers to find the color you are looking for.
Note: color HEXcode is a letter and number value beginning with a # sign, which is used in HTML, CSS, SVG, and other computing applications to represent colors.
“But wait,” you say. “I thought the primary colors were red, yellow, and blue—not red, green, and blue or cyan, magenta, and yellow.”
RYB is still the oldest (some date it as early as the 16th century) and simplest color model and is the one taught in most fine arts institutions today. It is primarily used for painting but does not take light into account as much as the other models do.
Colors in Action
Creating Color Schemes
Now that you know the basics of color theory, we can get down to the nitty-gritty of actually applying everything you’ve learned. What makes some color combinations “clash” while other combinations work well together?
One—sometimes aggravating—exercise many art students are forced to undertake in color theory classes is to place the same color next to two other colors in order to make the original color appear different in each instance. In the example below, the blue tile in the middle of each larger square is the same exact color. It only looks different in comparison because the colors surrounding it have changed.
The way we perceive color is directly related to the way it reacts to its environment. The color doesn’t change, but our perception of it does. Some of this is intuitive, particularly when it comes to contrast—you wouldn’t put a dark green text on a black background because you wouldn’t be able to see anything! You intuitively know that contrast makes foreground items more visible. Whether or not you should use orange and green on the same web page is a trickier problem. Luckily, there are several different models for approaching color schemes to help you out.
Monochromatic Color Schemes are color schemes which use only one hue, such as blue, and individual shades, tones, and tints are used for contrast.
Analogous Color Schemes use colors that are next to one another on the color wheel, such as blue, blue-green, and green.
Triadic Color Schemes use colors that are evenly spaced on the color wheel, such as green, purple, and orange.
Complementary Color Schemes are color schemes which use colors on opposite sides of the color wheel, such as red and green.
Split Complementary Color Schemes are a variation of the complementary color scheme. It uses one base color and the two colors next to that color’s complement (the color directly opposite it on the color wheel). For example, since yellow’s complement is violet, it’s split complementaries would be blue-violet and red-violet.
These are not the only color schemes, but they are the most basic and popular. Play with colors within each scheme (and outside of them) to learn for yourself how colors interact!
Color and Emotion
There’s a reason spa’s are usually decorated in shades of pale blue, sage, lavender, and white. And there is a reason that the Russian Constructivists creating state posters and propaganda chose red and black for their media and posters. Color is emotional. You can create a basic ad, but the colors you choose will impact the message your audience receives as much as the text and design do.
This can seem intimidating, but it’s actually great! It’s a powerful weapon in your arsenal—which is exactly why you need to understand some basics about color psychology. Color and emotion is a very complex subject, but in general:
Cool colors like blue, lavender, and teal are associated with feelings of tranquility and loyalty. They make viewers feel secure, trusting, and peaceful. They are (usually) not flashy colors, and so they convey a sense of sophistication and elegance. Tints of blue are also often associated with young boys. Negatively, these shades can also be used to convey coldness and fear.
Red is usually the most saturated and dominant color on the spectrum. Because it always stands out, it’s associated with very strong feelings and always relays a sense of confidence. Red is the color of love and passion, but also of power, desire, and fire. Red is also associated with speed—there is a reason red cars are rumored to get pulled over more frequently than cars of other colors.
Conversely, red can convey danger, warning, and anger. It’s softer cousin, pink, is symbolic of love and femininity. Pink is a sensitive, romantic color that can also come across as saccharine and childish. It almost goes without saying that pink is generally associated with women and young girls.
Orange, like red, is associated with motivation, strength, and courage, but also has a reputation as friendly, cheerful color. Be wary, however, as it can come off as cheap. If you work in the restaurant biz, it’s good to know that orange is thought to stimulate the appetite (as does placing it’s primary colors—red and yellow—side by side. You’ll see this at play in the color schemes for many fast food chains).
Yellow is the color of joy, sunshine, and optimism. It is the easiest color to see, and always stands out—but its brightness can make it difficult to see clearly against many background colors, and like orange, it can seem cheap. Yellow can also make viewers feel anxious because of its overwhelming brightness.
Jewel Tones such as deep blue, purple, green, and garnet have a feeling of luxury and wealth. This may be ingrained in our psychology because of these color’s histories. Deep red and blue were among the most expensive pigments artists could purchase, and so were reserved for the most luxurious and ornate paintings, often alongside gold leaf. Purple, another outrageously expensive pigment in earlier times, was a color only the richest could afford to wear and was even reserved for royalty under Elizabeth I.
Green and Brown are shades closely identified with nature and the outdoors. They remind us of the environment, longevity, fertility, new life, peace, and of the warmer seasons. Green can also be associated with money and wealth, along with all of money’s negative connotations—envy, jealousy, and greed.
Finally, shades of Gray range from the luxurious, high-tech platinum to the solid reliability (or conservative gloominess) of charcoal. Black, the eternal classic, can exude classic elegance and formality, or can be the dark harbinger of mystery and death. Pure white imparts a feeling of cleanliness and purity, but can also come off sterile and cold.
Finally, when you are thinking about your color schemes, consider where your creation will be displayed—for example, Facebook is predominantly blue. If you want to get noticed, you need to ask yourself which colors will pop against your intended backdrop.
The meanings of colors can vary widely based on the perception of each individual viewer. You aren’t a mind reader, but you can manipulate these colors according to your needs by thinking carefully about how you will combine colors to create a color palette that will appeal to your ideal audience. If you wanted to attract a high-end clientele for a jewelry business, you would probably consider palettes consisting of precious metals, jewel tones, or soft blues and whites (a la Tiffany & Co). If you were designing a movie poster for a film about vigilante justice and war—think V for Vendetta or Gladiator—the same color scheme would be completely out of place.
A Few Notes in Closing
Now that you’re fully briefed on the basics of color theory and color psychology, experiment to find the color palettes that work best for you! A few more takeaways to remember:
- Trust your instincts—you intuitively know more of this than you may realize.
- Keep consistency of color throughout your design, be it a poster, home color scheme or a multi-page site. If each room or page is in a totally different color palette, it can create an inharmonious experience and confuse people as to your personal brand.
- Explore free web-based color tools, such as Adobe Color and Illustrator Color Guide. These programs have preset color palettes and can be a good place to start.
- Always test colors on your audience, and on the platforms you use most. See what works well and what doesn’t.
- Once you’ve established your color palette, save time and money by finding royalty-free graphics, photos, and vectors that fit your scheme. With Storyblocks, you can search by any color for completely customized results.