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?Copy
+-----------------------------------------------------------------------------+
| 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
Copy
+-----------------------------------------------------------------------------+
| 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:Copy
+-----------------------------------------------------------------------------+
| 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
Copy
+-----------------------------------------------------------------------------+
| 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
Copy
+-----------------------------------------------------------------------------+
| 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
Copy
+-----------------------------------------------------------------------------+
| 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
Copy
+-----------------------------------------------------------------------------+
| |
| 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