Transcribed Notes:
Learning Goals
Master the Color Wheel: Master the DNA of color: Hue, Saturation, and Value.
Apply Color Schemes: Learn to apply color schemes such as Monochromatic, Analogous, and Complementary to drive action.
Understand Emotional Impact: Understand how color influences and sets the temperature of a design.
Color as Emotion
The Concept: Color is the first thing a viewer’s brain processes, even before they see the shapes or read the text. It sets the temperature of the design.
Color is Physiological: Color can literally raise a person’s heart rate. For example, seeing the color red can raise it and seeing the color blue and lower it.
The Dot Secret: In design, we don’t pick colors because they are pretty. We pick colors based on their emotional impact.
The Color Wheel
The Concept: The color wheel is the GPS ‘of design. It show us how colors relate to one another.
- Primary Colors: Red, Yellow, and Blue (Can’t be made by mixing other colors)
- Secondary Colors: Orange, Green, Violet (Made by mixing primary colors)
- Tertiary Colors: The “in-between’ colors like Blue-Green or Red-Orange.
Hue, Saturation, and Value
The Concept: Every color has three coordinates that define it.
- Hue: The name of the color (e.g Blue)
- Saturation (Chroma): How “intense” the color is.
- Value: How light or dark a color is also known as shades and tints.
Color Temperature (Warm vs. Cool)
The Concept: We divide the wheel into two climates: Warm and Cool.
Warm Colors: Red, orange, and yellow. They feel energetic, cozy, or aggressive.
Cool Colors: Blue, green, and purple. They feel calm, professional, and distant.
The Dot Secret: Use warm colors for your Call to Action buttons to make them stand out.
Monochromatic Schemes
The Concept: Using only one hue, but varying the value and saturation.
Why use it: It creates a very clean, organized, and polished look.
The downside: It can appear boring if there isn’t enough contrast between tints and shades.
Analogous Schemes
The Concept: Using colors that right next to each other on the color wheel. (e.g. yellow, Yellow-orange, and orange)
Why use it: These are found often in nature. They feel harmonious and easy on the eyes.
The Goal: Use this when you want the design to feel peaceful and unified.
The Dot Secret: Use different tints and shades to create more depth.
Complementary Schemes
The Concept: Using colors that sit directly opposite each other on the color wheel. (e.g. Blue and Orange, or Red and Green)
Why use it: It creates high contrast and high energy. Since they are opposites they make each other look brighter.
The Warning: Don’t use them for text! Putting bright read test on a bright green background causes color vibration that hurts the eyes.
The Power of Neutrals
The Concept: Neutrals include Black, white, grey, and sometimes tan/beige. Neutrals act as the ground for your colors. They give the eye a place to rest.
The 60-30-10 Rule:
60% Neutral
30% Secondary Color
10% “Accent” Color
Color Psychology
The Concept: In Western culture, colors carry meanings.
Red: Danger, Love, Hunger
Blue: Trust, Security, Technology
Green: Nature, Wealth, Growth
Yellow: Happiness, Attention, Discount
Research! Colors can have different meanings in different cultures.
Contrast and legibility
The Concept: Colors most important job is to make things readable.
Value Contrast: The difference in lightness/darkness between the background and the foreground.
The Test: If your turn your design to grayscale and you can’t read the text, your color contrast is too low.