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.Copy
┌─────────────────────────────────────────────────────────────────────────────────┐
│ HUE WARP CONCEPT │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ THEME: Blue (Anchor Hue = 250 degrees) │
│ COMPLEMENTARY: Yellow-Green (250 + 180 = 70 degrees) │
│ PULL CENTER: 70 + 60 = 130 degrees (offset by pullComplementary) │
│ │
│ COLOR WHEEL BEFORE │
│ │
│ 0 degrees Red │
│ * │
│ / \ │
│ / \ │
│ 330 / \ 30 │
│ * / \ * │
│ / \ │
│ 300 / \ 60 │
│ *────*───────────────────────────*────* │
│ 270 90 │
│ (Blue) (Yellow) │
│ * \ / * │
│ 240 \ CAUSTIC / 120 │
│ \ REGION / │
│ \ | / │
│ \ 130 <─────── (compressed) │
│ \ / │
│ * │
│ 180 degrees Cyan │
│ │
│ AFTER HUE WARP: │
│ ══════════════ │
│ - Colors INSIDE Caustic region (40-220 degrees): Compressed toward 130 │
│ - Colors OUTSIDE Caustic curve: Expanded to fill released space │
│ - Result: More "room" for blues (theme identity), less for greens │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
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.Copy
┌─────────────────────────────────────────────────────────────────────────────────┐
│ 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.Copy
┌─────────────────────────────────────────────────────────────────────────────────┐
│ 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.Copy
┌─────────────────────────────────────────────────────────────────────────────────┐
│ 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.Copy
┌─────────────────────────────────────────────────────────────────────────────────┐
│ 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:Copy
┌───────────────────────────────────────────────────────────────────────┐
│ 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) │
│ │
└───────────────────────────────────────────────────────────────────────┘
Copy
fn warp_hue_compress(hue: f32, pull_hue: f32, strength: f32, width: f32) -> f32 {
// BYPASS: No width or strength = no transform
if width == 0.0 || strength == 0.0 {
return hue;
}
// Calculate delta from pull center (normalized to [-pi, pi])
let mut delta = hue - pull_hue;
// ... normalize delta ...
let abs_d = delta.abs();
if abs_d <= width {
// INSIDE PULL ZONE: Compress toward center
// ratio = 0 at center, 1 at boundary
// compressed ratio = ratio * (1 - strength)
let ratio = abs_d / width;
let compressed = ratio * (1.0 - strength);
let result = pull_hue + delta.signum() * compressed * width;
result.rem_euclid(two_pi)
} else {
// OUTSIDE PULL ZONE: Expand to fill released space
// ... expansion calculation ...
}
}
fill_with_oklab_gradient (FLOW)
The gradient fill that operates in cartesian space:Copy
┌───────────────────────────────────────────────────────────────────────┐
│ 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 │
│ │
└───────────────────────────────────────────────────────────────────────┘
Copy
fn fill_with_oklab_gradient(
hue: f32, pull_hue: f32, strength: f32, width: f32,
base_l: f32, base_c: f32,
) -> Option<(f32, f32, f32)> {
// Return None if outside pull zone
if delta.abs() > width {
return None;
}
// Define boundary hues and convert to OkLab Cartesian
let left_a = base_c * left_boundary.cos();
let left_b = base_c * left_boundary.sin();
let right_a = base_c * right_boundary.cos();
let right_b = base_c * right_boundary.sin();
// FLOW: Linear interpolation in Cartesian space
// This prevents muddy intermediate colors!
Some((
base_l,
left_a * (1.0 - t) + right_a * t, // a-axis blend
left_b * (1.0 - t) + right_b * t, // b-axis blend
))
}
OkLab vs Hue Interpolation
The key insight of Mode 2 (compressGradient) is using FLOW (OkLab) inside the zone instead of CORE (hue) interpolation.Copy
┌─────────────────────────────────────────────────────────────────────────────────┐
│ 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
Copy
┌─────────────────────────────────────────────────────────────────────────────────┐
│ 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.Copy
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