What is the Tint System?
When applications output colors to your terminal, those colors need to match your theme. The Tint System transforms arbitrary colors in real-time while preserving their relationships.Copy
+-------------------------------------------------------------------------+
| |
| APPLICATION OUTPUT YOUR THEME |
| ================== ========== |
| |
| #FF0000 (Pure Red) --> #E06C75 (Soft Rose) |
| #00FF00 (Pure Green) --> #98C379 (Muted Sage) |
| #0000FF (Pure Blue) --> #61AFEF (Sky Blue) |
| |
| The colors change, but their relationships remain: |
| - Red is still "warm" |
| - Green is still "natural" |
| - Blue is still "cool" |
| |
+-------------------------------------------------------------------------+
The Transform Pipeline
Every color passes through seven transformation steps.Copy
+-------------------------------------------------------------------------+
| 7-STEP TRANSFORM PIPELINE |
+-------------------------------------------------------------------------+
| |
| INPUT: Any RGB Color (e.g., #FF5733 bright orange) |
| | |
| v |
| +------------------+ |
| | 1. COLOR SPACE | Convert to perceptually uniform space |
| | CONVERSION | RGB --> OKLAB (how humans see color) |
| +--------+---------+ |
| | |
| v |
| +------------------+ |
| | 2. POLAR FORM | Switch to angle-based representation |
| | | OKLAB --> OKLCH (Lightness, Chroma, Hue) |
| +--------+---------+ |
| | |
| v |
| +------------------+ |
| | 3. LIGHTNESS | Adjust brightness for theme contrast |
| | MAPPING | (Weber-Fechner perceptual scaling) |
| +--------+---------+ |
| | |
| v |
| +------------------+ |
| | 4. CHROMA | Scale saturation for theme harmony |
| | SCALING | (Reduce intensity slightly) |
| +--------+---------+ |
| | |
| v |
| +------------------+ |
| | 5. FRAME DRAG | Pull hue toward theme's tint color |
| | | (Like gravity pulling nearby objects) |
| +--------+---------+ |
| | |
| v |
| +------------------+ |
| | 6. EINSTEIN ARC | Redistribute complementary colors |
| | | (Bend colors around theme anchor) |
| +--------+---------+ |
| | |
| v |
| +------------------+ |
| | 7. OUTPUT | Convert back to displayable RGB |
| | CONVERSION | OKLAB --> RGB --> #E07055 |
| +------------------+ |
| |
| OUTPUT: Theme-harmonized color (#E07055 coral-red) |
| |
+-------------------------------------------------------------------------+
Physics Metaphors in Color
The Tint System borrows concepts from physics to make color transformation intuitive.Copy
+-------------------------------------------------------------------------+
| PHYSICS OF COLOR TRANSFORMATION |
+-------------------------------------------------------------------------+
| |
| FRAME DRAG (from rotating black holes) |
| ====================================== |
| |
| In space, a rotating massive object drags nearby space with it. |
| In color, the theme's tint color "drags" nearby colors toward it. |
| |
| ~~~~~~~~~~~~~~~~~~~~ |
| ~~~ ~~~ |
| ~~ Colors get pulled ~~ |
| ~ toward theme center ~ |
| ~ @@@@@@@ ~ |
| ~ @@ TINT @@ ~ |
| ~ @@@@@@@ ~ |
| ~ ~ |
| ~~ ~~ |
| ~~~ ~~~ |
| ~~~~~~~~~~~~~~~~~~~~ |
| |
| EINSTEIN ARC (from gravitational lensing) |
| ========================================= |
| |
| Light bends around massive objects in space. |
| Colors bend around the theme's anchor hue. |
| |
| Light rays |
| \ | / |
| \ | / |
| +------===------+ |
| | ANCHOR | <-- Theme's core color |
| | HUE | bends other colors |
| +------===------+ |
| / | \ |
| / | \ |
| Bent around |
| |
| CAUSTIC (from light convergence) |
| ================================ |
| |
| When light bends around an object, it converges at a bright spot. |
| In color, the "Caustic zone" is where complementary colors gather. |
| |
+-------------------------------------------------------------------------+
Two Coordinate Systems
Colors live in two different mathematical spaces, each suited for different operations.Copy
+-------------------------------------------------------------------------+
| TWO WAYS TO DESCRIBE COLOR |
+-------------------------------------------------------------------------+
| |
| POLAR SPACE (OKLCH) CARTESIAN SPACE (OKLAB) |
| =================== ====================== |
| |
| Like describing a point on Like describing a point on |
| a color wheel using: a flat grid using: |
| - Distance from center (Chroma) - Left-Right position (a axis) |
| - Angle around wheel (Hue) - Up-Down position (b axis) |
| - Height (Lightness) - Height (Lightness) |
| |
| Hue angle +b (yellow) |
| / | |
| ______/______ | |
| / @ \ | |
| | Chroma | -a ----+-------+-------+---- +a |
| \ radius / (green)| | |(red) |
| \__________/ | | |
| | |
| -b (blue) |
| |
| BEST FOR: BEST FOR: |
| - Defining colors (hue angle) - Smooth transitions |
| - User parameters (degrees) - Gradient calculations |
| - Identity operations - Preventing muddy colors |
| |
| Used in: Frame Drag, Einstein Arc Used in: Caustic gradient fill |
| (outside zone) (inside zone) |
| |
+-------------------------------------------------------------------------+
The Four Parameter Groups
The Tint System is controlled by four groups of parameters.Copy
+-------------------------------------------------------------------------+
| FOUR PARAMETER GROUPS |
+-------------------------------------------------------------------------+
| |
| +---------------------------+ +---------------------------+ |
| | GROUP 1: TINT | | GROUP 2: ANCHOR | |
| | (Global Color Overlay) | | (Theme Identity) | |
| +---------------------------+ +---------------------------+ |
| | | | | |
| | tintHue: 250 deg | | darkAnchorHue: 250 deg | |
| | (What color to blend) | | (Theme's "home" color) | |
| | | | | |
| | tintStrength: 10% | | darkAnchorChroma: 0.02 | |
| | (How much to blend) | | (Background saturation) | |
| | | | | |
| | tintChroma: 0.02 | +---------------------------+ |
| | (Tint saturation) | |
| +---------------------------+ |
| |
| +---------------------------+ +---------------------------+ |
| | GROUP 3: ARC | | GROUP 4: INHERIT | |
| | (Einstein Arc Settings) | | (Hue Inheritance) | |
| +---------------------------+ +---------------------------+ |
| | | | | |
| | causticComplementary: | | bgHueInherit: 80% | |
| | 60 deg (offset from | | (Background gets theme) | |
| | complementary color) | | | |
| | | | textHueInherit: 100% | |
| | causticWidth: 90 deg | | (Text fully themed) | |
| | (Size of Caustic zone) | | | |
| | | | ansiHueInherit: 8% | |
| | causticStrength: 10% | | (ANSI colors preserved) | |
| | (Compression intensity) | | | |
| | | +---------------------------+ |
| | causticMode: 2 | |
| | (Algorithm selection) | |
| +---------------------------+ |
| |
+-------------------------------------------------------------------------+
Performance Architecture
Color transforms happen thousands of times per second. Caching makes this fast.Copy
+-------------------------------------------------------------------------+
| PERFORMANCE ARCHITECTURE |
+-------------------------------------------------------------------------+
| |
| THEME LOAD (happens once when you switch themes) |
| ================================================ |
| |
| User Parameters Precomputed Cache |
| (degrees, %) --> (radians, ratios) |
| |
| tintHue: 250 deg --> tint_hue: 4.36 rad |
| tintStrength: 10% --> tint_strength: 0.10 |
| causticWidth: 90 deg --> caustic_width: 1.57 rad |
| |
| Time: ~10ms (one-time cost) |
| |
| COLOR TRANSFORM (happens for every color) |
| ========================================= |
| |
| Input Color |
| | |
| v |
| +----------------+ |
| | Check Cache |-----> HIT: Return cached result (<0.1 us) |
| +-------+--------+ |
| | |
| v MISS |
| +----------------+ |
| | Compute |-----> Store in cache |
| | Transform | |
| +----------------+ |
| | |
| v |
| Output Color (~1 us) |
| |
| Cache: 1024 recent colors (LRU eviction) |
| |
+-------------------------------------------------------------------------+
Data Flow Example
Watch a color transform step by step.Copy
+-------------------------------------------------------------------------+
| TRANSFORMING #FF5733 (BRIGHT ORANGE) |
+-------------------------------------------------------------------------+
| |
| INPUT: #FF5733 |
| |
| Step 1: RGB to OKLAB |
| #FF5733 --> L=0.68, a=0.18, b=0.14 |
| (Bright, red-ish, yellow-ish) |
| |
| Step 2: OKLAB to OKLCH |
| L=0.68, a=0.18, b=0.14 --> L=0.68, C=0.23, H=38 deg |
| (Brightness, Saturation, Orange-red hue) |
| |
| Step 3: Lightness Mapping |
| L=0.68 --> L=0.65 |
| (Slightly darker for theme contrast) |
| |
| Step 4: Chroma Scaling |
| C=0.23 --> C=0.19 |
| (Reduced saturation for harmony) |
| |
| Step 5: Frame Drag (tint toward blue 250 deg at 10%) |
| H=38 deg --> H=36 deg |
| (Slight shift toward theme's blue tint) |
| |
| Step 6: Einstein Arc |
| H=36 deg is OUTSIDE Caustic zone --> H=32 deg |
| (Expanded slightly as zone compressed) |
| |
| Step 7: Output |
| L=0.65, C=0.19, H=32 deg --> #E07055 |
| |
| OUTPUT: #E07055 (Theme-harmonized coral) |
| |
| Visual comparison: |
| Before: [#FF5733] Bright, sharp orange |
| After: [#E07055] Softer, theme-matched coral |
| |
+-------------------------------------------------------------------------+
Key Takeaways
- Colors transform in real-time - Every terminal color passes through the 7-step pipeline
- Physics metaphors explain behavior - Frame Drag pulls colors toward tint, Einstein Arc bends colors around anchor
- Two coordinate systems work together - Polar (OKLCH) for identity, Cartesian (OKLAB) for smooth transitions
- Parameters are human-friendly - Degrees and percentages, not radians and decimals
- Caching ensures performance - Less than 1 microsecond per cached transform
Parameters
Learn about the four parameter groups