Color Theory in 30 Seconds

  • Primary: Red, Blue, Yellow—can't be made by mixing other colors
  • Secondary: Orange, Green, Purple—mix two primaries
  • The wheel: Invented by Isaac Newton in 1666 (yes, the gravity guy)

Palette Types Explained

  • Complementary: Opposite on the wheel (red/green)—high contrast, eye-catching
  • Analogous: Neighbors on the wheel—harmonious, found in nature (sunset colors)
  • Triadic: Three colors equally spaced—vibrant but balanced (primary colors)
  • Split-Complementary: Base + two adjacent to its complement—less tension than complementary
  • Tetradic: Four colors in rectangle—rich but hard to balance
  • Monochromatic: One hue, different shades/tints—elegant, impossible to mess up

Famous Brand Colors (Hex Codes)

  • Coca-Cola Red: #F40009 — The most recognized color in the world
  • Tiffany Blue: #0ABAB5 — Trademarked! Pantone 1837 (the year founded)
  • Facebook Blue: #1877F2 — Chosen because Zuckerberg is red-green colorblind
  • Spotify Green: #1DB954 — Stands out against every album cover
  • Netflix Red: #E50914 — Designed to pop on TV screens
  • Slack Purple: #4A154B — Aubergine, to feel 'business but fun'

The 60-30-10 Rule

  • 60% dominant color: Walls, background, large areas (usually neutral)
  • 30% secondary color: Furniture, accents, supporting elements
  • 10% accent color: Pop of contrast, buttons, CTAs, highlights
  • Interior designers have used this for decades—works for websites too
  • Example: White background (60%), blue nav/cards (30%), orange buttons (10%)

Color Psychology in Marketing

  • Red: Urgency, excitement, hunger (fast food, sale signs)
  • Blue: Trust, security, calm (banks, tech companies, healthcare)
  • Green: Nature, health, money (organic brands, finance)
  • Yellow: Optimism, attention (warning signs, discount stickers)
  • Purple: Luxury, creativity, royalty (beauty brands, Twitch)
  • Orange: Fun, confidence, affordable (Amazon, Nickelodeon)
  • Black: Elegance, power, exclusivity (luxury brands, Apple)

Accessibility: WCAG Contrast

  • Normal text: 4.5:1 contrast ratio minimum (AA standard)
  • Large text (18pt+): 3:1 ratio minimum
  • AAA standard: 7:1 for normal, 4.5:1 for large (stricter)
  • White text on medium blue? Often fails—test with a contrast checker
  • 8% of men are colorblind—never rely on color alone for meaning

Dark Mode Color Tips

  • Don't just invert: Pure white (#FFFFFF) on black is too harsh—use #E0E0E0
  • Surface elevation: Lighter grays for raised elements (cards, modals)
  • Saturated colors: Reduce saturation for dark mode—neon on black hurts eyes
  • Shadows: Use less shadow, more border/background difference
  • Test in both modes: A color that works on white might disappear on dark

Quick Color Inspiration Sources

  • Nature: Sunsets, forests, oceans—millions of years of evolution say these work
  • Movies: Film colorists are genius—screenshot your favorite scenes
  • Art: Study Monet, Rothko, Warhol for palette ideas
  • Dribbble/Behance: See what top designers are using this year
  • Your competitor: Don't copy exactly, but understand why their colors work

Common Color Mistakes

  • Too many colors: Stick to 3-5 max. More = visual chaos
  • Vibrating colors: Red on blue or orange on cyan—literally hurts to look at
  • Low contrast text: Gray on gray = unreadable for many users
  • Ignoring context: That pastel looks great on Dribbble, but can users read it?
  • No system: Random colors per page. Build a design system with named colors

Pro Tips

  • Start with one color you love, then generate the rest mathematically
  • Squint test: Blur your eyes—can you still tell elements apart?
  • Screenshot test: Take screenshots, put them in a grid—do they feel cohesive?
  • Print check: Colors look different on paper vs screen—preview if printing
  • Get feedback: You've stared too long. Fresh eyes catch issues you're blind to