What is Hue Inheritance?
Every color in your terminal can inherit some of the theme’s anchor hue. This creates visual unity - everything feels like it belongs together.┌─────────────────────────────────────────────────────────────────────────┐
│ HUE INHERITANCE CONCEPT │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ Theme Anchor Hue: 250 deg (Blue) │
│ │
│ Original Colors After Inheritance │
│ =============== ================= │
│ │
│ Background │
│ [ Gray ] #1a1a1a --80%--> [ Blue-gray ] #1a1a2e │
│ │
│ Text │
│ [ Gray ] #f0f0f0 --100%--> [Blue-white ] #e8e8f8 │
│ │
│ Border │
│ [ Gray ] #404040 --18%--> [ Hint-blue ] #3e3e44 │
│ │
│ ANSI Red │
│ [ Red ] #ff0000 --8%--> [ Red ] #fd0008 │
│ (Almost unchanged - semantic meaning preserved) │
│ │
└─────────────────────────────────────────────────────────────────────────┘
The Inheritance Pipeline
Each UI element goes through a two-step process to receive its final color.┌─────────────────────────────────────────────────────────────────────────┐
│ HUE INHERITANCE PIPELINE │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ INPUT: Base colors (background, text) │
│ Anchor hue (theme identity) │
│ Inherit ratio (how much to inherit) │
│ │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ STEP 1: BASE MIXING │ │
│ │ ===================== │ │
│ │ │ │
│ │ Mix background and text in OKLAB space │ │
│ │ (This determines lightness and base saturation) │ │
│ │ │ │
│ │ bg-secondary = 96% bg + 4% text │ │
│ │ bg-tertiary = 92% bg + 8% text │ │
│ │ │ │
│ │ Why OKLAB? Perceptually uniform = no muddy colors │ │
│ │ │ │
│ └─────────────────────────────┬─────────────────────────────┘ │
│ │ │
│ v │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ STEP 2: HUE INJECTION │ │
│ │ ===================== │ │
│ │ │ │
│ │ Blend the mixed color's hue toward anchor hue │ │
│ │ (This adds theme identity) │ │
│ │ │ │
│ │ new_hue = original_hue * (1 - inherit) │ │
│ │ + anchor_hue * inherit │ │
│ │ │ │
│ │ Example (80% inherit): │ │
│ │ new_hue = original * 0.20 + anchor * 0.80 │ │
│ │ = Gray hue * 0.20 + Blue(250) * 0.80 │ │
│ │ = Mostly blue with hint of original │ │
│ │ │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
│ OUTPUT: Color with theme identity │
│ │
└─────────────────────────────────────────────────────────────────────────┘
The Pure Black Problem
Pure black (#000000) has no hue to blend. It needs special handling.┌─────────────────────────────────────────────────────────────────────────┐
│ THE PURE BLACK PROBLEM │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ Pure black: #000000 │
│ │ │
│ v │
│ OKLAB: L=0, a=0, b=0 │
│ │ │
│ v │
│ OKLCH: L=0, C=0, H=??? │
│ │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ PROBLEM: When Chroma is 0, Hue is undefined! │ │
│ │ │ │
│ │ Hue = atan2(b, a) = atan2(0, 0) = ??? │ │
│ │ │ │
│ │ You can't blend toward anchor hue if there's no hue │ │
│ │ to start with. │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
│ After OKLAB mixing with text: │
│ mix(#000000, #f0f0f0, 4%) = #0d0d0d │
│ │ │
│ v │
│ OKLCH: L=0.05, C~0, H=still undefined │
│ │
│ Still no usable hue to blend! │
│ │
└─────────────────────────────────────────────────────────────────────────┘
The Solution: Chroma Boost
┌─────────────────────────────────────────────────────────────────────────┐
│ SOLUTION: CHROMA BOOST │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ When chroma is near zero, we inject the anchor hue directly │
│ and add a small amount of chroma. │
│ │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ if chroma is near zero: │ │
│ │ new_hue = anchor_hue (direct injection) │ │
│ │ new_chroma = base_chroma + chroma_boost │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
│ Example (monolex-darknight theme): │
│ │
│ Background: #000000 (pure black) │
│ Anchor hue: 250 deg (Blue) │
│ Chroma boost: 0.012 │
│ │
│ Result for bg-secondary: │
│ - L = 0.05 (from base mixing) │
│ - C = 0.012 (injected) │
│ - H = 250 deg (anchor, directly assigned) │
│ │
│ Final: Very dark background with subtle blue tint │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Text Inheritance
Text typically uses 100% inheritance for strong visual unity.┌─────────────────────────────────────────────────────────────────────────┐
│ TEXT HUE INHERITANCE │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ text_hue_inherit = 100% (default) │
│ │
│ What this means: │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ new_hue = original_hue * 0.00 + anchor_hue * 1.00 │ │
│ │ = anchor_hue │ │
│ │ │ │
│ │ The text's hue completely matches the theme! │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
│ Lightness and Chroma are preserved for readability. │
│ Only Hue is unified. │
│ │
│ Example (Blue theme, anchor = 250 deg): │
│ │
│ ┌───────────────────┐ ┌───────────────────┐ │
│ │ coreLight │ │ text-primary │ │
│ │ #f0f0f0 │ │ Same brightness │ │
│ │ (neutral gray) │ │ Blue-tinted │ │
│ └───────────────────┘ └───────────────────┘ │
│ │ ^ │
│ └─── 100% hue inherit ───┘ │
│ │
│ All text levels share the same hue: │
│ - text-primary: Bright, blue-tinted │
│ - text-secondary: Medium, blue-tinted │
│ - text-tertiary: Dim, blue-tinted │
│ │
│ Result: Cohesive, unified text appearance │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Border Inheritance
Borders use lower inheritance to stay subtle.┌─────────────────────────────────────────────────────────────────────────┐
│ BORDER HUE INHERITANCE │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ border_hue_inherit = 18% (default) │
│ │
│ Why lower? │
│ - Borders are UI separators, not content │
│ - Too strong color is distracting │
│ - Gradual chroma increase expresses visual depth │
│ │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ Border Level │ Chroma │ Visual Effect │ │
│ ├──────────────────┼─────────┼─────────────────────────────────┤ │
│ │ border-primary │ 0.061 │ Subtle theme hint │ │
│ │ border-secondary │ 0.073 │ Slightly more visible │ │
│ │ border-light │ 0.085 │ Most visible theme color │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
│ Each level adds ~0.012 chroma, creating depth hierarchy. │
│ │
│ Visual representation: │
│ │
│ ┌───────────────────────────┐ │
│ │ Window │ <-- border-light (most visible) │
│ │ ┌─────────────────────┐ │ │
│ │ │ Panel │ │ <-- border-secondary │
│ │ │ ┌───────────────┐ │ │ │
│ │ │ │ Content │ │ │ <-- border-primary (subtle) │
│ │ │ └───────────────┘ │ │ │
│ │ └─────────────────────┘ │ │
│ └───────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────┘
ANSI Color Inheritance
ANSI colors carry semantic meaning. Low inheritance preserves this.┌─────────────────────────────────────────────────────────────────────────┐
│ ANSI HUE INHERITANCE │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ ANSI Type │ Inherit │ Why │ │
│ ├───────────┼─────────┼─────────────────────────────────────────┤ │
│ │ Normal │ 8% │ Slight theme hint, preserve meaning │ │
│ │ Bright │ 5% │ Already saturated, more sensitive │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
│ Terminal output with semantic colors: │
│ │
│ $ git status │
│ [GREEN] modified: src/app.rs <-- GREEN = staged │
│ [RED] deleted: old-file.txt <-- RED = deleted │
│ │
│ $ npm test │
│ [GREEN] 42 tests passed <-- GREEN = success │
│ [RED] 3 tests failed <-- RED = failure │
│ │
│ High inheritance would break this: │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ If ansiHueInherit = 80% (too high): │ │
│ │ │ │
│ │ Red (#ff0000) shifts toward blue --> becomes purple │ │
│ │ Green (#00ff00) shifts toward blue --> becomes cyan │ │
│ │ │ │
│ │ User can no longer distinguish success from failure! │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
│ With 8% inheritance: │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ Red stays red (92% original, 8% blue tint) │ │
│ │ Green stays green (92% original, 8% blue tint) │ │
│ │ │ │
│ │ Semantic meaning preserved, subtle theme harmony added │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Theme Strategy Comparison
Different themes use different inheritance strategies.┌─────────────────────────────────────────────────────────────────────────┐
│ INHERITANCE STRATEGY COMPARISON │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ Theme │ bg │ text │ border │ ansi │ Strategy │ │
│ ├──────────────────┼──────┼──────┼────────┼──────┼──────────┤ │
│ │ monolex-night │ 80% │ 100% │ 18% │ 8% │ Balanced │ │
│ │ monolex-darknight│ 100% │ 100% │ 20% │ 10% │ Strong │ │
│ │ monolex-forest │ 0% │ 100% │ 25% │ 15% │ Natural │ │
│ │ dracula │ 0% │ 100% │ 15% │ 8% │ Preserve │ │
│ │ solarized-dark │ 0% │ 100% │ 25% │ 12% │ Classic │ │
│ │ standard │ 0% │ 0% │ 0% │ 0% │ Pure │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────┐
│ STRATEGY PATTERN DETAILS │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ PATTERN A: Full Integration │
│ =========================== │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ Theme: monolex-night │ │
│ │ │ │
│ │ bgHueInherit: 80% Strong theme in background │ │
│ │ textHueInherit: 100% Fully unified text │ │
│ │ │ │
│ │ Result: Everything feels deeply connected │ │
│ │ Best for: Users who want strong theme immersion │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
│ PATTERN B: Selective │
│ =================== │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ Theme: monolex-forest │ │
│ │ │ │
│ │ bgHueInherit: 0% BG already green, don't double-apply │ │
│ │ textHueInherit: 100% Text unified with green theme │ │
│ │ │ │
│ │ Result: Natural green without overwhelming │ │
│ │ Best for: Themes with colored backgrounds │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
│ PATTERN C: Pure │
│ ============== │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ Theme: standard │ │
│ │ │ │
│ │ bgHueInherit: 0% No modification │ │
│ │ textHueInherit: 0% No modification │ │
│ │ ansiHueInherit: 0% No modification │ │
│ │ │ │
│ │ Result: Pure xterm-compatible colors │ │
│ │ Best for: Users who need exact color matching │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────┘
The Color Generation Cascade
Each color level builds on the previous through mixing and inheritance.┌─────────────────────────────────────────────────────────────────────────┐
│ COLOR GENERATION CASCADE │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ bg-primary: ############################################ │
│ coreDark (100% background, no processing) │
│ │
│ bg-secondary: ############################################── │
│ │ │ │
│ └── Mix: 96% bg + 4% text ───────── ┘ │
│ │ │
│ └── Hue: blend toward anchor (80%) │
│ │
│ bg-tertiary: ########################################──── │
│ │ │ │
│ └── Mix: 92% bg + 8% text ───────┘ │
│ │ │
│ └── Hue: blend toward anchor (80%) │
│ │ │
│ └── Tint: add tint overlay │
│ │
│ Each step: │
│ 1. OKLAB mixing determines lightness/saturation first │
│ 2. Hue inheritance adds theme identity after │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Key Takeaways
- Hue inheritance creates unity - All UI elements share the theme’s color identity
- Two-step process - OKLAB mixing for lightness, then hue blending for identity
- Pure black needs special handling - Chroma boost injects color directly
- ANSI colors need low inheritance - Semantic meaning (red=error) must be preserved
- Different strategies for different themes - Full integration vs. selective vs. pure
Einstein Arc
Learn how colors bend around the theme anchor