The Problem: Unique Colors for Agents
When multiple AI agents work in a terminal, each needs a distinct color. How do you generate colors that never look too similar?┌──────────────────────────────────────────────────────────────────────────────┐
│ THE AGENT COLOR CHALLENGE │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ NAIVE APPROACH: Divide the wheel evenly │
│ │
│ 3 agents: [ Red ] -------- [ Green ] -------- [ Blue ] │
│ (0) (120) (240) │
│ │
│ But what happens when you add a 4th agent? │
│ │
│ 4 agents: [ Red ] --- [ Yellow ] --- [ Green ] --- [ Blue ] │
│ (0) (90) (180) (270) │
│ │
│ PROBLEM: All colors shift! Agent 2 changed from green to yellow. │
│ │
├──────────────────────────────────────────────────────────────────────────────┤
│ GOLDEN ANGLE SOLUTION │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ Each new agent rotates by 137.5 degrees (the Golden Angle): │
│ │
│ Agent 1: 0 + 137.5 = 137.5 (Cyan-Green) │
│ Agent 2: 0 + 275.0 = 275.0 (Blue-Violet) │
│ Agent 3: 0 + 412.5 = 52.5 (Yellow-Orange) │
│ Agent 4: 0 + 550.0 = 190.0 (Cyan) │
│ │
│ Existing colors NEVER change. New colors are always maximally spaced! │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
The Golden Angle Explained
┌──────────────────────────────────────────────────────────────────────────────┐
│ WHY 137.5 DEGREES? │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ The Golden Ratio: 1.618... │
│ │
│ 360 / (1.618...)^2 = 137.5 degrees │
│ │
│ This angle has a special property: it produces the most even │
│ distribution of points around a circle, no matter how many you add. │
│ │
│ │
│ COLOR WHEEL │
│ │
│ 0 │
│ │ │
│ *7 │ *3 │
│ *6 │ *4 │
│ / │ \ │
│ 270 ── + ── 90 │
│ \ │ / │
│ *2 │ *5 │
│ *1 │ │
│ │ │
│ 180 │
│ │
│ Each * is a color, spaced 137.5 degrees apart. │
│ Colors naturally avoid clustering! │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
Two Golden Angles in Monolex
Monolex uses two different rotation values for different purposes:┌──────────────────────────────────────────────────────────────────────────────┐
│ TWO ROTATION STRATEGIES │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ GOLDEN ANGLE = 137.5 degrees │
│ Purpose: MAXIMUM DISTINCTION │
│ │
│ ┌──────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ File 1: 137.5 (Cyan-Green) │ │ │
│ │ File 2: 275.0 (Blue-Violet) │ Colors JUMP across │ │
│ │ File 3: 52.5 (Yellow) │ the wheel - very distinct │ │
│ │ File 4: 190.0 (Cyan) │ │ │
│ │ │ │
│ │ Use case: File type icons, syntax highlighting │ │
│ └──────────────────────────────────────────────────────────────────┘ │
│ │
│ │
│ AGENT ANGLE = 27.5 degrees (137.5 / 5) │
│ Purpose: HARMONIOUS PROGRESSION │
│ │
│ ┌──────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ Agent 1: 207.5 (Blue-Cyan) │ │ │
│ │ Agent 2: 235.0 (Blue) │ Colors PROGRESS smoothly │ │
│ │ Agent 3: 262.5 (Blue-Violet) │ feeling related but unique │ │
│ │ Agent 4: 290.0 (Violet) │ │ │
│ │ │ │
│ │ Use case: Terminal sessions, AI agent tabs │ │
│ └──────────────────────────────────────────────────────────────────┘ │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
Visual Distribution
┌──────────────────────────────────────────────────────────────────────────────┐
│ AGENT HUE DISTRIBUTION (First 13 Agents) │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ Starting from Cyan (180 degrees), rotating by 27.5 each time: │
│ │
│ 0/360 (Red) │
│ 7* ^ │
│ 6* │ *8 │
│ / │ \ │
│ 5*──────────────┼──────────────*9 │
│ \ │ / │
│ 4* │ *10 │
│ 3* │ *11 │
│ 2* │ *12 │
│ 1* *13 │
│ 180 (Cyan) │
│ │
│ Each * represents one agent's color zone. │
│ The 27.5 degree spacing ensures no two zones overlap. │
│ │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ Agent Hue Color Zone │
│ ──────────────────────────────────────────── │
│ 1 207.5 Blue-Cyan │
│ 2 235.0 Blue │
│ 3 262.5 Blue-Violet │
│ 4 290.0 Violet │
│ 5 317.5 Magenta │
│ 6 345.0 Pink-Red │
│ 7 12.5 Red-Orange │
│ 8 40.0 Orange │
│ 9 67.5 Yellow │
│ 10 95.0 Yellow-Green │
│ 11 122.5 Green │
│ 12 150.0 Green-Cyan │
│ 13 177.5 Cyan │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
How Colors Are Generated
┌──────────────────────────────────────────────────────────────────────────────┐
│ AGENT COLOR FORMULA │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ STEP 1: Calculate Hue │
│ ┌──────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ hue = (base_hue + agent_index * 27.5) mod 360 │ │
│ │ │ │
│ │ Example with base_hue = 180: │ │
│ │ │ │
│ │ Agent 1: (180 + 1 * 27.5) mod 360 = 207.5 │ │
│ │ Agent 2: (180 + 2 * 27.5) mod 360 = 235.0 │ │
│ │ Agent 7: (180 + 7 * 27.5) mod 360 = 372.5 -> 12.5 │ │
│ │ │ │
│ └──────────────────────────────────────────────────────────────────┘ │
│ │
│ STEP 2: Apply Fixed Lightness and Chroma │
│ ┌──────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ Theme Lightness Chroma │ │
│ │ ───────────────────────────────────────── │ │
│ │ Dark 70% 0.10 (subtle on dark bg) │ │
│ │ Light 40% 0.12 (vivid on light bg) │ │
│ │ │ │
│ └──────────────────────────────────────────────────────────────────┘ │
│ │
│ RESULT: Each agent gets a unique, visually distinct color │
│ that works well with both dark and light themes. │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
Theme-Aware vs Fixed Colors
┌──────────────────────────────────────────────────────────────────────────────┐
│ TWO COLOR MODES │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ FIXED MODE (Standard): │
│ ┌──────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ Base hue: 180 (Cyan) - always the same │ │
│ │ │ │
│ │ Agent 1: 207.5 Agent 2: 235.0 Agent 3: 262.5 │ │
│ │ blue blue violet │ │
│ │ │ │
│ │ Colors are INDEPENDENT of theme. │ │
│ │ Same colors everywhere in the app. │ │
│ └──────────────────────────────────────────────────────────────────┘ │
│ │
│ │
│ THEME-AWARE MODE: │
│ ┌──────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ Base hue: Extracted from theme's primary color │ │
│ │ │ │
│ │ Theme: "Orange Pro" (primary hue = 30) │ │
│ │ │ │
│ │ Agent 1: 57.5 Agent 2: 85.0 Agent 3: 112.5 │ │
│ │ orange yellow green │ │
│ │ │ │
│ │ Colors HARMONIZE with the current theme. │ │
│ └──────────────────────────────────────────────────────────────────┘ │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
Key Takeaways
┌──────────────────────────────────────────────────────────────────────────────┐
│ │
│ 1. Golden Angle (137.5) = Maximum color separation │
│ Used for: file types, distinct categories │
│ │
│ 2. Agent Angle (27.5) = Smooth color progression │
│ Used for: AI agents, terminal sessions │
│ │
│ 3. New colors never affect existing colors │
│ (Unlike even division which shifts everything) │
│ │
│ 4. Works at any scale - 3 agents or 30 agents │
│ │
│ 5. Fixed Lightness + Chroma = Equal visual weight │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
Semantic Colors
Learn about status colors for success, warning, and error states