Skip to main content

The Physics of Color

In space, massive objects bend light. In Monolex, your theme’s anchor color bends other colors. This creates natural harmony - everything curves toward your theme’s identity.
┌─────────────────────────────────────────────────────────────────────────┐
│                    GRAVITATIONAL LENSING IN SPACE                       │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│                         * Distant Star                                  │
│                         │                                               │
│                         │  (light travels toward us)                    │
│                         │                                               │
│                    ____\│/____                                          │
│                  /      │      \                                        │
│                 │    @@@│@@@    │                                       │
│                 │   @@     @@   │  <-- Massive Object                   │
│                 │    @@@@@@@    │      (bends light around it)          │
│                  \      │      /                                        │
│                    ────/│\────                                          │
│                        / \                                              │
│                       /   \                                             │
│                      /     \                                            │
│                     *   *   *  <-- We see multiple images               │
│                                                                         │
│   Einstein predicted this in 1915. Proven in 1919.                      │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────┐
│                    EINSTEIN ARC IN COLOR                                │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│   Theme Anchor: Blue (250 deg)                                          │
│                                                                         │
│                              * Any Color                                │
│                              │                                          │
│                              │  (input to terminal)                     │
│                              │                                          │
│                         ____\│/____                                     │
│                       /      │      \                                   │
│                      │    @@@│@@@    │                                  │
│                      │   @THEME@@@   │  <-- Theme Anchor                │
│                      │    @@@@@@@    │      (bends colors around it)    │
│                       \      │      /                                   │
│                         ────/│\────                                     │
│                             / \                                         │
│                            /   \                                        │
│                           *     *  <-- Colors redistributed             │
│                                                                         │
│   Colors near the "opposite" of your theme get compressed.              │
│   Colors near your theme get more room to spread out.                   │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘

The Caustic Zone

In gravitational lensing, light converges at a bright spot called the “caustic.” In color, the Caustic zone is where complementary colors get compressed.
┌─────────────────────────────────────────────────────────────────────────┐
│                         THE CAUSTIC ZONE                                │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│   Theme: Blue (anchor = 250 deg)                                        │
│                                                                         │
│                              0 deg (Red)                                │
│                                 *                                       │
│                               /   \                                     │
│                             /       \                                   │
│                    330    /           \    30                           │
│                      *  /               \  *                            │
│                        /                 \                              │
│                       /                   \                             │
│              270 *───┬                     ┬───* 90                     │
│            BLUE      │                     │     YELLOW                 │
│           ANCHOR     │     CAUSTIC         │                            │
│                       \      ZONE         /                             │
│                        \    (130 deg)    /                              │
│                    210  *   center     * 150                            │
│                          \           /                                  │
│                           \         /                                   │
│                             *     *                                     │
│                              180 deg                                    │
│                                                                         │
│   The Caustic zone forms OPPOSITE to your anchor:                       │
│   - Anchor: 250 deg (Blue)                                              │
│   - Complementary: 250 + 180 = 70 deg (Yellow-Green)                    │
│   - Caustic center: 70 + 60 = 130 deg (offset to avoid useful colors)   │
│   - Caustic zone: 40 deg to 220 deg (with 90 deg width)                 │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘

What Happens Inside vs Outside

The Einstein Arc algorithm treats colors differently based on their location.
┌─────────────────────────────────────────────────────────────────────────┐
│                    INSIDE vs OUTSIDE THE CAUSTIC                        │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│                              Hue Wheel                                  │
│                                                                         │
│                           \     │     /                                 │
│                        \   \    │    /   /                              │
│                     \   \   \   │   /   /   /                           │
│                  \   \   \   \  │  /   /   /   /                        │
│               ╔═════════════════════════════════╗  <-- Caustic Boundary │
│               ║                                 ║                       │
│               ║      INSIDE: Gradient Fill      ║                       │
│               ║      (OKLAB smooth blend)       ║                       │
│               ║            @ @ @                ║                       │
│               ║          @ @ @ @ @              ║                       │
│               ║            @ @ @                ║                       │
│               ║                                 ║                       │
│               ╚═════════════════════════════════╝  <-- Caustic Boundary │
│                  /   /   /   /  │  \   \   \   \                        │
│                     /   /   /   │   \   \   \                           │
│                        /   /    │    \   \                              │
│                           /     │     \                                 │
│                                                                         │
│               OUTSIDE: Hue Compression                                  │
│               (Colors spread out to fill space)                         │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────┐
│                      TWO DIFFERENT ALGORITHMS                           │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│   OUTSIDE THE CAUSTIC ZONE                                              │
│   =========================                                             │
│                                                                         │
│   Colors get redistributed around the wheel.                            │
│   The zone shrinks, so outside colors expand.                           │
│                                                                         │
│   BEFORE:  │...│...│...│ZONE│...│...│...│                               │
│   AFTER:   │....│....│....│ZN│....│....│....│                           │
│                           ^^                                            │
│                      Zone shrank                                        │
│                                                                         │
│   This is a POLAR operation (works on hue angles directly).             │
│                                                                         │
│   ───────────────────────────────────────────────────────────────────   │
│                                                                         │
│   INSIDE THE CAUSTIC ZONE                                               │
│   ========================                                              │
│                                                                         │
│   Colors blend smoothly using OKLAB gradients.                          │
│   No hue compression - just smooth transitions.                         │
│                                                                         │
│   Left Boundary                              Right Boundary             │
│        *──────────────────────────────────────────*                     │
│        │                                          │                     │
│        │   Smooth gradient in OKLAB space         │                     │
│        │   (prevents muddy intermediate colors)   │                     │
│        │                                          │                     │
│                                                                         │
│   This is a CARTESIAN operation (works on a,b coordinates).             │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘

Why Two Approaches?

Using both prevents the “muddy middle” problem.
┌─────────────────────────────────────────────────────────────────────────┐
│                    THE MUDDY MIDDLE PROBLEM                             │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│   Interpolating between Blue (240 deg) and Yellow (60 deg)              │
│                                                                         │
│   HUE-ONLY INTERPOLATION (problematic):                                 │
│   =====================================                                 │
│                                                                         │
│   Blue --> Cyan --> Green --> Yellow                                    │
│   240      180      120      60                                         │
│                                                                         │
│   [####] --> [####] --> [    ] --> [####]                               │
│                           ^^                                            │
│                      MUDDY GREEN!                                       │
│                  (Low saturation midpoint)                              │
│                                                                         │
│   The midpoint passes through unsaturated colors.                       │
│                                                                         │
│   ───────────────────────────────────────────────────────────────────   │
│                                                                         │
│   OKLAB INTERPOLATION (smooth):                                         │
│   ==============================                                        │
│                                                                         │
│   Instead of walking around the hue wheel,                              │
│   draw a straight line in OKLAB space:                                  │
│                                                                         │
│                +b (Yellow)                                              │
│                     │                                                   │
│                     │     * Yellow (60 deg)                             │
│                     │    /                                              │
│                     │   /  <-- Straight line!                           │
│                     │  /                                                │
│   -a ───────────────┼/────────────────── +a                             │
│                     /                                                   │
│                    * Blue (240 deg)                                     │
│                     │                                                   │
│                -b (Blue)                                                │
│                                                                         │
│   Blue --> Purple --> Magenta --> Pink --> Yellow                       │
│                                                                         │
│   [####] --> [####] --> [####] --> [####] --> [####]                    │
│                           ^^                                            │
│                    VIBRANT PURPLE!                                      │
│                 (Saturation preserved)                                  │
│                                                                         │
│   OKLAB straight-line interpolation maintains saturation.               │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘

The Three Modes

The Einstein Arc has three operating modes.
┌─────────────────────────────────────────────────────────────────────────┐
│                      EINSTEIN ARC MODES                                 │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│   MODE 0: NONE                                                          │
│   ============                                                          │
│   ┌───────────────────────────────────────────────────────────────┐     │
│   │                                                               │     │
│   │   No transformation applied.                                  │     │
│   │   Colors pass through unchanged.                              │     │
│   │                                                               │     │
│   │   Use when: You want pure, unmodified colors                  │     │
│   │                                                               │     │
│   └───────────────────────────────────────────────────────────────┘     │
│                                                                         │
│   MODE 1: COMPRESS                                                      │
│   ================                                                      │
│   ┌───────────────────────────────────────────────────────────────┐     │
│   │                                                               │     │
│   │   Hue-only compression everywhere.                            │     │
│   │   May cause discontinuities at zone boundaries.               │     │
│   │                                                               │     │
│   │   [Before] │───│────│───│────│───│────│───│                   │     │
│   │   [After]  │────│────│──│──│────│────│────│                   │     │
│   │                       ^  ^                                    │     │
│   │                    Compressed                                 │     │
│   │                                                               │     │
│   │   Use when: You want simple hue redistribution                │     │
│   │                                                               │     │
│   └───────────────────────────────────────────────────────────────┘     │
│                                                                         │
│   MODE 2: COMPRESS + GRADIENT (default, recommended)                    │
│   ===================================================                   │
│   ┌───────────────────────────────────────────────────────────────┐     │
│   │                                                               │     │
│   │   Outside zone: Compress hues (polar operation)               │     │
│   │   Inside zone: OKLAB gradient (Cartesian operation)           │     │
│   │                                                               │     │
│   │   [Before] │───│────│───│────│───│────│───│                   │     │
│   │   [After]  │────│────│~~smooth~~│────│────│ │                 │     │
│   │                       ^         ^                             │     │
│   │                    Gradient fill                              │     │
│   │                                                               │     │
│   │   Best of both worlds: smooth inside, redistributed outside   │     │
│   │                                                               │     │
│   └───────────────────────────────────────────────────────────────┘     │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘

The Decision Flow

Here’s how a color decides which path to take.
┌─────────────────────────────────────────────────────────────────────────┐
│                      EINSTEIN ARC DECISION FLOW                         │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│   INPUT: Color with Hue angle                                           │
│             │                                                           │
│             v                                                           │
│   ┌───────────────────┐                                                 │
│   │ Is mode = 0?      │──YES──> Pass through unchanged                  │
│   └────────┬──────────┘                                                 │
│            │ NO                                                         │
│            v                                                            │
│   ┌───────────────────┐                                                 │
│   │ Calculate delta   │                                                 │
│   │ from Caustic      │                                                 │
│   │ center            │                                                 │
│   └────────┬──────────┘                                                 │
│            │                                                            │
│            v                                                            │
│   ┌───────────────────┐                                                 │
│   │ Is color INSIDE   │                                                 │
│   │ Caustic zone?     │                                                 │
│   │ (delta < width)   │                                                 │
│   └────────┬──────────┘                                                 │
│            │                                                            │
│      ┌─────┴─────┐                                                      │
│      │           │                                                      │
│     YES          NO                                                     │
│      │           │                                                      │
│      v           v                                                      │
│   ┌────────┐  ┌────────┐                                                │
│   │ INSIDE │  │ OUTSIDE│                                                │
│   └────────┘  └────────┘                                                │
│      │           │                                                      │
│      v           v                                                      │
│   If mode=2:  Always:                                                   │
│   OKLAB       Hue                                                       │
│   gradient    compression                                               │
│      │           │                                                      │
│      v           v                                                      │
│   Smooth      Redistributed                                             │
│   blend       hue angle                                                 │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘

Compression Visualization

Watch colors compress and expand.
┌─────────────────────────────────────────────────────────────────────────┐
│                    COMPRESSION VISUALIZATION                            │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│   Caustic center: 130 deg                                               │
│   Caustic width: 90 deg                                                 │
│   Strength: 10%                                                         │
│                                                                         │
│   BEFORE (linear hue distribution):                                     │
│   ================================                                      │
│                                                                         │
│   Hue:   0     40     90    130    170    220    280    360             │
│          │     │      │     │      │      │      │      │               │
│          ┴─────┴──────┴─────┴──────┴──────┴──────┴──────┴               │
│          │OUTSIDE     │ INSIDE ZONE       │  OUTSIDE    │               │
│          │            │<──── center ────>│              │               │
│                                                                         │
│   Caustic zone: 40 to 220 degrees (130 +/- 90)                          │
│                                                                         │
│   ───────────────────────────────────────────────────────────────────   │
│                                                                         │
│   AFTER (10% compression applied):                                      │
│   =================================                                     │
│                                                                         │
│   Hue:   0    45     95    130    165    215    285    360              │
│          │    │      │     │      │      │      │      │                │
│          ┴────┴──────┴─────┴──────┴──────┴──────┴──────┴                │
│          │EXPANDED   │ COMPRESSED        │ EXPANDED    │                │
│          ^           ^                   ^             ^                │
│          │           │                   │             │                │
│          +5 deg      Zone shrunk         Zone shrunk   +5 deg           │
│          (expanded)  by 10%              by 10%        (expanded)       │
│                                                                         │
│   What happened:                                                        │
│   - Colors at 40 deg moved to 45 deg (expanded away from zone)          │
│   - Colors at 90 deg moved to 95 deg (compressed toward center)         │
│   - Colors at 170 deg moved to 165 deg (compressed toward center)       │
│   - Colors at 220 deg moved to 215 deg (edge of zone, slight shift)     │
│   - Colors at 280 deg moved to 285 deg (expanded away from zone)        │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘

Theme Configuration

Different themes use different Einstein Arc settings.
┌─────────────────────────────────────────────────────────────────────────┐
│                    THEME CONFIGURATIONS                                 │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│   ┌───────────────────────────────────────────────────────────────┐     │
│   │ Theme          │ Offset │ Width  │ Strength │ Effect          │     │
│   ├────────────────┼────────┼────────┼──────────┼────────────────┤      │
│   │ monolex-night  │ 60 deg │ 90 deg │    10%   │ Subtle green    │     │
│   │                │        │        │          │ compression     │     │
│   ├────────────────┼────────┼────────┼──────────┼────────────────┤      │
│   │ monolex-forest │ 60 deg │ 130deg │    10%   │ Wide zone       │     │
│   │                │        │        │          │ (green theme)   │     │
│   ├────────────────┼────────┼────────┼──────────┼────────────────┤      │
│   │ solarized-dark │ 60 deg │ 60 deg │    10%   │ Narrow, minimal │     │
│   │                │        │        │          │ effect          │     │
│   ├────────────────┼────────┼────────┼──────────┼────────────────┤      │
│   │ dracula        │   -    │   -    │     0%   │ No caustic      │     │
│   │                │        │        │          │ (pure colors)   │     │
│   └───────────────────────────────────────────────────────────────┘     │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘

The Physics Metaphor Summary

┌─────────────────────────────────────────────────────────────────────────┐
│                    PHYSICS --> COLOR MAPPING                            │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│   GRAVITATIONAL LENSING              EINSTEIN ARC                       │
│   ======================             ============                       │
│                                                                         │
│   Massive object            -->      Theme anchor hue                   │
│   (star, black hole)                 (your theme's main color)          │
│                                                                         │
│   Light rays                -->      Color hue angles                   │
│   (from distant stars)               (from terminal output)             │
│                                                                         │
│   Light bending             -->      Hue redistribution                 │
│   (curved spacetime)                 (colors shift around anchor)       │
│                                                                         │
│   Caustic                   -->      Caustic zone                       │
│   (where light converges)            (complementary color region)       │
│                                                                         │
│   Einstein Arc              -->      The curved path colors take        │
│   (visible arc of light)             (hue compression pattern)          │
│                                                                         │
│   Frame Drag                -->      Tint blending                      │
│   (space pulled by rotation)         (colors pulled toward tint)        │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘

Key Takeaways

  1. Colors bend like light - Your theme’s anchor acts like a massive object, bending colors around it
  2. Caustic zone gets special treatment - Complementary colors are compressed or gradient-filled
  3. Mode 2 is best - Combines polar compression (outside) with OKLAB gradients (inside)
  4. OKLAB prevents muddy colors - Straight-line interpolation maintains saturation
  5. Physics metaphors make it intuitive - Einstein Arc, Caustic, Frame Drag all describe real color behaviors

Visual Flow

See the complete transformation flow