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 |
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) │
│ │
└───────────────────────────────────────────────────────────────────────┘
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 │
│ │
└───────────────────────────────────────────────────────────────────────┘
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
- CORE defines WHERE to transform (the zone boundaries)
- FLOW defines HOW to transform smoothly (OkLab interpolation)
Hue Inheritance System
Learn how anchor hue propagates to UI elements through inheritance