Color Theory
Remember back to your early school days, when having a 64-count box of Crayola crayons to choose from was the ultimate in creative freedom?
Well, as a designer in the digital era, you certainly don’t have to stick to the colors available from paints, inks, or other pigments, though there’s a lot we can learn from fine art’s approach to color. In fact, the human eye can see millions of different hues — but sometimes, choosing even just two or three to use from those millions can seem like a daunting task.
That’s because choosing colors for a design is both highly subjective and, at times, highly scientific. So where does that leave designers who just want a color palette that looks nice or makes a client happy? Like it or not, the most effective color choices go beyond just personal preference — because colors have an extraordinary ability to influence mood, emotions, and perceptions; take on cultural and personal meaning; and attract attention, both consciously and subconsciously.
For designers and marketers, the challenge is in balancing these complex roles that color plays to create an attractive, effective design. That’s where a basic understanding of color theory can come in handy. Traditional color theory can help you understand which colors might work well together (or not) and what kind of effect different combinations will create within your design.
And it all starts with the color wheel.
The Basics: Understanding Color
The Color Wheel
You’ve likely seen it in a school art class, or at least are familiar with its stripped-down form: the primary colors of red, yellow, and blue. We’ll be dealing with the traditional color wheel of 12 colors, often used by painters and other artists. It’s an easy visual way of understanding colors’ relationships with each other.
The color wheel is all about mixing colors. Mix the primary or base colors red, yellow, and blue, and you get the secondary colors on the color wheel: orange, green, and violet. Mix those with a primary color, and you get the third level of the color wheel, tertiary colors. Those include red-orange, yellow-orange, yellow-green, blue-green, blue-violet, and red-violet. The primary and secondary colors (with the addition of indigo) are also part of the visible spectrum of light, or the “colors of the rainbow.” You many have memorized the acronym “Roy. G. Biv” as a kid to remember these colors: red, orange, yellow, green, blue, indigo, and violet.
This way of understanding color is known as an subtractive model, which involves mixing colored pigments like paints or inks — both the traditional color wheel and the CMYK color system that printing equipment uses fall into this category. That’s opposed to the additive model, which involves mixing colored light (like the colors you see on your computer screen or TV) and uses a different set of primary colors: red, green, and blue, often abbreviated RGB.
In Canva, we have our own version of the color wheel that you can pick colors from. Any color you choose will be identified by a hexadecimal value (or hex code), a six-digit combination of numbers and/or letters (often preceded by #) used in many design programs to identify specific colors when designing for the web.
Color Terms
Before we get into how to use the color wheel to create color palettes for your designs, let’s take a quick look at some color-related terms that will help you understand the different types of colors you might be using as you work on design projects:
- Hue: synonymous with “color” or the name of a specific color; traditionally refers to one of the 12 colors on the color wheel
- Shade: a hue darkened with black
- Tone: a hue dulled with gray
- Tint: a hue lightened with white
- Saturation: refers to the intensity or purity of a color (the closer a hue approaches to gray, the more desaturated it is)
- Value: refers to the lightness or darkness of a color
Color Harmony
Now that we’ve got the more technical stuff out of the way, let’s look at how the color wheel can be a practical resource in choosing colors for a design project. We can pull a number of classic palettes from the color wheel that painters have been using for centuries to create balanced and visually pleasing (or high-contrast and striking) compositions. In most design applications, these color schemes will need to be split into one dominant color — dominant either because of how much it appears in the design, or because of how it stands out in comparison with other colors — and one or more accent colors.
1) Monochromatic: various shades, tones, or tints of one color; for instance, a range of blues varying from light to dark; this type of scheme is more subtle and conservative
2) Analogous: hues that are side by side on the color wheel; this type of scheme is versatile and easy to apply to design projects
3) Complementary: opposites on the color wheel, such as red/green or blue/orange; complementary colors are high-contrast and high-intensity, but can be difficult to apply in a balanced, harmonious way (especially in their purest form, when they can easily clash in a design)
4) Split-Complementary: any color on the color wheel plus the two that flank its complement; this scheme still has strong visual contrast, but is less jarring than a complementary color combination
5) Triadic: any three colors that are evenly spaced on the color wheel
6) Tetradic/Double-Complementary: two complementary pairs; this scheme is very eye-catching, but may be even harder to apply than one pair of complementary colors, since more colors are more difficult to balance. If you use this type of scheme, you’ll want to choose one of the four to be the dominant color and adjust the saturation/value/etc. of some or all the colors so they work well in different parts of your design like the text and background.
Color Inspiration
In addition to the color combinations found in the color wheel, nature provides endless inspiration for harmonious color schemes. For 25 great palettes pulled from nature photography (as well as others inspired by travel, food & drink, and everyday items).
Colors can also be paired by temperature (warm or cool colors), saturation (vivid colors often look youthful, while faded ones look vintage), mood (bright & fun, dark & serious), theme (location, season, holiday), and other qualities. To explore different color schemes, check out one of the many color-picking tools available online; some will even let you upload an image to generate a color scheme. Some to try include Paletton, Adobe Colour CC (formerly Kuler), and ColorExplorer. If you use Chrome as your browser, you can download the Eye Dropper extension, which lets you identify and pull colors straight from the web.
Looking to different historical periods and art movements for color inspiration can be another great technique. The palettes below demonstrate the warm, light-filled colors common to Impressionist paintings; the vivid, unexpected combinations used by Post-Impressionists; the soft, earthy colors characteristic of the Art Nouveau movement; and the bright, bold hues of Pop Art.
The Psychology of Color
Color is all around us. Whether we realize it or not, it plays a big role in our everyday lives. That orange or yellow traffic sign you saw on the road today? It caught your attention for a reason. That box of cereal you bought at the market even though it was a little more expensive than the others? You might have been drawn to the colors on its packaging. Color even creeps its way into language… why do we say people are “seeing red” when they’re angry or “feeling blue” when they’re sad? Because color has a unique connection to our moods and emotions.
But not everyone thinks about or experiences color in the same way. The meaning and symbolism we associate with different colors are influenced a great deal by the cultural and societal groups we identify with. Let’s take a look at some common meanings associated with basic colors in Western culture:
Color Symbolism
• Red: This color can communicate many different ideas depending on its context. Because red is associated with fire, it can represent warmth — or danger. Since red is also the color of blood, it’s considered an energetic, lively color and is also associated with matters of the heart, and sometimes violence.
Alternate meanings: In some Eastern cultures, red symbolizes good fortune and prosperity and is the color worn by brides on their wedding day. Worldwide, red has been associated with various political movements and has symbolized revolution.
In branding: Red often communicates strength, confidence, and power and is a highly visible color.
• Orange: Also a fiery color, orange combines the warmth of red with the cheerfulness of yellow for a hue that communicates activity, energy, and optimism. It’s also associated with the harvest or autumn season.
Alternate meanings: In India, saffron, a certain yellowish shade of orange, is considered sacred. In Japan, orange is the color that symbolizes love.
In branding: Orange often represents youthfulness and creativity. Gold, which is a type of orange or yellow depending on its hue, is a symbol of luxury or high quality.
• Yellow: As the color of sunshine, yellow often communicates happiness, cheerfulness, friendliness, and the freshness of spring. It can also signal warning or caution in certain contexts. Some variations (especially desaturated and greenish yellows) can look sickly or unpleasant; historically, yellow has sometimes been associated with illness and quarantine.
Alternate meanings: In some Eastern and Asian cultures, yellow is associated with royalty or high rank. In parts of Africa and Latin America, yellow is the traditional color of mourning.
In branding: Pure/bright yellow does a great job of attracting attention, but can be visually disturbing or even hard to see (for instance, white text against a bright yellow background or vice versa) if not used with care.
• Green: This is the color of nature, plant life, and growth. As such, it often communicates health, freshness, or an “all-natural” quality. Dark green can represent wealth (or anything money-related) and stability.
Alternate meanings: Among cultures that practice Islam, green is a sacred color. Green is also associated with Ireland and, by extension, St. Patrick’s Day and lucky four-leaf clovers.
In branding: Brands or product that wants to come across as “green” (in the sense of natural, healthy, sustainable, environmentally friendly, organic, etc.) often use nature-inspired colors like green and brown.
• Blue: The color of the sea and sky, blue often communicates peaceful, clean qualities. As opposed to more energetic, warmer coolers, blue is seen as calming. In some contexts, it can represent sadness or depression.
Alternate meanings: In Middle Eastern cultures, blue has traditionally represented protection against evil. Because of its association with the heavens, blue symbolizes immortality and/or spirituality in many cultures.
In branding: Blue is widely used and one of the most versatile colors. It’s generally used to communicate trustworthiness, security, and stability. Dark or navy blue is a particularly popular choice for corporate contexts, since it’s perceived to have serious, conservative, and professional qualities.
• Purple/Violet: Purple is traditionally associated with royalty, majesty, or honor. It can also have spiritual/mystical or religious connotations.
Alternate meanings: In many cultures around the world, purple represents nobility or wealth; however, in Thailand and parts of South America, the color is associated with mourning.
In branding: Darker shades of purple often still symbolize luxury or opulence, while lighter/brighter shades can come across feminine or childish.
• Black: Like red, black has many (sometimes opposing) meanings. It can represent power, luxury, sophistication, and exclusivity. On the other hand, it can symbolize death, evil, or mystery. In apparel, black generally communicates formality (“black tie” parties) or mourning/sorrow (as the color traditionally worn to funerals).
Alternate meanings: In some Asian and Latin American cultures, black is considered a masculine color. In Egypt, black signifies rebirth. Across many cultures, the color is associated with magic, superstition, or bad luck — or, similarly, the unexplainable or unknown.
In branding: Black is so widely used that’s it’s almost a neutral, though it can still communicate the meanings above depending on context. Many designs are simply black and white, whether that’s a deliberate choice or just to save money on color printing. Colors always look brighter and more intense against black.
• White: As the color of light and snow, white often represents purity, innocence, goodness, or perfection (and is traditionally worn by brides), but it can also come across as stark or sterile.
Alternate meanings: In China, white is the color of mourning. It represents peace across many cultures — a white flag is a universal symbol of truce or surrender.
In branding: White often communicates simplicity or a clean, modern quality. Designers seeking a minimalist aesthetic will frequently use a lot of white.
Color in Design
Adding colors to a design involves a little more than choosing two or three hues and plunking them down in equal parts in your layout. Effectively applying color to a design project has a lot to do with balance — and the more colors you use, the more complicated it is to achieve balance.
An easy way to think of this concept is by splitting your color choices into dominant and accent colors. The dominant color will be the most visible and most frequently used hue in your design, while one or more accent colors will complement and balance out that main color. Paying attention to how these colors interact with each other — the amount (or lack) of contrast, the ease of readability when text is involved, how certain colors make others look when they’re side by side, what kind of mood a color combination creates, etc. — will help you fine-tune a perfect palette for your design purposes.
A common rule of thumb for using a basic, three-color palette in a design is known as the 60-30-10 rule. This approach is often used in interior design, but can also be effectively applied to web or print design projects. You simply make your dominant hue account for 60% the color in the design, while two accent colors use up the remaining 30% and 10%. A good analogy for understanding how this works is picturing a man’s suit: the suit jacket and pants account for 60% of the color in the outfit; the shirt accounts for 30%; and the tie offers a small pop of color at 10% — creating a balanced, polished appearance.
Another way to keep your color palette simple and balanced is using shades and tints (or lighter and darker versions of a chosen hue). That way, you’re able to expand your color choices without overwhelming your design with a rainbow of colors.
Color in Marketing & Branding
Brand recognition is tied strongly to color. Just think of Coca-Cola, Facebook, or Starbucks, and I’ll bet you can immediately name the colors those brands are associated with.
A study from the University of Winnipeg, titled the “Impact of Color on Marketing,” found that people’s initial judgments about products are based largely on color (with about 60 to 90% of the assessment — which takes only 90 seconds — based on color alone.) This means that in design, color is not just an artistic choice, but also an important business decision — affecting everything from consumers’ perceptions about a brand to product sales.
However, when choosing a color scheme for your logo or brand, you don’t have to stick to any traditional, symbolic, or stereotypical methods. There’s no foolproof process or hard-and-fast rules when it comes to color. What’s most important is that the color and how it’s used within a design is a good fit for a brand’s personality and market context. For some inspiration, visit BrandColors, a website that has compiled a visual guide (with hex codes) to the color choices made by recognizable brands from around the world.
RGB vs. CMYK Color Systems
When you’re working on a design project that will need to be printed, your computer monitor can’t accurately display colors as they will look on paper. “What you see” is not “what you get,” because digital monitors/screens and printers use two different color systems: RGB and CMYK. RGB refers to the small dots of red, green, and blue light that combine to form visible colors on a screen; while CMYK stands for the cyan, magenta, yellow, and black ink that printing equipment mixes together to create color prints. Because the RGB color space uses a wider color spectrum than CMYK, it’s worth noting that some designers like to initially create a print project in RGB for more color options, then convert the finished design to CMYK before printing.
Due to these differences, designers need a way to get consistent color results when working with both systems — for instance, if you’re designing a logo to use on your website but also want to get a business card printed. That’s where the Pantone Matching System (or PMS) can help. Colors can be matched for web and print (as well as for different types of printing surfaces) to ensure a uniform appearance. The Pantone system makes it easy for designers, clients, and printers to collaborate and ensure that the final product looks as intended.
Color: Understand it, explore with it and love it!
There are people who specialize in studying things like color theory and the psychology or neuroscience of color — these are complex subjects that land at the intersection of art and science. But that dynamic is part of what makes design so interesting and such an effective tool in the marketplace. Though this guide may only scratch the surface, we hope it helps you make better informed, more effective color choices for your personal or professional projects. Happy designing!
0 Comments