Overview
The TrueColor Tint System is the runtime implementation of Core-Flow theory. While the Gestalt Color System defines colors at design time using CSS and OKLCH/OKLAB, the Tint System transforms arbitrary terminal colors in real-time to match the user’s theme.┌─────────────────────────────────────────────────────────────────────────────────┐
│ CORE-FLOW to TINT SYSTEM BRIDGE │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ GESTALT THEORY (CSS/Design Time) TINT SYSTEM (Rust/Runtime) │
│ ════════════════════════════════ ══════════════════════════ │
│ │
│ Core Colors (OKLCH) Anchor Hue + Tint Hue │
│ • oklch(L% C H) definition → • darkAnchorHue parameter │
│ • Golden Angle distribution • tintHue for theme identity │
│ │
│ Flow Colors (OKLAB) OkLab Transform Pipeline │
│ • color-mix(in oklab, ...) → • hex_to_oklab() conversion │
│ • Linear interpolation • fill_with_oklab_gradient() │
│ │
│ Core to Flow Derivation Hue Warp Algorithm │
│ • Transparency, darkening → • Caustic region compression │
│ • "No muddy colors" • OkLab gradient inside zone │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
Why Runtime Transform?
Terminal emulators receive arbitrary TrueColor values from applications:vimwith custom colorschemesls --colorwith LS_COLORSgit logwith ANSI colors- Any application outputting RGB escape sequences
┌─────────────────────────────────────────────────────────────────────────────────┐
│ RUNTIME TRANSFORM NECESSITY │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ Application Output: User Theme (Monolex Night): │
│ ══════════════════ ══════════════════════════ │
│ #FF0000 (Pure Red) → #E06C75 (Soft Rose Red) │
│ #00FF00 (Pure Green) → #98C379 (Muted Green) │
│ #0000FF (Pure Blue) → #61AFEF (Sky Blue) │
│ │
│ The transformation: │
│ 1. Preserves relative lightness relationships │
│ 2. Applies theme "tint" (color bias) │
│ 3. Pulls complementary colors toward harmony │
│ 4. Maintains text readability │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
System Architecture
The Tint System processes colors through a multi-stage pipeline, with each stage serving a specific purpose in the transformation.┌─────────────────────────────────────────────────────────────────────────────────┐
│ TINT SYSTEM ARCHITECTURE │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────────────────────────┐ │
│ │ INPUT LAYER │ │
│ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ │
│ │ │ TrueColor │ │ ANSI 256 │ │ ANSI 16 │ │ │
│ │ │ #RRGGBB │ │ Color Index │ │ Basic Colors │ │ │
│ │ └──────┬───────┘ └──────┬───────┘ └──────┬───────┘ │ │
│ └─────────┼─────────────────┼─────────────────┼───────────────────────────┘ │
│ │ │ │ │
│ ▼ ▼ ▼ │
│ ┌─────────────────────────────────────────────────────────────────────────┐ │
│ │ THEME TRANSFORM CACHE │ │
│ │ ┌──────────────────────────────────────────────────────────────────┐ │ │
│ │ │ Precomputed Parameters (from theme JSON): │ │ │
│ │ │ ├── anchor_hue (radians) │ │ │
│ │ │ ├── anchor_chroma │ │ │
│ │ │ ├── tint_hue, tint_strength, tint_chroma │ │ │
│ │ │ ├── pull_hue, pull_width, pull_strength, pull_mode │ │ │
│ │ │ ├── l_corrected[8] (Weber-Fechner lightness steps) │ │ │
│ │ │ └── hue_inherit_bg, hue_inherit_text, hue_inherit_ansi │ │ │
│ │ └──────────────────────────────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────────────────────────────────────────────────────────────┐ │
│ │ TRANSFORM PIPELINE │ │
│ │ │ │
│ │ Step 1: RGB to OkLab │ │
│ │ ┌──────────────┐ │ │
│ │ │ hex_to_oklab │ Convert input to perceptually uniform space │ │
│ │ └──────┬───────┘ │ │
│ │ │ │ │
│ │ Step 2: OkLab to OkLCH (Polar) │ │
│ │ ┌──────────────┐ │ │
│ │ │ to_lch() │ C = sqrt(a^2 + b^2), H = atan2(b, a) │ │
│ │ └──────┬───────┘ │ │
│ │ │ │ │
│ │ Step 3: Lightness Mapping │ │
│ │ ┌──────────────┐ │ │
│ │ │ l_corrected │ Weber-Fechner cascade for theme contrast │ │
│ │ └──────┬───────┘ │ │
│ │ │ │ │
│ │ Step 4: Chroma Scaling │ │
│ │ ┌──────────────┐ │ │
│ │ │ C * (0.4 + │ Adjust saturation based on lightness ratio │ │
│ │ │ ratio*0.6) │ │ │
│ │ └──────┬───────┘ │ │
│ │ │ │ │
│ │ Step 5: Tint Blending (if tint_strength > 0) │ │
│ │ ┌──────────────┐ │ │
│ │ │ blend_hue() │ Shift hue toward theme's tint color │ │
│ │ └──────┬───────┘ │ │
│ │ │ │ │
│ │ Step 6: Hue Warp │ │
│ │ ┌──────────────┐ │ │
│ │ │apply_hue_warp│ Compress complementary zone, OkLab gradient │ │
│ │ └──────┬───────┘ │ │
│ │ │ │ │
│ │ Step 7: OkLab to RGB │ │
│ │ ┌──────────────┐ │ │
│ │ │oklab_to_hex │ Convert back to displayable color │ │
│ │ └──────┬───────┘ │ │
│ │ │ │ │
│ └─────────┼───────────────────────────────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────────────────────────────────────────────────────────────┐ │
│ │ OUTPUT LAYER │ │
│ │ ┌──────────────┐ │ │
│ │ │ Transformed │ Theme-harmonized color for xterm.js WebGL │ │
│ │ │ #RRGGBB │ │ │
│ │ └──────────────┘ │ │
│ └─────────────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
Data Flow Example
Here is a concrete example showing how a bright orange-red color transforms through the pipeline:┌─────────────────────────────────────────────────────────────────────────────────┐
│ DATA FLOW EXAMPLE │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ Input: #FF5733 (Bright Orange-Red) │
│ │
│ STEP 1: hex_to_oklab │
│ #FF5733 → OkLab(L=0.68, a=0.18, b=0.14) │
│ │
│ STEP 2: to_lch │
│ OkLab → OkLCH(L=0.68, C=0.23, H=38 degrees) │
│ (Orange-Red hue at 38 degrees) │
│ │
│ STEP 3: Lightness Mapping │
│ L=0.68 → l_corrected[step] = 0.65 │
│ (Slightly darker for theme contrast) │
│ │
│ STEP 4: Chroma Scaling │
│ C=0.23 * 0.82 = 0.19 │
│ (Reduced saturation for softer appearance) │
│ │
│ STEP 5: Tint Blending (tint_hue=250 degrees, strength=10%) │
│ H=38 degrees → H=36 degrees (slight shift toward blue tint) │
│ │
│ STEP 6: Hue Warp (core=250 degrees, arc_center=130 degrees) │
│ H=36 degrees is OUTSIDE Caustic region [40, 220] │
│ → Expand: H=36 degrees → H=32 degrees (more room for blues) │
│ │
│ STEP 7: oklab_to_hex │
│ OkLCH(L=0.65, C=0.19, H=32 degrees) → #E07055 │
│ (Softer, theme-harmonized coral-red) │
│ │
│ Output: #E07055 (Theme-harmonized) │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
Core-Flow in the Pipeline
The transform pipeline strategically uses both CORE and FLOW operations:┌─────────────────────────────────────────────────────────────────────────────────┐
│ CORE vs FLOW DECISION IN TINT PIPELINE │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ Pipeline Step Coordinate System Core/Flow Role │
│ ═════════════ ═════════════════ ═════════════ │
│ │
│ hex_to_oklab Cartesian → Cartesian (conversion only) │
│ to_lch Cartesian → Polar Prepare for CORE ops │
│ lightness_mapping Polar (L only) CORE (identity preservation) │
│ chroma_scaling Polar (C only) CORE (saturation identity) │
│ tint_blending Polar (H rotation) CORE (hue-based tint) │
│ anchor_pull (outside) Polar (H warp) CORE (hue redistribution) │
│ anchor_pull (inside) Cartesian (L,a,b) FLOW (gradient derivation) │
│ oklab_to_hex Cartesian → RGB (conversion only) │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
- The Tint System uses CORE (Polar) for defining theme identity, preserving color relationships, and user-facing parameters
- The Tint System uses FLOW (Cartesian) for smooth transitions within the pull zone and avoiding muddy intermediate colors
THE CENTER
How This Component Contributes to Information Flow Visualization
The TrueColor Tint System is fundamental to Core-Flow’s mission of helping humans parse information through color.Connection to Core-Flow:
├── Theme Consistency: All terminal colors harmonize with user's chosen theme
│ → Reduces visual noise, allows focus on content
├── Preserved Semantics: Red still means error, green still means success
│ → Information meaning is preserved while aesthetics are unified
├── Reduced Eye Strain: Harsh colors are softened, contrast is optimized
│ → Longer productive sessions without fatigue
└── Instant Recognition: Theme identity is immediately visible
→ Users can quickly orient themselves in their environment
Tint Parameters
Deep dive into tintHue, tintStrength, tintChroma, and anchor parameters