Understanding Color & Color Theory

At its core, Color is perception. When our eyes observe an object, they send information to our brain, which then interprets this data as a specific color.

Color theory is the combination of art and science when using colors. It delves into how humans perceive color both physically and psychologically, as well as how to mix, match, and contrast colors.

Additionally, it considers the messages conveyed by different colors.
On a practical level, color theory provides guidelines on how to reproduce specific colors across various media, such as printing, computers, art, etc.
Basically, color theory offers best practices for selecting colors to create harmonious designs and effective color combinations for the human eye.
Color is important because it's everywhere! You'll find it in street signs, supermarkets, and stores. People use color in photography, paintings, product design, fashion design, website or mobile apps design, interior design, etc. There is no limit!

1. Color Models

We've talked about this before in Section 1, but let's get a little deeper.

RGB Model

TVs, projectors, and electronic screens utilize the RGB model with red, green, and blue as primary colors. Unlike the RYB (red, yellow, blue) model, which mixes pigments, the RGB model mixes light to produce other colors. This makes RGB an additive color model, as it starts with black and combines varying intensities of red, green, and blue light sources. The more light added, the brighter the resulting color. Mixing all three colors of light in equal amounts gives pure white light.

CMYK Model

Any color seen on a physical printed surface uses the CMYK color model, which differs from RGB as it is a subtractive color model. Colors are created by subtracting light from paper by applying pigmented ink to a white surface. CMYK uses cyan, magenta, yellow, and black as primary colors, allowing printers to produce a broader range of colors on paper.

While CMYK is ideal for printed materials, using it for digital displays would result in incorrect colors online or on websites. So it's important to know when to switch between the two models.

RYB Model

This is the color model most people learn as children when mixing finger paints in school. Known today as "traditional" color theory, it is still used by artists and designers for mixing paints and creating color palettes. The primary colors in this model are red, yellow, and blue.

This model is also based on subtractive color mixing, meaning it starts with the white of a canvas or paper. By adding pigment (such as paint, crayon, or marker), the light reflected by the paper is subtracted. Remember, white is a blend of all other colors.

2. Color Wheel Theory

The color wheel organizes colors into three primary colors, three secondary colors, and six tertiary colors (or intermediate colors) into a gradient wheel, showing their relation to one another in an easy-to-understand visual model.

Primary colors are the three basic colors that cannot be created by mixing other colors. These are red, yellow, and blue.

Secondary colors are formed by mixing two primary colors. They are:

• Red + Blue = Purple;
• Red + Yellow = Orange;
• Blue + Yellow = Green.

Tertiary colors result from combining a primary color with a secondary color. There are six tertiary colors:

• Red + Purple = Magenta;
• Red + Orange = Vermillion;
• Blue + Purple = Violet;
• Blue + Green = Teal;
• Yellow + Orange = Amber;
• Yellow + Green = Chartreuse.

These twelve colors form the core palette in color theory. However, each of these basic colors has many variations, providing a vast spectrum of colors to work with. These variations can be thought of as the different properties or elements of a color.

3. Hue, Value, Chroma, and More

• Hue: hue is the purest form of a color and refers to its position on the color wheel, representing the color family like red, blue, or green;
• Value: value indicates the lightness or darkness of a color, influenced by adding shades (black), tints (white), or tones (gray) to alter its purity and appearance;
• Chroma: chroma describes the intensity or saturation of a color, determining how vibrant or muted it appears.

Understanding these concepts is crucial in color theory as we often work with colors mixed with neutrals (black, white, and gray) in practical applications.

• Shade: adding black to a hue creates a shade, resulting in a darker version of the original color, such as mixing black with red to create burgundy;
• Tint: opposite to the shade, adding white to a hue produces a tint, making the color lighter;
• Tone: introducing gray to a hue creates a tone, darkening the color while making it less intense and more muted. Sometimes referred to as saturation;

To keep it simple:

• Shade = Pure color + Black;
• Tint = Pure color + White;
• Tone = Pure color + Gray.

4. Color Temperature

You can divide the color wheel into warm and cool colors by drawing a straight line through its center.

Generally, reds, yellows, and oranges are warm colors, while blues, greens, and purples are cool colors. However, it's not always straightforward, as individual colors can have warm or cool undertones.

For instance, there are cool shades of red and warm shades of green. Color temperature is significant because our brains perceive it subconsciously. Whether you're creating artwork, decorating a room, or designing a logo, consider how color temperature affects emotions and perceptions.

5. Color Harmony/Relationship

Color harmonies refer to arrangements of colors that are visually pleasing and create a sense of unity. They make a color scheme effective and appealing. It’s crucial in color theory because colors interact with each other within a given context, influencing the overall perception.

When a color scheme lacks harmony, it can become either dull or chaotic as it can lead to overstimulation, making the design uncomfortable to look at, or it can result in a monotonous experience, causing the viewer to lose interest. Achieving color harmony involves finding a balance between these extremes. You'd want the viewer to enjoy the design, the picture, or any artwork.

It's also important for user experience (when designing mobile apps for example) and accessibility.

For instance, certain color harmonies and contrast levels are more readable and user-friendly, particularly for individuals with color blindness. So, ensuring enough contrast helps make designs accessible and enjoyable for everyone. Here are the main color harmonies:

Monochromatic

A monochromatic color scheme involves using variations of a single hue, including its shades and tints. This approach ensures a uniform and polished appearance, making it easy to execute without errors.

Complementary

In a complementary color scheme, two colors from opposite sides of the color wheel, like red and green, are used. This creates high contrast, making designs stand out and easy to read, which is why many logos use this scheme.

Split-Complementary

A split-complementary scheme involves one main color and the two adjacent colors to its complementary color on the color wheel. In other words, to choose the second and third colors in a split-complementary scheme, find the color directly opposite your first color on the color wheel (that's its complement) and then choose the two colors that are located next to (i.e., either side of) that color. This offers more nuance than a simple complementary scheme while maintaining significant contrast, but balancing this scheme can be challenging.

Analogous

An analogous color scheme uses colors that are next to each other on the color wheel, such as red, orange, and yellow. Utilizing the 60-30-10 rule helps maintain balance: 60% dominant color, 30% supporting color, and 10% accent color. This scheme is visually pleasing and effective for web design, with the accent color drawing attention to key elements like "Buy Now" buttons.

Triadic

Triadic color schemes, also known as the triangular scheme, feature three colors evenly spaced around the color wheel. Experienced designers might use one dominant color and softer tints of the other two to avoid overwhelming the viewer.

Square

The square color scheme uses four equidistant colors on the color wheel, forming two complementary pairs. This offers substantial contrast and versatility. To avoid overwhelming the design, it's best to use one dominant color with the others serving as support and accents.

Tetradic

The tetradic color scheme, also known as the rectangular scheme, is similar to the square scheme but features hues that are closer together on the color wheel, forming natural pairs.

Application of Color Theory

• Art and Design: artists and designers use color theory to create aesthetically pleasing works and convey specific moods or messages;
• Marketing and Branding: colors are used strategically in branding to evoke specific emotions and influence consumer behavior;
• Interior Design: color theory helps in choosing color schemes that create desired atmospheres in different spaces.

Key Resources for Further Learning

• Adobe Color is a tool for creating color schemes based on color theory. It's a great color palette generator. You can also extract the colors of a photo if you want to. You can find it via the Link;
• Coolors is a great color palette generator too. Find it via the Link;
• HueSnap is also a free tool for picking colors and generating color palettes. Use it to extract colors from existing images or to create new color schemes from scratch. Here is the Link;
• If you love reading books, then there is a book called "The Interaction of Color" by Josef Albers, which is a foundational book on color theory.

I know that we talked about a lot of stuff and it can get overwhelming but rest assured. With practice, you're going to get used to colors and you'll be able to apply the color theory subconsciously in your work. The eyes are considered a muscle. Just as we train our bodies in gyms to get stronger, watching other people's artwork, designs, or pictures, will train your eyes to be more familiar with color harmony, and will allow you to make better color combinations.

Here's a summary and a quick reference guide for what we talked about so far, and you're going to find some meanings of the colors in the embedded image in order to understand how colors are perceived differently by audiences around the world.