It probably goes without saying, but what colors you select and how you apply them can be one of the biggest factors in how viewers perceive a design and in the overall vibe or mood. It can help draw the eye and give visual importance. It can convey meanings, both subtle and specific. It can communicate identity. So it’s a good idea to think about color carefully and deeply.
The study of color and its application is called color theory, and it’s a big subject, far bigger than we can cover here. This chapter aims to give you a solid foundation in the basics of color, along with some concrete strategies for your designs. Much of the information here is simplified and doesn’t tell the whole story of color.
How Color Works
Color is a property of light. Light travels in a wave; and the frequency, or speed, of the wave determines the color. Red is made of the longest, slowest waves, and violet is made of the shortest, fastest waves. All the other visible colors fall somewhere in between, in a continuous spectrum, fading from one color to the next based on the frequency of the light wave.
More important for our purposes than the physics of how light works is the factors we can practically control when choosing colors. There are three axes to consider:
Hue
Hue is probably what you think of first when considering colors. It refers to what color it is on the spectrum. Is it red or orange or yellow? On many color pickers, this is represented by a slider showing a full color spectrum.
Saturation
When we apply any color, we can use a lot of that particular hue or just a little of it. This is saturation: the intensity or purity of a color. With high saturation, we have a very pure color, and with low saturation, we have a color that is mostly gray with just a hint of the hue. On many color pickers, saturation is the horizontal axis in the color square.
Lightness
Lightness is just what the name says, how light or dark the color is. This is sometimes referred to as shade or luminosity. As the color gets brighter, it moves closer to white, and as it gets darker, it moves closer to black. In many color pickers, lightness is controlled by the vertical axis in the color square.
The Color Wheel
Because of the way the human brain perceives them, the spectrum of visible hues can be visualized as a color wheel, which can be very helpful in understanding and exploring the ways that different colors relate to each other. And understanding those relationships can help us to choose palettes of colors that are harmonious, meaning they look great together.
Primary and Secondary Colors
The colors blue, red, and yellow are commonly referred to as primary colors. These particular hues tend to be thought of as strong, direct, and pure. (It’s no coincidence that these are the colors of Superman’s costume.) Notice that the primary colors are equally spaced around the color wheel, forming an equilateral triangle. This forms a triadic color harmony, which we’ll discuss more in a moment.
The colors green, orange, and purple are commonly called secondary colors, which form a triangle halfway in between the primary colors. ****These hues are often thought of as quirky, uneasy, or peculiar. (Think of the colors of Halloween or of comic book villains like Thanos or the Green Goblin.)
Color Schemes
Using the color wheel, you can derive harmonious color schemes by exploring how the different hues are spaced around the wheel. This is a reliable and relatively easy way to select the basic hues you will use in your designs. And once you have the hues, you can use different lightness and saturation amounts of each to broaden your palette.
It’s important to note that while the traditional color wheel shown above is best for visualizing the primary and secondary colors, I recommend the use of an RGB color wheel for exploring the different color harmonies discussed in this section.
Non-Colors
In addition to the spectrum of hues shown on the color wheel, designers also have access to the non-colors of black, white, and shades of gray. These are considered non-colors because they all have zero-percent saturation of any hue.
Because non-colors have no hue at all, they can generally work in combination with any color and any color scheme. So as you read about and explore the color schemes listed below, remember that they can all be used in combination with these non-colors.
Monochromatic Color
The simplest of all color schemes is monochromatic, meaning only a single hue is used, though many variations in lightness and saturation can be used to provide flexibility and variety. The idea behind this color scheme is simple: A hue always works great with itself.
Complimentary Colors
Complementary colors refer to any two hues that are directly opposite each other across the color wheel. Complimentary colors reliably work very well together and create a strong sense of dynamism.
Split-Complimentary Colors
To achieve a split-complimentary scheme, you take a pair of complimentary hues and replace one of the pair with the two hues that sit to either side of it on the color wheel. These color schemes tend to have much of the dynamism of complimentary colors but more versatility by providing three hues rather than just two.
Analogous Colors
Analogous colors are any three hues that sit side-by-side on the color wheel. It’s common to use the central of the three colors as the dominant color in the palette and the other two as accents. These color schemes tend to feel very cohesive and unified.
Triadic Colors
Like the groupings of the primary colors and the secondary colors, selecting three equally spaced hues around the color wheel yields a triadic color scheme. Triadic color schemes tend to feel quite vibrant and energetic.
Tetradic Colors
Similar to triadic color scheme, the tetradic color scheme is achieved by selecting four equally spaced hues around the color wheel, forming a square. Tetradic colors tend to have a sense of balance and evenness. A great way to use tetradic colors is to pick one as the dominant color and use the others as accents.
Color Meanings
Beyond the simple question of which colors look good together, it’s important to remember that many colors have specific meanings in the minds of viewers. In some cases, you can take advantage of these associations to help build a strong message. For instance, many companies that want to project an image of environmental stewardship make strong use of green for its connection to plants and nature. In other cases, being aware of color meanings helps you to know what to avoid, like how a design for a medical facility might want to avoid using red for its association with blood.
Some color associations are cultural, like the American association of green with money. The tricky thing about these is that cultural associations differ from place to place and culture to culture. There’s no single definitive list of cultural associations around the world, so if you are designing for a place or culture with which you aren’t extremely familiar, it’s a very good idea to do some research into what your color choices might communicate to that specific audience.
Other color associations are part of the evolving language of digital media itself. For instance, on the web and in applications, we are very used to seeing red to indicate an error or to signify a destructive action like deletion. This doesn’t mean that red can’t be used in other contexts, but it’s important to carefully consider how, where, and why you make use of that color.
The key with color meanings is to be as aware as possible of them and take them into account as you design. And because we all have limited experience and knowledge, it’s also important to get feedback from other people, especially those in your known audience, to see if anyone has a color association that you didn’t originally predict.
Further Strategies for Choosing Colors
As well as using color harmonies or choosing colors based on their meanings, here are several other strategies that can help you choose a palette of colors.
Use Only One Color (Plus Black, White, and Grays)
When you aren’t very confident in combining and balancing different colors, it’s easy to get overwhelmed, so here’s a can’t-lose strategy: Just pick one hue. This may seem very limiting, but consider that by creating variants of saturation and lightness, you can still have many different shades to work with.
And because they aren’t colors, black, white, and all shades of gray will always work with any color you choose. A palette made up of these non-colors and multiple shades of a single accent color can be very flexible and very effective.
Pick Colors from an Image
Oftentimes, designers have a very specific feeling or vibe they want to achieve for a product. You might say “I want it to feel like a beach” or “I want it to feel like a summer’s day”. An easy way to capture that feeling is to take your color palette directly from an image of the thing you have in mind. A simple process for doing so might go something like this:
- Spend some time searching for images online to match the feeling you want to achieve. Depending on the subject, these might be photographs, works of art, or even vintage graphic design. Pick a small handful of images that seem to best capture the vibe.
- Bring those images into your design software (or a purpose-made tool like Coolors Image Picker)
- Notice the major areas of color in the image. For instance, in a beach image there might be blue water, yellow sand, and some green trees.
- With your color picker tool, grab a point from each color area. Experiment with picking the color from different points, even within a small area.
This technique can be extremely effective. If you find an image that feels right, chances are the colors it contains might work for your project.
Tips for Applying Colors
Once you have a color palette selected, it can still be difficult to know exactly how to apply those colors. Here are a handful of tips to help you achieve the best results:
Contrast is Key
- Importance for readability
- The difference in lightness is what matters
- color blindness
- vibrating color
- contrast checkers
- checking in black and white
Use High-Saturation Colors Sparingly
Beginning designers often make the mistake of choosing bright, high-saturation colors and using them for large portions of a design. High-saturation colors are rare in nature and can be harsh and tiring for the eye. By reducing the saturation and lightness of a color, sometimes even just a little bit, your designs will be much more pleasant and natural.
Multiple Shades of Each Color
When choosing which colors to work with, you are often focused mostly on what hue to use. But once you have the hues selected, it’s a good idea to provide yourself with between three and ten shades (variations in saturation and lightness) of each hue, ranging from light to dark. (This also applies to shades of gray.)
Having multiple shades of each hue gives you the ability to make use of a color in varying degrees of subtlety or intensity. It also helps with ensuring adequate contrast because in different contexts you can choose to use whichever shade works best rather than being limited to just one. This makes a huge difference in the quality of a design.
Grays versus Colors
When you have text or other content on top of a colored background, pure gray can look unnatural, like it just doesn’t quite fit. This makes sense when you consider that few things in nature are purely without color and that real objects would reflect a bit of their color onto any nearby surface.
To address this, an easy solution is to add just a bit of the background hue to your gray shades. This helps to unify the colors and make them really feel like they go together.
Another related trick is that even in a composition with little or no color, you can add just a hint of a single hue to all of your grays to make them feel a little less default and give them a bit of vibe. For instance, you could add just a bit of blue to your grays to make them feel slightly cool and gentle.