Color Theory & Curated Palettes

Color theory fundamentals and pre-curated palettes for when browser access is unavailable.

---

Color Psychology

Color Meanings

Color	Associations	Best For
Black	Luxury, power, sophistication	Premium brands, tech, fashion
White	Clean, minimal, pure	Healthcare, minimal brands
Red	Energy, urgency, passion	Food, entertainment, sales
Orange	Friendly, energetic, creative	Startups, creative, food
Yellow	Optimism, warmth, caution	Children's, food, warnings
Green	Nature, growth, money	Finance, eco, health
Blue	Trust, calm, professional	Corporate, tech, finance
Purple	Luxury, creativity, wisdom	Beauty, spiritual, creative
Pink	Playful, feminine, modern	Fashion, beauty, youth
Brown	Earthy, reliable, warm	Food, outdoor, organic

Warm vs Cool

Warm colors (red, orange, yellow):

• Feel energetic and inviting
• Come forward visually
• Best for CTAs and accents

Cool colors (blue, green, purple):

• Feel calm and professional
• Recede visually
• Best for backgrounds and large areas

---

Curated Fallback Palettes

Dark & Premium

Obsidian Gold

Primary:    #c9a227  (Gold)
Background: #0a0a0a  (Near black)
Surface:    #1a1a1a  (Dark gray)
Text:       #fafafa  (Off-white)
Muted:      #737373  (Gray)

Midnight Coral

Primary:    #ff6b6b  (Coral)
Background: #0f0f0f  (Black)
Surface:    #1e1e1e  (Charcoal)
Text:       #ffffff  (White)
Muted:      #888888  (Gray)

Deep Ocean

Primary:    #00d4ff  (Cyan)
Background: #0a0a0a  (Black)
Surface:    #141414  (Dark)
Text:       #f0f0f0  (Light gray)
Muted:      #666666  (Gray)

---

Clean & Minimal

Pure Contrast

Primary:    #000000  (Black)
Background: #ffffff  (White)
Surface:    #f5f5f5  (Light gray)
Text:       #171717  (Near black)
Muted:      #737373  (Gray)

Warm Minimal

Primary:    #1a1a1a  (Black)
Background: #faf8f5  (Cream)
Surface:    #f0ede8  (Warm gray)
Text:       #1a1a1a  (Black)
Muted:      #8a8a8a  (Warm gray)

Cool Slate

Primary:    #3b82f6  (Blue)
Background: #f8fafc  (Blue-white)
Surface:    #f1f5f9  (Light slate)
Text:       #0f172a  (Dark slate)
Muted:      #64748b  (Slate)

---

Bold & Energetic

Electric Orange

Primary:    #ff6b35  (Orange)
Background: #0a0a0a  (Black)
Surface:    #171717  (Charcoal)
Text:       #ffffff  (White)
Accent:     #ffd23f  (Yellow)

Neon Punch

Primary:    #ff00ff  (Magenta)
Background: #000000  (Black)
Surface:    #1a1a1a  (Dark)
Text:       #ffffff  (White)
Accent:     #00ffff  (Cyan)

Brutalist Yellow

Primary:    #000000  (Black)
Background: #ffe951  (Yellow)
Surface:    #ffffff  (White)
Text:       #000000  (Black)
Border:     #000000  (Black)

---

Warm & Inviting

Scandinavian

Primary:    #c17f59  (Terracotta)
Background: #faf8f5  (Cream)
Surface:    #f0ede8  (Warm white)
Text:       #2c2c2c  (Charcoal)
Muted:      #8a8178  (Warm gray)

Forest Cabin

Primary:    #2d5a27  (Forest green)
Background: #f5f2eb  (Parchment)
Surface:    #ebe7dc  (Tan)
Text:       #1c1c1c  (Near black)
Muted:      #6b6b5e  (Olive gray)

Desert Sunset

Primary:    #d4764e  (Terracotta)
Background: #fdf6e3  (Sand)
Surface:    #f4ece0  (Light tan)
Text:       #3b3024  (Brown)
Accent:     #b55b3a  (Rust)

---

Cool & Professional

Corporate Blue

Primary:    #2563eb  (Blue)
Background: #ffffff  (White)
Surface:    #f8fafc  (Light blue)
Text:       #1e293b  (Dark slate)
Muted:      #64748b  (Slate)

Tech Slate

Primary:    #6366f1  (Indigo)
Background: #f9fafb  (Gray-white)
Surface:    #f3f4f6  (Light gray)
Text:       #111827  (Near black)
Muted:      #6b7280  (Gray)

Finance Green

Primary:    #059669  (Emerald)
Background: #ffffff  (White)
Surface:    #f0fdf4  (Light green)
Text:       #064e3b  (Dark green)
Muted:      #6b7280  (Gray)

---

Creative & Playful

Candy

Primary:    #ec4899  (Pink)
Background: #ffffff  (White)
Surface:    #fdf4ff  (Light pink)
Text:       #1f1f1f  (Black)
Accent:     #8b5cf6  (Purple)

Retro Pop

Primary:    #f472b6  (Pink)
Background: #fef3c7  (Yellow)
Surface:    #ffffff  (White)
Text:       #1c1917  (Brown-black)
Accent:     #38bdf8  (Cyan)

Memphis

Primary:    #ff6b6b  (Coral)
Background: #ffffff  (White)
Surface:    #e0f2fe  (Light blue)
Text:       #000000  (Black)
Accent:     #fbbf24  (Yellow)

---

Creating Custom Palettes

From a Single Color

1. Start with primary brand color
2. Generate shades (lighter/darker)
3. Choose complementary accent
4. Define text colors with proper contrast

Color Harmony Rules

Monochromatic: Single hue, varied lightness

• Safe, cohesive, can lack energy

Complementary: Opposite on color wheel

• High contrast, vibrant, use sparingly

Analogous: Adjacent on color wheel

• Harmonious, natural, low contrast

Triadic: Three evenly spaced colors

• Balanced, vibrant, complex to execute

Shade Generation

From a base color, create a scale:

50:  Very light (background tint)
100: Light
200: Light medium
300: Medium light
400: Medium
500: Base color
600: Medium dark
700: Dark medium
800: Dark
900: Very dark (text)
950: Near black

---

Accessibility Reference

Minimum Contrast Ratios

Content Type	Minimum Ratio	Level
Normal text	4.5:1	AA
Large text (18px+)	3:1	AA
UI components	3:1	AA
Enhanced text	7:1	AAA

Safe Text Colors

On white backgrounds:

• #171717 (contrast: 16:1)
• #404040 (contrast: 10:1)
• #525252 (contrast: 7:1)
• #737373 (contrast: 4.5:1) - minimum

On black backgrounds:

• #ffffff (contrast: 21:1)
• #e5e5e5 (contrast: 16:1)
• #a3a3a3 (contrast: 7:1)
• #8a8a8a (contrast: 4.5:1) - minimum

---

Quick Selection Guide

Aesthetic	Recommended Palette
Dark & Premium	Obsidian Gold, Midnight Coral
SaaS / Tech	Tech Slate, Corporate Blue
Minimal	Pure Contrast, Warm Minimal
Neobrutalism	Brutalist Yellow, Electric Orange
Scandinavian	Scandinavian, Forest Cabin
Creative	Candy, Retro Pop
Finance	Finance Green, Corporate Blue
Luxury	Obsidian Gold, Deep Ocean