Module 05: Color Theory — Design & Code Foundations

01

The Color Wheel

Understanding the color wheel is fundamental to creating harmonious color schemes.

Red, Yellow, Blue (RYB) - traditional artist primaries

Primary Colors

Primary colors cannot be created by mixing other colors. In traditional color theory: Red, Yellow, Blue. In digital (RGB): Red, Green, Blue.

Key point: RYB for paint/print, RGB for screens

Orange, Green, Violet - mixing two primaries

Secondary Colors

Secondary colors are created by mixing two primary colors. Red + Yellow = Orange. Yellow + Blue = Green. Blue + Red = Violet.

Key point: Secondary colors sit between primaries on the wheel

Red-orange, yellow-orange, yellow-green, blue-green, blue-violet, red-violet

Tertiary Colors

Tertiary colors mix a primary with an adjacent secondary. This creates the full 12-color wheel with nuanced in-between colors.

Key point: Tertiary colors offer subtle variations

12 colors showing relationships

The Complete Wheel

The complete color wheel shows how all colors relate. Opposite colors are complementary. Adjacent colors are analogous. This is your color harmony map.

Key point: The wheel is your guide to color relationships

02

Color Properties

Understanding hue, saturation, and lightness (HSL) gives you precise control over color.

Hue: 0-360 degrees around the color wheel

Hue (H)

Hue is the pure color - red, orange, yellow, etc. Measured in degrees: 0/360 = red, 120 = green, 240 = blue. Hue tells you WHAT color.

Key point: Hue = the actual color on the wheel

Saturation: 0% (gray) to 100% (vivid)

Saturation (S)

Saturation is color intensity. 0% = gray (no color). 100% = pure, vivid color. Lower saturation creates muted, sophisticated palettes.

Key point: Lower saturation = more sophisticated, professional feel

Lightness: 0% (black) to 100% (white)

Lightness (L)

Lightness is how light or dark a color is. 0% = black, 50% = pure color, 100% = white. Also called Value or Brightness.

Key point: Lightness controls perceived brightness

.button {
  /* hsl(hue, saturation, lightness) */
  background: hsl(220, 90%, 50%);
}

.button:hover {
  /* Just change lightness! */
  background: hsl(220, 90%, 40%);
}

Using HSL

HSL is more intuitive than RGB. Want a darker version? Lower lightness. Want less intense? Lower saturation. Hue stays the same.

Key point: HSL makes color manipulation intuitive

03

Color Harmony

Mathematical relationships on the color wheel create pleasing combinations.

Opposite on the wheel. High contrast, vibrant.

Complementary (180 degrees)

Colors directly opposite each other (180 degrees apart). Blue/Orange, Red/Green, Yellow/Purple. High contrast, use sparingly - one dominant, one accent.

Key point: Complementary = maximum contrast. Use 80/20 ratio.

3 colors next to each other. Harmonious, calm.

Analogous (Adjacent)

Colors next to each other on the wheel. Low contrast, naturally harmonious. Pick one dominant, others support. Often found in nature.

Key point: Analogous = safe, harmonious, subtle

3 colors equally spaced. Balanced but vibrant.

Triadic (120 degrees)

Three colors evenly spaced (120 degrees apart). Balanced and vibrant. Can feel playful or childish. Reduce saturation for sophistication.

Key point: Triadic = balanced energy. Lower saturation for elegance.

Base + two adjacent to complement. Less tension.

Split-Complementary

One base color plus the two colors adjacent to its complement. Contrast of complementary, but less tension. Often the best choice.

Key point: Split-complementary = contrast without clash

04

Color Psychology

Colors carry meaning and emotional weight. Use them intentionally.

URGENCY

Energy, passion, danger, excitement

Red

Red demands attention. Increases heart rate. Use for: alerts, sales, CTAs, food brands. Caution: can feel aggressive. Culture matters - red means luck in China, danger in West.

Key point: Red = urgency, action, attention

TRUST

Calm, stability, professionalism, security

Blue

Blue is universally liked. Calming and trustworthy. Use for: corporate, finance, tech, healthcare. Most common brand color. Can feel cold or corporate.

Key point: Blue = trust, stability, professionalism

GROWTH

Nature, health, wealth, success

Green

Green signals go, success, nature. Use for: eco brands, health, finance, success states. Also means money in US. Can feel envious (green with envy).

Key point: Green = growth, success, nature, go

ORANGE

Friendly, energetic

PURPLE

Luxury, creativity

YELLOW

Optimism, warning

BLACK

Luxury, power, elegance

Other Colors

Every color carries associations. Yellow: optimism but also caution. Purple: luxury, royalty. Orange: friendly, affordable. Black: luxury, power.

Key point: Consider both positive and negative associations

05

Color Context

Colors don't exist in isolation. Context dramatically affects perception.

Same gray appears different on different backgrounds

Simultaneous Contrast

The same color looks different depending on what surrounds it. Gray on red looks slightly green. Gray on green looks slightly red. Colors are relative.

Key point: Always test colors in context, not isolation

Same two colors, very different feel based on proportion

Color Proportion

The ratio of colors matters as much as the colors themselves. 80% blue + 20% orange feels very different from 50/50. Use the 60-30-10 rule.

Key point: 60% dominant, 30% secondary, 10% accent

WARM

Advances, energizes

COOL

Recedes, calms

Warm vs Cool

Warm colors (red, orange, yellow) advance and feel energetic. Cool colors (blue, green, purple) recede and feel calming. Mix temperatures for visual depth.

Key point: Warm advances, cool recedes

Light Mode

Saturated colors work

Dark Mode

Desaturate for comfort

Light vs Dark Mode

Colors behave differently on light vs dark backgrounds. In dark mode, reduce saturation to prevent eye strain. Pure colors can glow uncomfortably.

Key point: Dark mode needs desaturated, lighter colors

14

CSS Color Implementation

Working with color in CSS.

.element {
  /* Hex - most common */
  color: #ff6600;
  
  /* RGB - decimal values */
  color: rgb(255, 102, 0);
  
  /* HSL - most intuitive */
  color: hsl(24, 100%, 50%);
  
  /* With alpha (transparency) */
  color: rgba(255, 102, 0, 0.5);
  color: hsla(24, 100%, 50%, 0.5);
}

Color Formats via CSS

Hex - #RRGGBB, most common format
RGB - Red, Green, Blue (0-255)
HSL - Hue (0-360), Saturation (%), Lightness (%)

Tip: Use HSL for easier color manipulation. Changing lightness is intuitive.

:root {
  /* Base colors */
  --color-primary: hsl(220, 90%, 50%);
  --color-primary-dark: hsl(220, 90%, 40%);
  --color-primary-light: hsl(220, 90%, 60%);
  
  /* Semantic colors */
  --color-success: hsl(140, 70%, 45%);
  --color-warning: hsl(45, 100%, 50%);
  --color-error: hsl(0, 80%, 50%);
  
  /* Neutrals */
  --color-gray-100: hsl(220, 10%, 97%);
  --color-gray-500: hsl(220, 10%, 50%);
  --color-gray-900: hsl(220, 10%, 10%);
}

Color Variables via CSS

Base colors - Brand primary with light/dark variants
Semantic colors - Success, warning, error states
Neutrals - Grays with slight hue for warmth/coolth

Tip: Add a subtle hue to grays. Pure gray feels cold. Warm gray (slight yellow) or cool gray (slight blue) feels more intentional.

:root {
  --bg: hsl(0, 0%, 100%);
  --text: hsl(220, 10%, 10%);
  --primary: hsl(220, 90%, 50%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: hsl(220, 10%, 10%);
    --text: hsl(220, 10%, 90%);
    /* Desaturate and lighten for dark mode */
    --primary: hsl(220, 70%, 65%);
  }
}

Dark Mode Colors via CSS

prefers-color-scheme - Detects system dark mode
Desaturation - Reduce saturation for dark backgrounds
Lightening - Increase lightness for readability

Tip: Don't just invert. Desaturate and lighten colors for dark mode comfort.

.hero {
  /* Linear gradient */
  background: linear-gradient(
    135deg,
    hsl(220, 90%, 50%),
    hsl(280, 90%, 50%)
  );
}

.button {
  /* Subtle gradient for depth */
  background: linear-gradient(
    to bottom,
    hsl(220, 90%, 55%),
    hsl(220, 90%, 45%)
  );
}

Gradient Colors via CSS

linear-gradient - Direction and color stops
Angle - 135deg = top-left to bottom-right
Color stops - At least 2 colors needed

Tip: For vibrant gradients, shift hue between stops, not just lightness.

15

Self-Assessment

Test your color theory knowledge.

Q1

What are complementary colors?

Click to reveal

Q2

What does the 60-30-10 rule mean?

Click to reveal

Q3

Why is HSL often better than RGB for design work?

Click to reveal

Q4

How should colors change for dark mode?

Click to reveal

Q5

What is simultaneous contrast?

Click to reveal

Color Theory

Core Concepts

The Color Wheel

Color Properties

Color Harmony

Color Psychology

Color Context

CSS Implementation

CSS Color Implementation

Self-Assessment

Self-Assessment

Key Takeaways