Chromatic interaction has to do with the way we perceive color and the effects that occur when different colors interact. One common tool to help organize and understand color relationships is the color wheel. A color wheel helps to show the differences in hue and saturation among a variety of hues. The primary colors that all other colors can be created from in the system of light are red, yellow, and blue. The color wheel shows these primary hues and some of the main color combinations that can occur from mixing them. When it comes to these hues on the color wheel, blue has the darkest value, while yellow has the lightest value. It’s important to know that color relationships can only occur when two or more colors are interacting together. This doesn’t apply when only one color is used in varying degrees of value and intensity in a composition.
Colors on the color wheel that are close together have similar wavelengths, so they are perceived more similarily and create a harmonious feel when used together. For example: red and orange, orange and yellow, yellow and green, green and blue, blue and purple, purple and red. These are considered to be analogous color combinations. Complementary colors are those that are opposite on the color wheel. For example: red and green, yellow and purple, and blue and orange. These color combinations have the highest amount of contrast. Complementary colors can be used successfully in a composition to create a point of interest and aid in visual hierarchy. Triadic color combinations occur when three colors are 120 degrees away from each other on the color wheel. These color combinations are more highly contrasting than analogous colors but less contrasting than complementary colors. These are good combinations to add interest without being too in your face.
Value can be used within a composition to create contrast, movement, and depth. Value takes a hue from the lightest possible to the darkest possible version and reflects nature. We perceive in the real world that light comes from above and darkness is below. We can see this with the sun and ceiling lights being overhead. The way the light comes down from above creates shade from different angles. We also perceive that light is closer to us and darkness is farther away. This is also a reflection of the fact that things that are closer to us are easier to see and understand, and the farther away something is from you, the harder it is to see the details. With these relationships exhisting in nature, this is also what we will naturally perceive within a composition. You can, however, play with these relationships and alter the expectations of the viewer as long as you do it effectively.
Temperature relationships among colors are based on nature and have an effect on the depth, mood, feelings, and atmosphere within a design. In the real world, the sky is blue. Because of this, water also appears blue because it is a reflection of the sky. Blue is considered a cool color because the elements that contain it in nature are considered to reflect a cool, crisp, refreshing nature. Colors that are closest to blue, blue-green, indigo, and violet are also cool colors because of the close association with blue. On the opposite end of the spectrum, the sun represents warm colors. Warm colors include magenta, red, orange, yellow, and yellow-green. Warm colors represent heat, passion, and food. Warm colors appear to pop out more than cool colors and appear in the foreground. This is because warmer colors tend to be brighter and more saturated than cool colors. Brown can be either cool or warm because it is a combination of multiple colors at once.
Depth and heirarchy within a composition can be created using various color combinations. When there is a white field in a composition, cool colors appear to recede and warm colors advance. More saturated hues and hues of darker values also appear to advance. When there is a black field in a composition, hues of lighter values advance. When the field of the composition is a color, the relationships change. The greater the difference of contrast between value, saturation, and temperature among colors, the greater the distinction between elements is for viewers.
Overall, it’s important to consider color relationships within a composition and how they will affect your message to the viewer. It is critical to create a plan for what colors you will use in a design and the reason you want to use them. Consider the natural color relationships that occur in nature, but also when it is appropriate to subvert the viewer’s expectations of how these colors function.
1.) Complementary Colors
(Photo screenshotted from my Instagram. I do not own this material and am using it for informational purposes only.)
This advertisement for Nintendo uses complementary colors in the headline to draw you in. In the word “GLOVE,” which is the largest word in the composition, there is a distinctive wavy orange shape on top of a blue background. Blue and orange are complementary colors, so this combination stands out and catches your eye right away.
2.) Analogous Colors
(Photo screenshotted from my Instagram. I do not own this material and am using it for informational purposes only.)
This advertisement from McDonalds uses a mostly analogous color scheme to tie in with their branding and create a sense of unity. McDonald’s colors are red and yellow, which are reflecting in this composition with the use of red, orange, and yellow at different values. The brown is also warmer and is closely related to the red. The only color that stands out is the green lettuse and the silver nozzle.
3.) Value Relationships
(Photo screenshotted from my Instagram. I do not own this material and am using it for informational purposes only.)
This advertisement from Absolut Vodka uses different colors with different values to place emphasis on certain parts of the composition. Because a black background is used, the colors with lighter values stand out more than the colors with darker values. Yellow has the lightest value, so this is used behind the brand name, emphasizing it the most. Red and green are the second colors noticed because they have the second lightest values. The colors then fade from blue
to purple. Because of the way the colors are placed with each other, it creates a sense of rhythm, movement, and fading from the background to the foreground and then back again.
4.) Saturation Relationships
(Photo screenshotted from my Instagram. I do not own this material and am using it for informational purposes only.)
This Dior advertisement uses saturation to create a sense of depth and emphasis within the composition. The less saturated color recedes to the background, while the highly saturated gold color pops out to the foreground. Her skin tone is more saturated than the background but less saturated than the foreground, so it appears in the middle.
5.) Temperature Relationships
(Photo screenshotted from my Instagram. I do not own this material and am using it for informational purposes only.)
This magazine cover uses temperature relationships to create a mood as well as establishing depth. The photo emphasizes this perfectly, with the cool blue ocean in the background gradually becoming a little warmer as it approaches the warm landscape. The title, “HAWAII,” is a very warm orange, contrasting with the cool water and giving a mood of a warm sunny vacation. The teal circle behind the words, “20+ PLACES TO DISCOVER ON MAUI,” is a cooler color that contrasts well against the land.