Color Theory

Color communicates personality. A warm tape plugin shouldn’t have cold blue controls. This guide covers color choices for controls and visualizers.

Control Colors

Primary Properties

Property	Purpose
primaryColor	Main accent - active/filled states
secondaryColor	Secondary accent - complementary
trackColor	Inactive/background track
activeColor	Highlighted/on state
bodyColor	Widget body/dial background
pointerColor	Knob indicator, slider thumb
handleColor	Toggle handles, slider thumbs
textColor	Label text
borderColor	Widget borders

Color Roles

Primary/Active Colors

• Should be vibrant, attention-grabbing
• Used for filled states, active indicators
• The “personality” color of your plugin

Track/Background Colors

• Should be subtle, low contrast
• Used for unfilled tracks, backgrounds
• Usually dark, recedes visually

Pointer/Handle Colors

• Should have high contrast with track
• Usually light (white/light gray)
• Indicates current position

---

Visualizer Colors

Property	Purpose
bodyColor	Background - usually dark
trackColor	Primary visual element
activeColor	Accent/highlight
pointerColor	Tertiary (complex visualizers)

Visualizer Color Tips

• Dark backgrounds provide best contrast
• Match trackColor to plugin accent
• activeColor should complement trackColor
• Use all color slots for complex visualizers (plasma, fractal)

---

Color by Personality

Warm/Vintage

• Accent: Orange, amber, warm brown
• Background: Dark brown, warm gray
• Vibe: Tape, tubes, analog warmth

Cold/Digital

• Accent: Blue, cyan, white
• Background: Dark blue, cold gray
• Vibe: Clean, precise, clinical

Aggressive/Hot

• Accent: Red, orange, yellow
• Background: Dark red, black
• Vibe: Distortion, saturation, heat

Calm/Ambient

• Accent: Purple, soft blue, teal
• Background: Deep blue, dark purple
• Vibe: Reverb, space, atmosphere

Retro/Synthwave

• Accent: Cyan, magenta, neon pink
• Background: Deep purple, black
• Vibe: 80s, synths, vaporwave

Natural/Organic

• Accent: Green, earth tones
• Background: Dark green, brown
• Vibe: Natural, acoustic, organic

---

Color Schemes

Monochromatic

Single hue, varied lightness/saturation.

• Simple, elegant
• Low visual noise
• Good for minimal designs

Complementary

Opposite colors on color wheel.

• High contrast
• Vibrant, energetic
• Use sparingly for accents

Analogous

Adjacent colors on color wheel.

• Harmonious, natural
• Easy on the eyes
• Good for cohesive designs

Triadic

Three equidistant colors.

• Rich, balanced
• Good for complex visualizers
• Requires careful balance

---

Practical Guidelines

Contrast

• Controls must be readable
• Pointers must be visible against track
• Text must be legible against background

Consistency

• One accent color throughout
• Same hue, vary saturation/lightness
• Don’t mix warm and cold

Restraint

• Limit palette to 3-4 colors
• One dominant accent
• Let negative space breathe

---

Common Mistakes

Too Many Colors

❌ Different accent for each control ✅ One accent color, consistent throughout

No Contrast

❌ Light pointer on light track ✅ High contrast for readability

Wrong Temperature

❌ Cold blue on a “warm tape” plugin ✅ Colors match sonic personality

Clashing Colors

❌ Random, unrelated colors ✅ Colors from same scheme

---

Plugin Type Suggestions

Plugin Type	Suggested Palette
Utility	Neutral gray, blue accent
EQ	Blue, cyan, neutral
Compressor	Orange, amber, warm
Distortion	Red, orange, warm
Delay	Blue, purple, cool
Reverb	Purple, blue, atmospheric
Modulation	Green, cyan, dynamic
Lo-Fi	Amber, brown, vintage
Creative	Bold, saturated, experimental

---

Testing Your Colors

1. Squint test - Can you still see controls?
2. Grayscale test - Does hierarchy survive without color?
3. Personality test - Do colors match the plugin’s sound?
4. Consistency check - Is one color dominant?
5. Accessibility - Is contrast sufficient?

---

Examples

Warm Compressor

Primary: #E07020 (Orange)
Track: #2A2420 (Dark brown)
Pointer: #FFFFFF (White)
Background: #1A1614 (Deep brown)

Cool Digital Delay

Primary: #4090E0 (Blue)
Track: #1A2030 (Dark blue)
Pointer: #FFFFFF (White)
Background: #0A1020 (Deep blue)

Aggressive Distortion

Primary: #E02020 (Red)
Track: #2A1818 (Dark red)
Active: #FF6040 (Orange highlight)
Background: #1A0A0A (Near black)