When we think about the meaning of color, we sometimes think only of what one particular hue communicates. Red is impulsive, blue is calm, purple is luxurious. While individual colors do communicate certain feelings, thinking about them in combination can communicate more.
Last week I talked about how we describe color in terms of hue, saturation, and lightness. Today I want to consider how we might combine these characteristics and what the relationships suggest and convey. Instead of looking at colors in isolation let’s consider different aspects of color that expand on the descriptions of hue, saturation, and lightness.
What is Meant by Aspects of Color?
The term “aspects of color’ was unknown to me prior to reading Design Elements: Color Fundamentals. It refers to combinations of hues, saturation, and lightness values that provoke a certain response or have predictable characteristics.
For example a color palette that only uses bright colors leads to colors that are always in competition, which can become overwhelming. A palette that includes bright colors should be paired with paler colors for balance.
In thinking about color combinations instead of colors in isolation, we’re on our way toward developing more successful color palettes for projects. The choice of which aspects of color dominate a palette should come from the specifics of the project, but an understanding of these aspects can make for a helpful starting point in choosing that palette.
Let’s consider the following aspects of color.
- Light and dark
- Pale and bright
- Hot and cold
Again these aspects aren’t about color in isolation, but rather the relationships between certain pairings and groupings of colors and their descriptive properties.
Light and Dark
Lighter and darker colors naturally come about from different values of lightness. Light colors have more white (above 50% lightness) and dark colors have more black (below 50% lightness). As 2 colors become lighter the contrast between them decreases. Similarly as 2 colors become darker the contrast between them also decreases.
In thinking about color combinations instead of colors in isolation, we’re on our way toward developing more successful color palettes
Because contrast is important we need to balance lighter and darker colors with each other or with brighter or more saturated colors. The lightness of the environment also plays a role. In a well lit room it might be easier to read dark text on a light background and vice versa. Consider the conditions your design will be viewed under and think about matching the lightness or darkness of your background colors with the lightness or darkness of the environment.
Lighter colors are paler and can even appear transparent at times. They tend to be associated with more positive feelings, at least in western cultures. Darker colors add drama and mood to a composition and at times can be used as neutrals. They tend to be associated with more negatives in western cultures.
Either light or dark colors can be used as accent colors or background colors, though not at the same time. Light backgrounds would be balanced with darker or saturated accent colors and dark backgrounds would be balanced with light or saturated accent colors.
Bright and Pale
Bright colors are based on saturation. Brighter colors are more saturated and are a purer form of a given hue. The purest colors have no black, white, or gray added and are instead all hue.
Bright colors are good at attracting attention. Because of this, they are often used to highlight products or other important information. However, too many bright colors in a palette can be irritating and annoying as they all compete for attention. The competition for attention can lead to a reduced ability to comprehend what’s being communicated.
Paler colors are hues with more than 65% white added. We refer to them as pastels and like many colors they may have specific cultural associations. They’re gentle and approachable and sometimes thought of as feminine or even childlike. They tend to be associated with weddings and newborns.
Paler colors make for excellent accents even against white backgrounds as they can be used to highlight subtle color relationships.
As with light and dark, think balance. You likely wouldn’t use an all bright or all pale color palette. More likely one of the two would dominate and be paired with another aspect of color to provide balance and contrast.
Hot and Cold
Warm colors are based on red. They advance into the foreground, especially when paired against a cool color and they’re seen as more dynamic and active. Cool colors are based on blue. They recede into the background, especially against a warm color and they’re seen as dependable and calming.
You can make a cool color warmer by adding red to it and conversely you can make a warm color cooler by adding blue to it.
Because warm and cool colors can appear warmer or cooler based on the colors they’re set against, you can enhance the message of an element by setting it against a color that enhances the temperature of the initial color. For example to make a product warmer and richer you can place it against a cooler color. To make an element seem more trustworthy you can place it against a warmer color.
Hot colors are warm and bright. They make a statement and can give energy to a composition. Because they add energy and convey excitement they can be useful for product promotions. Cold colors are cool colors based on the primary blue. The closer to the primary blue, the colder they appear.
The effectiveness of secondary colors can often depend on how warm or cool they are. A small amount of warm on a cool background will work best given the advancing and receding properties of each. However, a cool color on a warm background can attract attention and create tension.
Neutral colors are those those that have a large percentage of brown or gray. They make for good all-purpose tones of color, but are often overlooked and are an underutilized category of color.
They tend to be free from cultural interpretation and other distractions. Hence, the neutral description. Because of this they can make it easier for visitors to navigate through content.
Neutrals can work well when a project is aimed at a sophisticated audience or where the content is trying to communicate feelings of calm and peacefulness. They work well as secondary or background colors with brighter, more intense, and more saturated colors used as accents.
Choosing a color palette has to be based on the specifics of the project and perhaps a little bit of trial and error. However a large amount of color choices can come from rational decisions such as contrasting a dark color against a light color to help differentiate them.
The aspects of color in this post are about different pairings or groupings of different characteristics of color and they can be used to help with those rational decisions as we begin building a color palette. They tend to generate predictable responses and we can match these responses to the concept of our design.
Once you know the message you’re trying to convey, you can seek light, dark, bright, pale, hot, cold, or neutral color combinations that help support your message and complement the aspects of color you use.
Download a free sample from my book, Design Fundamentals.
When I first began trying to learn about web design, almost everything I was able to find information about color online pertains to color theory. Usage of color is so much more than that.
This post has given me alot more to think about when trying to choose color combinations for my next project. I’ll likely pick up the book you mentioned to get more information on color as well.
I know what you mean. I think I’m starting to figure out a few things, but I have a long way to go still.
I enjoyed the color fundamentals books. It’s a basic beginner’s book on color, but it did cover a few things in different ways from what I’d seen before. I’d definitely recommend it.
Coming from a technical development background, I’m trying to get some clues about UI design. Your article gives very interesting insights on how to build a color palette and make informed choices.