> ## Documentation Index > Fetch the complete documentation index at: https://docs.monolex.ai/llms.txt > Use this file to discover all available pages before exploring further. # Anchor Pull and Hue Warp Algorithm > How the Hue Warp algorithm compresses complementary colors to create theme harmony ## Concept Overview **Hue Warp** (also called **Anchor Pull**) is a technique that compresses or warps colors in a specific hue region, creating theme harmony by making all colors "arc around" the theme's core color - like light bending around a massive object. ``` ┌─────────────────────────────────────────────────────────────────────────────────┐ │ HUE WARP CONCEPT │ ├─────────────────────────────────────────────────────────────────────────────────┤ │ │ │ Theme: Blue (250°) Pull Center: 130° Caustic Region: 40° ~ 220° │ │ │ │ HUE SPECTRUM (Linear View): │ │ │ │ 0° 40° 90° 130° 180° 220° 270° 360° │ │ │ │ │ │ │ │ │ │ │ │ Red Yellow Y-Grn Green Cyan Cyan-Bl Blue Red │ │ │ │ │ │ │ │ │ │ │ │ │ ╠═══════════════════════════════════════╣ │ │ │ │ │ (OUT) ║ CAUSTIC REGION ║ (OUTSIDE) │ │ │ │ ║ ◄─────── compress to 130° ─────────► ║◄───── expand ─────►│ │ │ │ ║ ▼ ║ ▲ │ │ │ │ ║ Pull Center ║ 250° Theme │ │ │ └─────────╩═══════════════════════════════════════╩──────────┴─────────┘ │ │ │ │ COMPRESSION EFFECT: │ │ ─────────────────── │ │ BEFORE: ├──┼──┼──┼──┼──┼──┼──┼──┼──┤ (uniform distribution) │ │ AFTER: ├───┼─┼┼┼┼┼─┼──────┼───────┤ (compressed + expanded) │ │ ▲▲▲ │ │ clustered at 130° │ │ │ │ RESULT: │ │ ──────── │ │ INSIDE (40°-220°): Greens, Cyans compress toward 130° (less distinction) │ │ OUTSIDE (220°-40°): Blues, Reds expand (Theme colors get more room) │ │ │ └─────────────────────────────────────────────────────────────────────────────────┘ ``` ``` ┌─────────────────────────────────────────────────────────────────────────────────┐ │ HUE WARP - COLOR WHEEL VIEW │ ├─────────────────────────────────────────────────────────────────────────────────┤ │ │ │ Theme: Blue (250°) Pull Center: 130° Caustic: 40° ~ 220° │ │ │ │ 0° Red │ │ ● │ │ 330° ╱ ╲ 30° │ │ ╱ ╲ │ │ 300° ╱ ╲ 60° │ │ ╱ 40° ←── ╲ ── Caustic Start │ │ 270° ●───────────────────● 90° │ │ (Blue) ╲ ╱ │ │ Theme → 250° ╲ 120° ╱ │ │ 240° ╲ ╱ │ │ Caustic End → 220° ─── ╲────●────╱── 130° Pull Center │ │ ╲ ╱ │ │ ╲ ╱ 150° │ │ ╲ ╱ │ │ ● │ │ 180° Cyan │ │ │ │ CAUSTIC (40°-220°): Greens, Cyans compressed toward 130° │ │ OUTSIDE (220°-40°): Blues, Reds expanded (Theme gets more room) │ │ │ └─────────────────────────────────────────────────────────────────────────────────┘ ``` ## Core-Flow Classification **This is where FLOW appears in the Tint System!** | Operation | Coordinate System | Core/Flow | | ------------------------------- | --------------------- | --------- | | Caustic region calculation | Polar (hue angles) | CORE | | Hue compression (outside zone) | Polar (hue angles) | CORE | | **Gradient fill (inside zone)** | **Cartesian (OkLab)** | **FLOW** | The gradient fill inside the Caustic region uses **OkLab linear interpolation**, exactly matching the Gestalt principle: *"Flow Colors use OKLAB for smooth transitions."* ## Pull Parameters ### pullComplementary Defines the offset from the complementary hue to establish the Pull Center. ``` ┌─────────────────────────────────────────────────────────────────────────────────┐ │ pullComplementary PARAMETER │ ├─────────────────────────────────────────────────────────────────────────────────┤ │ │ │ Definition: Offset from the complementary hue to define Pull Center │ │ Range: -180 to +180 degrees │ │ Default: 60 degrees │ │ Formula: Pull Center = Anchor Hue + 180 + pullComplementary │ │ │ │ CALCULATION EXAMPLE (Blue theme): │ │ ═════════════════════════════════ │ │ │ │ Anchor Hue: 250 degrees (Blue) │ │ | + 180 degrees │ │ Complementary: 70 degrees (Yellow-Green) │ │ | + 60 degrees (pullComplementary) │ │ Pull Center: 130 degrees (Green) │ │ │ │ WHY OFFSET FROM COMPLEMENTARY? │ │ ─────────────────────────────── │ │ Complementary (70 degrees) is often used in syntax highlighting. │ │ Offsetting by 60 degrees targets a less-used color region (greens), │ │ preserving the useful complementary contrast. │ │ │ └─────────────────────────────────────────────────────────────────────────────────┘ ``` ### pullWidth The half-width of the Caustic region. ``` ┌─────────────────────────────────────────────────────────────────────────────────┐ │ pullWidth PARAMETER │ ├─────────────────────────────────────────────────────────────────────────────────┤ │ │ │ Definition: Half-width of the Caustic region (in degrees) │ │ Range: 0 - 180 degrees │ │ Default: 90 degrees │ │ Formula: Caustic = [Core - pullWidth, Core + pullWidth] │ │ │ │ EXAMPLE (pullWidth = 90, Pull Center = 130): │ │ ══════════════════════════════════════════════ │ │ │ │ Caustic region = [130 - 90, 130 + 90] = [40, 220] │ │ │ │ Color Wheel Coverage: │ │ │ │ 0 40 90 130 180 220 270 360 │ │ | | | | | | | | │ │ ────────┼───────┼────────┼────────┼────────┼────────┼───────┼─────┼ │ │ | ├═══════════════════════════════════┤ | | │ │ OUTSIDE | | PULL ZONE (180 deg) | |OUTSIDE │ │ EXPAND | | (40 to 220) | |EXPAND │ │ | | Greens, Cyans, Yellows | | │ │ | | COMPRESSED | | │ │ ────────┴───────┴───────────────────────────────────┴───────┴─────┘ │ │ │ │ COMMON pullWidth VALUES: │ │ ════════════════════════ │ │ 60 : Narrow zone, minimal effect │ │ 90 : Standard (default), balanced compression │ │ 130 : Wide zone (monolex-forest), strong green emphasis │ │ 180 : Maximum, entire color wheel affected │ │ │ └─────────────────────────────────────────────────────────────────────────────────┘ ``` ### pullStrength The intensity of compression. ``` ┌─────────────────────────────────────────────────────────────────────────────────┐ │ pullStrength PARAMETER │ ├─────────────────────────────────────────────────────────────────────────────────┤ │ │ │ Definition: Intensity of compression/warp (0 = none, 1 = maximum) │ │ Range: 0% - 100% │ │ Default: 10% │ │ │ │ STRENGTH EFFECTS: │ │ ═════════════════ │ │ │ │ 0% : No compression (bypass) │ │ 10% : Subtle harmony (default) - recommended │ │ 30% : Noticeable compression, clear theme bias │ │ 50% : Strong effect, reduced color diversity in zone │ │ 100% : All colors in zone collapse to Pull Center │ │ │ │ VISUAL COMPARISON (Pull Center = 130, Width = 90): │ │ ════════════════════════════════════════════════════ │ │ │ │ strength=0% (Linear): │ │ ├────┼────┼────┼────┼────┼────┼────┼────┤ │ │ 40 62 85 107 130 152 175 197 220 (degrees, evenly spaced) │ │ │ │ strength=10% (Subtle compression): │ │ ├───┼────┼───┼──┼──┼───┼────┼────┤ │ │ 40 60 82 110 130 148 170 195 220 │ │ ^ compressed zone ^ │ │ │ │ strength=50% (Strong compression): │ │ ├─┼──┼─┼┼┼─┼──┼──┤ │ │ 40 55 85 120 130 140 170 195 220 │ │ ^ heavily compressed ^ │ │ │ └─────────────────────────────────────────────────────────────────────────────────┘ ``` ### pullMode Algorithm selection for Hue Warp. ``` ┌─────────────────────────────────────────────────────────────────────────────────┐ │ pullMode PARAMETER │ ├─────────────────────────────────────────────────────────────────────────────────┤ │ │ │ Definition: Algorithm selection for Hue Warp │ │ Values: 0 = none, 1 = compress, 2 = compressGradient (default) │ │ │ │ MODE 0: none │ │ ═══════════ │ │ - No transformation applied │ │ - Colors pass through unchanged │ │ - Use case: Preserve original app colors │ │ │ │ MODE 1: compress │ │ ══════════════ │ │ - Hue-only compression │ │ - CORE operation (polar space) │ │ - May cause hue discontinuities at zone boundaries │ │ │ │ MODE 2: compressGradient (DEFAULT) │ │ ═══════════════════════════════════ │ │ - Compression + OkLab gradient fill │ │ - FLOW operation inside zone (cartesian interpolation) │ │ - Smooth transitions, no muddy colors │ │ - RECOMMENDED for production │ │ │ │ CORE/FLOW CLASSIFICATION: │ │ ═════════════════════════ │ │ │ │ | Mode | Outside Zone | Inside Zone | Classification | │ │ |──────┼──────────────┼─────────────┼────────────────| │ │ | 0 | None | None | N/A | │ │ | 1 | CORE (hue) | CORE (hue) | Pure CORE | │ │ | 2 | CORE (hue) | FLOW (oklab)| CORE + FLOW | │ │ │ └─────────────────────────────────────────────────────────────────────────────────┘ ``` ## Algorithm Implementation ### warp\_hue\_compress (CORE) The core compression function that operates in polar space: ``` ┌───────────────────────────────────────────────────────────────────────┐ │ WARP_HUE_COMPRESS ALGORITHM (CORE - Polar Space) │ ├───────────────────────────────────────────────────────────────────────┤ │ │ │ INPUT: hue, pull_hue (center), strength, width │ │ │ │ BYPASS CHECK: │ │ width == 0 OR strength == 0? ──► Return hue unchanged │ │ │ │ CALCULATE POSITION: │ │ delta = normalize(hue - pull_hue) to [-π, π] │ │ abs_d = |delta| │ │ │ │ abs_d <= width? (Inside pull zone?) │ │ │ │ │ YES ─┴──► COMPRESS toward center: │ │ ratio = abs_d / width (0 at center, 1 at edge) │ │ compressed = ratio × (1 - strength) │ │ result = pull_hue + sign(delta) × compressed × width │ │ │ │ │ NO ──┴──► EXPAND to fill released space: │ │ Calculate new position in expanded outside range │ │ │ │ OUTPUT: warped hue (redistributed on color wheel) │ │ │ └───────────────────────────────────────────────────────────────────────┘ ``` The algorithm diagram above describes the complete logic. The implementation follows standard circular arithmetic with zone-based compression and expansion. ### fill\_with\_oklab\_gradient (FLOW) The gradient fill that operates in cartesian space: ``` ┌───────────────────────────────────────────────────────────────────────┐ │ FILL_WITH_OKLAB_GRADIENT ALGORITHM (FLOW - Cartesian Space) │ ├───────────────────────────────────────────────────────────────────────┤ │ │ │ INPUT: hue, pull_hue, strength, width, base_l, base_c │ │ │ │ ZONE CHECK: │ │ |delta| > width? ──► Return None (outside zone, use CORE instead) │ │ │ │ CONVERT BOUNDARIES TO CARTESIAN: │ │ ────────────────────────────────── │ │ left_boundary = compressed left edge hue │ │ right_boundary = compressed right edge hue │ │ │ │ Polar → Cartesian: │ │ left_a = base_c × cos(left_boundary) │ │ left_b = base_c × sin(left_boundary) │ │ right_a = base_c × cos(right_boundary) │ │ right_b = base_c × sin(right_boundary) │ │ │ │ LINEAR INTERPOLATION (FLOW): │ │ ───────────────────────────── │ │ t = position ratio within zone [0, 1] │ │ │ │ result_a = left_a × (1-t) + right_a × t │ │ result_b = left_b × (1-t) + right_b × t │ │ │ │ OUTPUT: (base_l, result_a, result_b) in OkLab Cartesian │ │ Smooth gradient without muddy intermediate colors │ │ │ └───────────────────────────────────────────────────────────────────────┘ ``` The algorithm converts Polar boundaries to Cartesian OkLab coordinates, then performs linear interpolation in Cartesian space to avoid muddy intermediate colors. See the diagram above for the complete flow. ## OkLab vs Hue Interpolation The key insight of Mode 2 (compressGradient) is using FLOW (OkLab) inside the zone instead of CORE (hue) interpolation. ``` ┌─────────────────────────────────────────────────────────────────────────────────┐ │ OKLAB vs HUE INTERPOLATION COMPARISON │ ├─────────────────────────────────────────────────────────────────────────────────┤ │ │ │ PROBLEM: Interpolating between Blue (240 deg) and Yellow (60 deg) │ │ │ │ HUE INTERPOLATION (CORE approach - problematic): │ │ ═══════════════════════════════════════════════ │ │ │ │ Direct path: 240 → 180 → 120 → 60 │ │ │ │ Blue → Cyan → Green → Yellow │ │ 240 180 120 60 │ │ │ │ ^ │ │ MUDDY GREEN! │ │ (low saturation midpoint) │ │ │ │ OKLAB INTERPOLATION (FLOW approach - smooth): │ │ ═════════════════════════════════════════════ │ │ │ │ Straight line in a,b plane: │ │ │ │ +b (Yellow) │ │ | │ │ | * Yellow (60) │ │ | / │ │ | / <- STRAIGHT LINE │ │ | / (maintains saturation) │ │ -a ───────────────┼─/──────────────────── +a │ │ |/ │ │ * Blue (240) │ │ | │ │ -b (Blue) │ │ │ │ Result: Blue → Purple → Magenta → Pink → Yellow │ │ │ │ ^ │ │ VIBRANT PURPLE! │ │ (saturation preserved) │ │ │ └─────────────────────────────────────────────────────────────────────────────────┘ ``` ## Decision Flow ``` ┌─────────────────────────────────────────────────────────────────────────────────┐ │ APPLY_HUE_WARP DECISION FLOW │ ├─────────────────────────────────────────────────────────────────────────────────┤ │ │ │ INPUT: (hue, L, C) in OkLCH polar │ │ │ │ ┌──────────────────────┐ │ │ │ pull_mode == 0? │ │ │ │ OR width == 0? │ │ │ │ OR strength == 0? │ │ │ └──────────┬───────────┘ │ │ │ │ │ YES │ NO │ │ | │ | │ │ ┌──────────┐ │ ┌──────────────────┐ │ │ │ BYPASS │ │ │ pull_mode == 1? │ │ │ │ Return │ │ └────────┬─────────┘ │ │ │ unchanged│ │ │ │ │ └──────────┘ │ YES │ NO (mode 2) │ │ │ | │ | │ │ │ ┌────────────┐ ┌────────────────────────┐ │ │ │ │ CORE ONLY │ │ Is hue INSIDE zone? │ │ │ │ │ warp_hue │ └────────────┬───────────┘ │ │ │ │ compress │ │ │ │ │ └────────────┘ YES │ NO │ │ │ | │ | │ │ │ ┌──────────┐ ┌──────────────┐ │ │ │ │ FLOW │ │ CORE │ │ │ │ │ OkLab │ │ warped │ │ │ │ │ gradient │ │ hue │ │ │ │ └──────────┘ └──────────────┘ │ │ | | │ │ v v │ │ ┌──────────────────┐ │ │ │ OUTPUT: (L,a,b) │ │ │ │ OkLab Cartesian │ │ │ └──────────────────┘ │ │ │ └─────────────────────────────────────────────────────────────────────────────────┘ ``` ## THE CENTER ### How Hue Warp Helps Humans Parse Information The Hue Warp algorithm is essential to Core-Flow's mission of using color for information clarity. ``` Connection to Core-Flow: ├── Color Grouping: Related colors cluster together visually │ → Easier to spot patterns in terminal output ├── Theme Harmony: Complementary colors are softened, not harsh │ → Reduced visual competition for attention ├── Preserved Distinctiveness: Blues expand, greens compress │ → Theme identity colors remain prominent └── FLOW inside Zone: Smooth gradients prevent visual artifacts → No jarring color jumps in output ``` The dual CORE+FLOW approach ensures that: * **CORE defines WHERE** to transform (the zone boundaries) * **FLOW defines HOW** to transform smoothly (OkLab interpolation) This combination creates theme harmony without destroying the semantic meaning of colors. *** Learn how anchor hue propagates to UI elements through inheritance