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).Copy
┌─────────────────────────────────────────────────────────────────────────────────┐
│ 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.Copy
┌─────────────────────────────────────────────────────────────────────────────────┐
│ 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
Theblend_hue function uses the shortest path around the color wheel:
Copy
┌───────────────────────────────────────────────────────────────────────┐
│ 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) │
│ │
└───────────────────────────────────────────────────────────────────────┘
Copy
fn blend_hue(source_hue: f32, tint_hue: f32, strength: f32) -> f32 {
if strength == 0.0 {
return source_hue;
}
// Calculate shortest path around the circle
let mut delta = tint_hue - source_hue;
// Wrap to [-180, 180]
while delta > 180.0 { delta -= 360.0; }
while delta < -180.0 { delta += 360.0; }
// Blend by strength percentage
let blended = source_hue + delta * strength;
// Normalize to [0, 360)
blended.rem_euclid(360.0)
}
tintStrength Parameter
Controls how much the tint color influences the output.Copy
┌─────────────────────────────────────────────────────────────────────────────────┐
│ 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.Copy
┌─────────────────────────────────────────────────────────────────────────────────┐
│ 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
Copy
┌─────────────────────────────────────────────────────────────────────────────────┐
│ 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
Copy
┌─────────────────────────────────────────────────────────────────────────────────┐
│ 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.Copy
┌─────────────────────────────────────────────────────────────────────────────────┐
│ 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)
Copy
{
"name": "monolex-night",
"tintHue": 250,
"tintStrength": 10,
"tintChroma": 0.02,
"darkAnchorHue": 250,
"darkAnchorChroma": 0.02
}
Solarized Dark (Yellow-Green Accent)
Copy
{
"name": "solarized-dark",
"tintHue": 200,
"tintStrength": 15,
"tintChroma": 0.03,
"darkAnchorHue": 200,
"darkAnchorChroma": 0.03
}
Dracula (No Tinting)
Copy
{
"name": "dracula",
"tintHue": 250,
"tintStrength": 0,
"tintChroma": 0,
"darkAnchorHue": 250,
"darkAnchorChroma": 0.02
}
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.Copy
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
Hue Warp Algorithm
Learn about Anchor Pull and the Hue Warp compression algorithm