The Chromatic Canvas: Exploring the Fundamentals of Color Theory

Working with color has always been a great pleasure, but it’s not always been easy. In fact, I spent a lot of time in my career just trying to get things right without really understanding the fundamental best practices and true science at play. This write-up seeks to exercise some of the fundamental knowledge I’ve learned along the way.

Why you should learn to work with color

Color theory is the study of combining colors in art and design to create visually pleasing compositions that convey particular moods or emotions to the viewer. When used effectively, color can enhance the aesthetics of a design. Conversely, when used incorrectly, color can create confusion and discordance in a design. For example, using too many colors can overwhelm the viewer and make the design appear chaotic, while using clashing colors that do not complement each other can make the design appear unprofessional or amateurish.

Another common mistake is not considering the cultural connotations of colors. Using colors with negative cultural connotations can be offensive to some viewers and undermine the intended message of the design. Lastly, it is important to consider color blindness, which affects a significant percentage of the population. To accommodate color-blind viewers, designs should be easily understandable in grayscale or with minimal color use. Understanding color theory and using colors intentionally in design can greatly enhance a design’s effectiveness, but designers must avoid common mistakes such as using too many colors, using clashing colors, not considering cultural connotations, and not accommodating color blindness.

The Basics

The first thing to know about color is that all color originates from light. Light is a form of electromagnetic radiation that travels in waves and has different wavelengths. The wavelength of light determines its color. The visible spectrum of light ranges from approximately 400 nanometers (violet) to 700 nanometers (red).

The primary colors of light are red, green, and blue (RGB), and when these colors are combined at full intensity, they create white light. This is known as additive color mixing, where colors are added together to create lighter and brighter colors.

In contrast, when all colors are combined in pigment or ink, the result is black. This is known as subtractive color mixing, where colors are subtracted from white light to create darker and duller colors. The primary colors of pigment are cyan, magenta, and yellow (CMY), and when these colors are combined at full intensity, they create black.

Johannes Itten’s Color Wheel

Johannes Itten, a Swiss artist and teacher, is famous for his contributions to color theory, including his “Color Star” or “Seven-Color Circle” which is a variation of the traditional color wheel. It consists of twelve colors arranged in a circle, divided into primary, secondary, and tertiary colors. Additionally, the colors are divided by temperature and lightness or darkness. Itten’s color wheel provides a framework for understanding the relationships between colors and how they can be combined effectively in art and design. It remains widely used in art and design education today and has influenced many other color theorists and artists.

In its simplest form, you start in the center with the primary colors.

• Red / Blue / Yellow

Working your way outward, mixing any two primary colors you get your secondary colors.

• Purple / Green / Orange

Mixing any one primary and any one local secondary color you make a tertiary color combination.

• Yellow — Green
• Yellow — Orange
• Red — Orange
• Red — Purple
• Blue — Purple
• Blue — Green

Hue, Saturation, & Value

In color theory, there are 3 main properties of a color, defined technically in the CIECAM02 model.

Hue
The degree to which a stimulus can be described as similar to or different from stimuli that are described as red, orange, yellow, green, blue, and violet.

Saturation (Chroma)
Color saturation refers to how vivid, rich, or intense a color is.

Value
Refers to the lightness or darkness of a color. It indicates the quantity of light reflected. When referring to pigments, dark values with black added are called “shades” of the given hue name. Light values with white pigment added are called “tints” of the given hue name.

Saturation Best practices

• Do saturate some colors
• Use saturation to provide focus as a compositional element
• Use saturation to provide distinction
• Use saturation to provide visual direction; orient the viewer where to look and in which direction
• Use saturation for storytelling; allow characters and elements to elevate or retract into a scene
• Do not over-saturate all your colors; unless that is in fact the goal
• Over saturating all your colors will make the image/scene look fake; if your goal is realism, oversaturation will only hurt you
• When an entire image is oversaturated it leaves nowhere for the eye to rest

The Psychology of color

Color psychology is the study of how colors affect mood, emotions, and behaviors. Using the right colors can be useful to evoke certain emotions is part of the job of a good designer. Fundamentally understanding why colors succeed and fail at an emotional level is crucial to composition in any artistic discipline. However, it is important to note that the effects of color on behavior and mood can be subjective and culturally dependent, and that personal experiences and individual preferences can also play a role.

Here are some common associations:

• Blue — peace, trust, loyalty, cold, stability, non-aggressive, sadness
• Red — love, passion, excitement, danger, anger, strength, power
• Yellow — happiness, hopefulness, energy, optimism, intellect
• Orange — excitement, fun, creativity, encouragement, motivation, enthusiasm
• Green — harmony, natural, freshness, jealousy, success, growth, fertility
• Purple — spirituality, royalty, ambition, fantasy, romance, depression, frustration
• Brown — stable, simple, natural, outdoors, resilience, dependability
• Black — elegance, formality, mystery, power, death, emptiness
• White — Purity, innocence, cleanliness, modernity, clarity, calmness

Tint, Tone, & Shade

Tint is created by adding white to a color, making a color lighter.
Tone is created by adding gray to a color, making a color duller.
Shade is created by adding black to a color, making a color darker.

Application of Color Theory

Monochromatic

Sometimes when working with color you won’t need or want to provide a strong contrast between visual elements. Using monochromatic color palettes will provide a more general sense of unity and harmony across your composition.

To that point, it’s important to note monochromatic palettes make a poor choice for comparing data, as the differentiation becomes less apparent and there is no color available to provide a unique focus. See below.

• Containing or using only one color
• Best for single subjects
• Forces viewers to focus on the details and differences between shades.
• Can create striking atmospheric effects.

Analogous

Analogous colors work very well for UI design, theme design, and scene effects because they create a sense of unified design with accent colors that provide guidance and focus.

Interestingly enough they are also very useful for data as they provide a great way to show range, density, and depth. Heat maps, weather reports, and elevation charts are great examples of this.

• Colors are adjacent on the wheel
• Pleasing to the eye
• Peaceful and comfortable emotions
• Seen commonly in nature

Complementary

A complementary color scheme is one using colors that sit directly across from each other on the color wheel. Oftentimes companies implement contrasting colors to provide focus and attention to their brand. This allows for maximum recognizability and readability, the latter of which is especially important for web and user interface accessibility.

With that said, contrasting colors have the potential to both work for and against your best efforts. Complementary colors, are often color choices you don’t want to employ for text as it becomes very hard to read due to chromostereopsis(where colors seem to almost vibrate off each other). Furthermore, those same contrasting colors do work very well for comparing data as the sets are clearly distinct and easy to read. See below.

• Opposing colors on the color wheel
• Very popular
• Easy on the eyes
• Use one color predominantly; not 50/50 balance of each
• Generally, one color is reserved for accents / splashes

Split-Complementary

Split-complementary is a color scheme using one base color and two secondary colors. Instead of using two complementary colors, one color is split symmetrically, see below. The base color is mainly used, while the secondary colors are generally used only for highlights and accents.

Split complementary colors are great for adding more range to the colors you are trying to use. Many times you will find yourself looking to use 3 or more colors on a project, so I find it’s best to use this color palette as a way to harmoniously expand your color options.

Split-complimentary palettes are useful for interior design, painting, brand design, presentation design, data, and so much more. You actually find these palettes occurring very naturally. Take a look around :D

• Opposing colors on the color wheel; split one end
• Very popular
• Allows for more creative freedom
• Feels more vibrant / joyous

Triadic

A triadic color scheme, is a unique variant of the split complementary color scheme, with an equal distance between all colors. All three colors are distributed evenly around the color wheel, causing there to be no clear superiority of one color. For this reason, it’s not always the best choice when visualizing data sets, because there is no clear point of focus.

The scheme is always vibrant and colorful, designers should use it and balance it very carefully to maintain the desired effects and color meaning. Triadic color harmonies tend to be quite enthusiastic, even if you use pale or unsaturated versions of your colors.

Just like with traditional split complementary colors, a good rule of thumb when working with triadic palettes is to let one color dominate and use the two others for accents and highlights.

• Colors are equidistant on the color wheel
• Hard to pull off
• Not generally seen in nature
• Best for surreal / cartoons

Double Complementary (Tetradic / Rectangular)

Double-complementary is a color scheme using two pairs of complementary colors as a 4 color palette. These are some of the most difficult palettes to master.

This color scheme is the richest of all available color schemes. This gives you the most variety when working with color. It opens up some fun and creative options for you, but it is also difficult to pull off correctly. Without the right proportions, the results can be disastrous.

• Two pairs of opposing colors on the color wheel
• Hard, but pleasing when done right
• Best used for foregrounds(1 pair) and backgrounds(the other pair)
• Use two colors predominantly; not an equal amount of each 25%
• Generally two colors are reserved for accents / splashes

Quick tips

• Rectangular color schemes work best when you choose one of the four colors to be a dominant color.
• Use the other three as accent colors. Otherwise, your project may appear too busy and unbalanced. This simply means avoiding using all four colors in equal portions.
• Another way to make your results look less wonky is to dilute some of the colors. Using two shades or tints in the mix will greatly soften your final project.
• Lastly, another trick for making rectangular color schemes pleasing to the eye is to balance them with a neutral background.

This isn’t a color scheme I use very often in interface design, frankly, I’m not sure if I’ve ever used it in a professional setting. I tend to reserve such an expansive palette for illustrations, fine arts, and conceptual pieces.

With that said, let’s take a look at some examples.

Interestingly enough, some well-known brands, like Microsoft, Google, Slack, Ebay, and ZOHO, all use a tetradic approach for their brand yet not all of them use their colors in equal parts.

Tetradic color palettes are very easy to recognize in the real world; we take their diversity for granted. Some examples of this would be the beauty of fall, a sunset, or even the colors of tropical birds. Color is all around us, we just have to stop and take a look every once in a while.

Conclusion

In conclusion, color theory plays a vital role in various fields, including art, design, marketing, and psychology. Understanding the principles of color theory can enhance the effectiveness of visual compositions, evoke emotions and moods, and influence human behavior. Color is a powerful tool that can communicate messages and create meaningful experiences for individuals. However, it is essential to consider cultural contexts, accessibility, and personal preferences when using color in design and communication. By embracing the principles of color theory, designers and artists can create visually appealing and impactful works that resonate with their intended audiences.

:D