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.Copy
+-------------------------------------------------------------------------+
| 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.Copy
+-------------------------------------------------------------------------+
| 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.Copy
+-------------------------------------------------------------------------+
| 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
Copy
+-------------------------------------------------------------------------+
| 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.Copy
+-------------------------------------------------------------------------+
| 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.Copy
+-------------------------------------------------------------------------+
| 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.Copy
+-------------------------------------------------------------------------+
| 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.Copy
+-------------------------------------------------------------------------+
| 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 | |
| +-----------------------------------------------------------+ |
| |
+-------------------------------------------------------------------------+
Copy
+-------------------------------------------------------------------------+
| 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.Copy
+-------------------------------------------------------------------------+
| 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