> ## 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. # Tint Parameters Deep Dive > Understanding tintHue, tintStrength, tintChroma, and anchor parameters for theme identity ## Overview The Tint System uses a set of parameters to define the **global color overlay** applied to all transformed colors. These parameters are all **CORE** parameters because they define theme identity using polar coordinates (hue angles, saturation percentages). ``` ┌─────────────────────────────────────────────────────────────────────────────────┐ │ TINT PARAMETERS OVERVIEW │ ├─────────────────────────────────────────────────────────────────────────────────┤ │ │ │ TINT = Global color "wash" applied to all transformed colors │ │ │ │ Three components (all CORE - polar/hue-based): │ │ │ │ 1. tintHue → WHAT color to tint toward (0-360 degrees) │ │ 2. tintStrength → HOW MUCH to apply the tint (0-100%) │ │ 3. tintChroma → HOW SATURATED the tint is (0-0.4) │ │ │ │ VISUAL METAPHOR: │ │ ════════════════ │ │ │ │ Imagine looking through a tinted glass: │ │ │ │ tintHue = 250 (Blue) tintHue = 30 (Orange) tintHue = 150 (Cyan) │ │ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │ │ │ Blue Tint │ │ Warm Tint │ │ Cool Tint │ │ │ └─────────────────┘ └─────────────────┘ └─────────────────┘ │ │ │ │ tintStrength controls how "thick" the glass is │ │ tintChroma controls how "saturated" the glass color is │ │ │ └─────────────────────────────────────────────────────────────────────────────────┘ ``` ## tintHue Parameter The hue angle that all colors are pulled toward. ``` ┌─────────────────────────────────────────────────────────────────────────────────┐ │ tintHue PARAMETER │ ├─────────────────────────────────────────────────────────────────────────────────┤ │ │ │ Definition: The hue angle (in degrees) that all colors are pulled toward │ │ Range: 0 - 360 degrees │ │ Default: 250 degrees (Blue-Purple) │ │ Unit: Degrees on OkLCH color wheel │ │ │ │ HUE WHEEL REFERENCE │ │ │ │ 0/360 degrees │ │ (Red) │ │ │ │ │ 330 │ 30 │ │ (Pink) │ (Orange) │ │ \ │ / │ │ \ │ / │ │ 270 ─────────────●─────────────── 90 │ │ (Blue) (Yellow-Green) │ │ / │ \ │ │ / │ \ │ │ 210 │ 150 │ │ (Cyan) │ (Green) │ │ │ │ │ 180 degrees │ │ (Cyan) │ │ │ │ COMMON tintHue VALUES: │ │ ════════════════════════ │ │ 250 → Blue theme (monolex-night, dracula) │ │ 200 → Cyan theme (solarized) │ │ 30 → Warm/Orange theme (orange-pro) │ │ 130 → Green theme (monolex-forest) │ │ │ └─────────────────────────────────────────────────────────────────────────────────┘ ``` ### Hue Blending Algorithm The `blend_hue` function uses the **shortest path** around the color wheel: ``` ┌───────────────────────────────────────────────────────────────────────┐ │ BLEND_HUE ALGORITHM FLOW │ ├───────────────────────────────────────────────────────────────────────┤ │ │ │ INPUT: source_hue, tint_hue, strength │ │ │ │ strength == 0? │ │ │ │ │ YES ─┴──► Return source_hue unchanged (bypass) │ │ │ │ │ NO ──┴──► Calculate shortest path: │ │ │ │ │ ├── delta = tint_hue - source_hue │ │ │ │ │ ├── Wrap to [-180, 180]: │ │ │ while delta > 180 → delta -= 360 │ │ │ while delta < -180 → delta += 360 │ │ │ │ │ ├── Blend: blended = source + (delta × strength) │ │ │ │ │ └── Normalize to [0, 360) │ │ │ │ OUTPUT: blended hue (shortest arc path on color wheel) │ │ │ └───────────────────────────────────────────────────────────────────────┘ ``` The algorithm above is implemented identically in both Rust and TypeScript, following the standard shortest-arc interpolation on a circular color wheel. ## tintStrength Parameter Controls how much the tint color influences the output. ``` ┌─────────────────────────────────────────────────────────────────────────────────┐ │ tintStrength PARAMETER │ ├─────────────────────────────────────────────────────────────────────────────────┤ │ │ │ Definition: How much the tint color influences the output │ │ Range: 0% - 100% │ │ Default: 10% │ │ Unit: Percentage │ │ │ │ STRENGTH COMPARISON │ │ │ │ Input Color: #00FF00 (Pure Green, Hue 120 degrees) │ │ tintHue: 250 degrees (Blue) │ │ │ │ tintStrength=0%: │ │ #00FF00 → #00FF00 (No change) │ │ │ │ tintStrength=10%: │ │ #00FF00 → Slight cyan shift │ │ │ │ tintStrength=30%: │ │ #00FF00 → Noticeable cyan │ │ │ │ tintStrength=50%: │ │ #00FF00 → Strong cyan-blue │ │ │ │ tintStrength=100%: │ │ #00FF00 → Fully tinted to blue │ │ │ │ PRACTICAL GUIDELINES: │ │ ════════════════════ │ │ │ │ 0-5% : Almost invisible, very subtle │ │ 5-15% : Subtle harmony without destroying source colors (RECOMMENDED) │ │ 15-30% : Noticeable theme bias, good for strong branding │ │ 30-50% : Strong effect, may wash out distinct colors │ │ 50-100% : Extreme, converts everything toward tint hue │ │ │ └─────────────────────────────────────────────────────────────────────────────────┘ ``` ### Theme Examples | Theme | tintStrength | Effect Description | | -------------- | ------------ | ---------------------------- | | monolex-night | 10% | Subtle blue harmony | | dracula | 0% | No tinting (pure palette) | | solarized-dark | 15% | Noticeable yellow-green bias | | orange-pro | 10% | Warm orange undertone | ## tintChroma Parameter The saturation level of the tint overlay itself. ``` ┌─────────────────────────────────────────────────────────────────────────────────┐ │ tintChroma PARAMETER │ ├─────────────────────────────────────────────────────────────────────────────────┤ │ │ │ Definition: The saturation/colorfulness of the tint overlay │ │ Range: 0 - 0.4 (OkLCH chroma units) │ │ Default: 0.02 │ │ Unit: OkLCH Chroma │ │ │ │ CHROMA VALUE REFERENCE │ │ │ │ 0.00 │ Gray (no color) │ │ 0.02 │ Very subtle color (default tint) ← RECOMMENDED │ │ 0.05 │ Noticeable but soft │ │ 0.10 │ Clear color presence │ │ 0.15 │ Saturated (MAX_SAFE_CHROMA) │ │ 0.20+ │ Very saturated, may clip in sRGB │ │ 0.40 │ Maximum (theoretical limit) │ │ │ │ NOTE: tintChroma affects the TINT OVERLAY itself, not the blended result. │ │ A high tintChroma with low tintStrength = subtle but pure color tint │ │ A low tintChroma with high tintStrength = strong but grayish tint │ │ │ └─────────────────────────────────────────────────────────────────────────────────┘ ``` ### Parameter Interaction Matrix ``` ┌─────────────────────────────────────────────────────────────────────────────────┐ │ TINT PARAMETER INTERACTION MATRIX │ ├─────────────────────────────────────────────────────────────────────────────────┤ │ │ │ tintChroma │ │ Low (0.02) High (0.10) │ │ ┌───────────────┬───────────────┐ │ │ tintStr │ │ │ │ │ Low (5%) │ Very subtle │ Subtle but │ │ │ │ gray-ish │ colorful │ │ │ │ tint │ tint │ │ │ ├───────────────┼───────────────┤ │ │ High (30%) │ Strong but │ Strong and │ │ │ │ desaturated │ saturated │ │ │ │ tint │ tint (VIVID) │ │ │ └───────────────┴───────────────┘ │ │ │ │ RECOMMENDED COMBINATIONS: │ │ ══════════════════════════ │ │ │ │ Subtle Professional: tintStrength=10%, tintChroma=0.02 │ │ Visible Branding: tintStrength=15%, tintChroma=0.05 │ │ Strong Theme: tintStrength=25%, tintChroma=0.08 │ │ │ └─────────────────────────────────────────────────────────────────────────────────┘ ``` ## Anchor Parameters The anchor parameters define the theme's "home base" color, used primarily for the Hue Warp algorithm. ### darkAnchorHue ``` ┌─────────────────────────────────────────────────────────────────────────────────┐ │ darkAnchorHue PARAMETER │ ├─────────────────────────────────────────────────────────────────────────────────┤ │ │ │ Definition: The "home base" hue for the theme (used in Hue Warp) │ │ Range: 0 - 360 degrees │ │ Default: 250 degrees (Blue) │ │ Relationship: Usually equals tintHue (but can differ) │ │ │ │ WHY SEPARATE FROM tintHue? │ │ ═══════════════════════════ │ │ │ │ tintHue = What color to BLEND toward (additive overlay) │ │ darkAnchorHue = What color to WARP around (hue redistribution) │ │ │ │ Example divergence: │ │ │ │ tintHue = 30 degrees (Orange overlay) │ │ darkAnchorHue = 250 degrees (Blue anchor) │ │ │ │ Result: Colors are warped around blue (complementary greens compress) │ │ but then tinted toward orange (warm undertone) │ │ │ │ Use case: "Warm sunset on a blue night" theme │ │ │ └─────────────────────────────────────────────────────────────────────────────────┘ ``` ### darkAnchorChroma Controls how "colorful" dark backgrounds appear. ``` ┌─────────────────────────────────────────────────────────────────────────────────┐ │ darkAnchorChroma PARAMETER │ ├─────────────────────────────────────────────────────────────────────────────────┤ │ │ │ Definition: Background saturation level for the theme │ │ Range: 0 - 0.4 │ │ Default: 0.02 │ │ Purpose: Controls how "colorful" dark backgrounds appear │ │ │ │ VISUAL COMPARISON: │ │ ══════════════════ │ │ │ │ darkAnchorChroma = 0.00 (Pure Gray): │ │ Neutral gray background, no color tint │ │ │ │ darkAnchorChroma = 0.02 (Subtle Blue, default): │ │ Slight blue tint, professional appearance │ │ │ │ darkAnchorChroma = 0.05 (Noticeable Blue): │ │ Clear blue background, strong theme identity │ │ │ └─────────────────────────────────────────────────────────────────────────────────┘ ``` ## Theme Configuration Examples ### Monolex Night (Default Blue Theme) ```json theme={null} { "name": "monolex-night", "tintHue": 250, "tintStrength": 10, "tintChroma": 0.02, "darkAnchorHue": 250, "darkAnchorChroma": 0.02 } ``` **Effect**: Subtle blue harmony across all colors. ### Solarized Dark (Yellow-Green Accent) ```json theme={null} { "name": "solarized-dark", "tintHue": 200, "tintStrength": 15, "tintChroma": 0.03, "darkAnchorHue": 200, "darkAnchorChroma": 0.03 } ``` **Effect**: Warmer cyan undertone with more visible tinting. ### Dracula (No Tinting) ```json theme={null} { "name": "dracula", "tintHue": 250, "tintStrength": 0, "tintChroma": 0, "darkAnchorHue": 250, "darkAnchorChroma": 0.02 } ``` **Effect**: Pure palette colors, no tint overlay (strength=0 bypasses blend). ## Parameter Quick Reference | Parameter | Range | Default | Purpose | | ---------------- | ------------- | ------- | --------------------- | | tintHue | 0-360 degrees | 250 | Tint color direction | | tintStrength | 0-100% | 10% | Tint intensity | | tintChroma | 0-0.4 | 0.02 | Tint saturation | | darkAnchorHue | 0-360 degrees | 250 | Hue Warp reference | | darkAnchorChroma | 0-0.4 | 0.02 | Background saturation | ## THE CENTER ### How These Parameters Help Humans Parse Information The tint parameters directly serve Core-Flow's mission of using color to help humans navigate information streams. ``` Connection to Core-Flow: ├── tintHue: Establishes immediate visual identity │ → Users recognize "their" terminal instantly ├── tintStrength: Balances harmony vs. information preservation │ → 10% default preserves source color semantics ├── tintChroma: Controls visual energy level │ → Low values reduce fatigue, high values energize └── Anchor parameters: Define the "gravity well" of the color space → Creates natural grouping of related colors ``` The recommended defaults (tintHue=250, tintStrength=10%, tintChroma=0.02) were chosen through extensive testing to maximize readability while providing a cohesive visual identity. *** Learn about Anchor Pull and the Hue Warp compression algorithm