> ## 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. # TrueColor Tint System Architecture > Runtime implementation of Core-Flow theory for terminal color transformation ## 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: * `vim` with custom colorschemes * `ls --color` with LS\_COLORS * `git log` with ANSI colors * Any application outputting RGB escape sequences The Tint System transforms these colors **in real-time** to match the user's theme while preserving the **relative relationships** between colors. ``` ┌─────────────────────────────────────────────────────────────────────────────────┐ │ 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) │ │ │ └─────────────────────────────────────────────────────────────────────────────────┘ ``` **Key Insight**: * 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 ``` The architecture bridges theoretical color science (OKLCH/OKLAB) with practical terminal rendering, ensuring that the benefits of perceptually uniform color spaces reach end users in real-time. *** Deep dive into tintHue, tintStrength, tintChroma, and anchor parameters