Static vs Dynamic Gradients
┌────────────────────────────────────────────────────────────────────────────────┐
│ STATIC VS DYNAMIC GRADIENTS │
├────────────────────────────────────────────────────────────────────────────────┤
│ │
│ Static Gradients: │
│ ═════════════════ │
│ │
│ Defined at build time or in CSS: │
│ background: linear-gradient(in oklab to right, blue, green); │
│ │
│ Pros: │
│ - No JavaScript needed │
│ - GPU accelerated │
│ - Cached by browser │
│ │
│ Cons: │
│ - Cannot change based on runtime data │
│ - Fixed color stops │
│ │
├────────────────────────────────────────────────────────────────────────────────┤
│ │
│ Dynamic Gradients: │
│ ══════════════════ │
│ │
│ Generated at runtime based on data: │
│ │
│ const colors = getUserColors(); │
│ element.style.background = createGradient(colors); │
│ │
│ Pros: │
│ - Data-driven color stops │
│ - User customizable │
│ - Responsive to state changes │
│ │
│ Cons: │
│ - Requires JavaScript │
│ - Must update DOM │
│ - More complex │
│ │
└────────────────────────────────────────────────────────────────────────────────┘
Use Cases for Dynamic Gradients
┌────────────────────────────────────────────────────────────────────────────────┐
│ DYNAMIC GRADIENT USE CASES │
├────────────────────────────────────────────────────────────────────────────────┤
│ │
│ 1. Theme-Responsive Gradients │
│ ══════════════════════════════ │
│ - Gradient colors change with theme │
│ - Light mode vs dark mode adjustments │
│ - User-selected accent colors │
│ │
│ 2. Data Visualization │
│ ═════════════════════ │
│ - Heatmaps with variable data ranges │
│ - Progress indicators │
│ - Timeline visualizations │
│ │
│ 3. Agent/Terminal Color Strips │
│ ══════════════════════════════ │
│ - Each agent has unique color │
│ - Gradient shows all active agents │
│ - Updates as agents are added/removed │
│ │
│ 4. File Type Distribution │
│ ═════════════════════════ │
│ - Gradient of files in project │
│ - Shows language distribution │
│ │
│ 5. Git Branch Visualization │
│ ══════════════════════════ │
│ - Dynamic branch colors │
│ - Merge line colors │
│ - Branch relationship indicators │
│ │
└────────────────────────────────────────────────────────────────────────────────┘
Core Utility Functions
Formatting OKLCH as CSS
┌───────────────────────────────────────────────────────────────────────┐
│ toOklchCSS() - OKLCH Object to CSS String │
├───────────────────────────────────────────────────────────────────────┤
│ │
│ INPUT: { l: 55, c: 0.15, h: 230 } │
│ │ │ │ │
│ V V V │
│ FORMAT: L.00% C.000 H.00 │
│ │ │ │ │
│ V V V │
│ OUTPUT: "oklch(55.00% 0.150 230.00)" │
│ │
└───────────────────────────────────────────────────────────────────────┘
function toOklchCSS(oklch: { l: number; c: number; h: number }): string {
return `oklch(${oklch.l.toFixed(2)}% ${oklch.c.toFixed(3)} ${oklch.h.toFixed(2)})`;
}
Generating Harmonious Palettes
┌───────────────────────────────────────────────────────────────────────┐
│ generatePalette() - Create Harmonious Color Palette │
├───────────────────────────────────────────────────────────────────────┤
│ │
│ INPUTS: │
│ baseOklch: Starting color { l, c, h } │
│ count: Number of colors to generate │
│ angleStep: Hue rotation per color (default: 30°) │
│ │
│ ALGORITHM: │
│ for i = 0 to count-1: │
│ │ │
│ └──► palette[i].h = (baseOklch.h + i × angleStep) % 360 │
│ L and C stay constant │
│ │
│ EXAMPLE (base H=0, count=4, step=30): │
│ ┌────────────────────────────────────────────────────┐ │
│ │ i=0: H = (0 + 0×30) % 360 = 0 (red) │ │
│ │ i=1: H = (0 + 1×30) % 360 = 30 (orange) │ │
│ │ i=2: H = (0 + 2×30) % 360 = 60 (yellow) │ │
│ │ i=3: H = (0 + 3×30) % 360 = 90 (yellow-green) │ │
│ └────────────────────────────────────────────────────┘ │
│ │
│ GOLDEN ANGLES: 137.5° (max separation), 27.5° (agent harmony) │
│ │
└───────────────────────────────────────────────────────────────────────┘
const GOLDEN_ANGLE = 137.5;
const AGENT_GOLDEN_ANGLE = 27.5;
function generatePalette(
baseOklch: { l: number; c: number; h: number },
count: number,
angleStep: number = 30
): { l: number; c: number; h: number }[] {
const palette = [];
for (let i = 0; i < count; i++) {
palette.push({
l: baseOklch.l,
c: baseOklch.c,
h: (baseOklch.h + i * angleStep) % 360,
});
}
return palette;
}
Building Gradient Strings
┌───────────────────────────────────────────────────────────────────────┐
│ createLinearGradient() - Build CSS Gradient String │
├───────────────────────────────────────────────────────────────────────┤
│ │
│ INPUTS: │
│ colors: Array of OKLCH colors │
│ direction: Gradient direction (default: "to right") │
│ space: Interpolation space (oklab │ oklch, default: oklab) │
│ │
│ EDGE CASES: │
│ colors.length = 0 → "transparent" │
│ colors.length = 1 → toOklchCSS(colors[0]) │
│ │
│ ALGORITHM (for N colors): │
│ ┌────────────────────────────────────────────────────────────────┐ │
│ │ for each color[i]: │ │
│ │ percentage = (i / (N-1)) × 100 │ │
│ │ stop = "{oklch(...)} {percentage}%" │ │
│ │ │ │
│ │ 4 colors → 0%, 33.3%, 66.7%, 100% │ │
│ └────────────────────────────────────────────────────────────────┘ │
│ │
│ OUTPUT: │
│ "linear-gradient(in {space} {direction}, {stop1}, {stop2}, ...)" │
│ │
└───────────────────────────────────────────────────────────────────────┘
function createLinearGradient(
colors: { l: number; c: number; h: number }[],
direction: string = "to right",
space: "oklab" | "oklch" = "oklab"
): string {
if (colors.length === 0) return "transparent";
if (colors.length === 1) return toOklchCSS(colors[0]);
const colorStops = colors.map((c, i) => {
const percentage = (i / (colors.length - 1)) * 100;
return `${toOklchCSS(c)} ${percentage.toFixed(1)}%`;
}).join(", ");
return `linear-gradient(in ${space} ${direction}, ${colorStops})`;
}
// Usage
const agentColors = [
{ l: 55, c: 0.15, h: 27.5 },
{ l: 55, c: 0.15, h: 55 },
{ l: 55, c: 0.15, h: 82.5 },
{ l: 55, c: 0.15, h: 110 },
];
const gradient = createLinearGradient(agentColors, "to right", "oklab");
// "linear-gradient(in oklab to right, oklch(55.00% 0.150 27.50) 0.0%, ...)"
Multi-Stop Gradient Patterns
┌────────────────────────────────────────────────────────────────────────────────┐
│ MULTI-STOP GRADIENT PATTERNS │
├────────────────────────────────────────────────────────────────────────────────┤
│ │
│ Pattern 1: Even Distribution │
│ ════════════════════════════ │
│ │
│ 4 colors: 0%, 33.3%, 66.7%, 100% │
│ │
│ ┌───────────┬───────────┬───────────┬───────────┐ │
│ │ Color 1 │ Color 2 │ Color 3 │ Color 4 │ │
│ │ 0% │ 33.3% │ 66.7% │ 100% │ │
│ └───────────┴───────────┴───────────┴───────────┘ │
│ │
│ Code: │
│ linear-gradient(in oklab to right, │
│ oklch(55% 0.15 27.5) 0%, │
│ oklch(55% 0.15 55) 33.3%, │
│ oklch(55% 0.15 82.5) 66.7%, │
│ oklch(55% 0.15 110) 100% │
│ ) │
│ │
├────────────────────────────────────────────────────────────────────────────────┤
│ │
│ Pattern 2: Weighted Distribution │
│ ════════════════════════════════ │
│ │
│ Emphasize certain colors: │
│ │
│ ┌────┬──────────────────┬──────────────────┬────┐ │
│ │ C1 │ C2 │ C3 │ C4 │ │
│ │ 10%│ 40% │ 40% │ 10%│ │
│ └────┴──────────────────┴──────────────────┴────┘ │
│ │
│ Code: │
│ linear-gradient(in oklab to right, │
│ oklch(55% 0.15 27.5) 0%, │
│ oklch(55% 0.15 27.5) 10%, /* Hold color 1 */ │
│ oklch(55% 0.15 55) 50%, /* Center blend */ │
│ oklch(55% 0.15 110) 90%, /* Approach end */ │
│ oklch(55% 0.15 110) 100% /* Hold color 4 */ │
│ ) │
│ │
└────────────────────────────────────────────────────────────────────────────────┘
Performance Optimization
┌────────────────────────────────────────────────────────────────────────────────┐
│ PERFORMANCE COMPARISON │
├────────────────────────────────────────────────────────────────────────────────┤
│ │
│ CSS Native (recommended for static/semi-dynamic): │
│ ═════════════════════════════════════════════════ │
│ │
│ .element { │
│ background: linear-gradient(in oklab, var(--color-a), var(--color-b)); │
│ } │
│ │
│ Performance: │
│ - Compositing on GPU │
│ - Automatic caching │
│ - Animatable via CSS transitions │
│ - ~16ms frame budget easily met │
│ │
│ Change colors by updating CSS variables: │
│ document.documentElement.style.setProperty('--color-a', 'oklch(...)'); │
│ │
├────────────────────────────────────────────────────────────────────────────────┤
│ │
│ JavaScript Calculation (for complex dynamic): │
│ ═════════════════════════════════════════════ │
│ │
│ function updateGradient() { │
│ const colors = getActiveAgentColors(); │
│ element.style.background = createGradient(colors); │
│ } │
│ │
│ Performance concerns: │
│ - String concatenation (minimize with template literals) │
│ - DOM style update (batch updates) │
│ - Reflow/repaint (use will-change) │
│ - Call frequency (debounce if rapid changes) │
│ │
└────────────────────────────────────────────────────────────────────────────────┘
Optimization Strategies
┌────────────────────────────────────────────────────────────────────────────────┐
│ OPTIMIZATION STRATEGIES │
├────────────────────────────────────────────────────────────────────────────────┤
│ │
│ 1. Batch Updates │
│ ════════════════ │
│ │
│ Bad: │
│ colors.forEach(c => element.style.background += ...); │
│ │
│ Good: │
│ const gradient = colors.map(c => ...).join(','); │
│ element.style.background = `linear-gradient(in oklab, ${gradient})`; │
│ │
├────────────────────────────────────────────────────────────────────────────────┤
│ │
│ 2. Debounce Rapid Changes │
│ ═════════════════════════ │
│ │
│ let pending = null; │
│ function scheduleUpdate() { │
│ if (pending) cancelAnimationFrame(pending); │
│ pending = requestAnimationFrame(() => { │
│ updateGradient(); │
│ pending = null; │
│ }); │
│ } │
│ │
├────────────────────────────────────────────────────────────────────────────────┤
│ │
│ 3. Cache Generated Strings │
│ ══════════════════════════ │
│ │
│ const gradientCache = new Map(); │
│ │
│ function getCachedGradient(colors) { │
│ const key = JSON.stringify(colors); │
│ if (!gradientCache.has(key)) { │
│ gradientCache.set(key, createGradient(colors)); │
│ } │
│ return gradientCache.get(key); │
│ } │
│ │
├────────────────────────────────────────────────────────────────────────────────┤
│ │
│ 4. Use CSS Custom Properties │
│ ════════════════════════════ │
│ │
│ Instead of updating the gradient itself: │
│ element.style.setProperty('--gradient-end', newColor); │
│ │
│ Let CSS handle the gradient: │
│ background: linear-gradient(var(--gradient-start), var(--gradient-end)); │
│ │
└────────────────────────────────────────────────────────────────────────────────┘
Gradient Animation
CSS-Only Hue Rotation
@property --hue-offset {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}
@keyframes rotate-hue {
from { --hue-offset: 0deg; }
to { --hue-offset: 360deg; }
}
.animated-gradient {
animation: rotate-hue 10s linear infinite;
background: linear-gradient(
in oklch to right,
oklch(55% 0.15 calc(230 + var(--hue-offset))),
oklch(55% 0.15 calc(130 + var(--hue-offset)))
);
}
JavaScript Fallback
┌───────────────────────────────────────────────────────────────────────┐
│ animateGradientHue() - Animated Hue Rotation via JS │
├───────────────────────────────────────────────────────────────────────┤
│ │
│ INPUTS: │
│ element: HTMLElement to apply gradient to │
│ baseHue: Starting hue angle │
│ │
│ ANIMATION LOOP: │
│ ┌────────────────────────────────────────────────────────────────┐ │
│ │ Each frame (requestAnimationFrame): │ │
│ │ │ │
│ │ 1. delta = currentTime - lastTime (ms) │ │
│ │ 2. offset += (delta/1000) × 36 (36°/sec = 10s full rotation) │ │
│ │ 3. startHue = (baseHue + offset) % 360 │ │
│ │ 4. endHue = (baseHue + 100 + offset) % 360 │ │
│ │ 5. Update element.style.background │ │
│ └────────────────────────────────────────────────────────────────┘ │
│ │
│ RESULT: Smooth continuous hue rotation at 36°/second │
│ │
└───────────────────────────────────────────────────────────────────────┘
function animateGradientHue(element: HTMLElement, baseHue: number) {
let offset = 0;
let lastTime = performance.now();
function tick(currentTime: number) {
const delta = currentTime - lastTime;
lastTime = currentTime;
// 36 degrees per second = 10 second rotation
offset = (offset + (delta / 1000) * 36) % 360;
const startHue = (baseHue + offset) % 360;
const endHue = (baseHue + 100 + offset) % 360;
element.style.background = `linear-gradient(
in oklab to right,
oklch(55% 0.15 ${startHue.toFixed(1)}),
oklch(55% 0.15 ${endHue.toFixed(1)})
)`;
requestAnimationFrame(tick);
}
requestAnimationFrame(tick);
}
Radial and Conic Gradients
Radial Gradient Builder
┌───────────────────────────────────────────────────────────────────────┐
│ createRadialGradient() - Build CSS Radial Gradient │
├───────────────────────────────────────────────────────────────────────┤
│ │
│ INPUTS: │
│ centerColor: OKLCH color at center │
│ edgeColor: OKLCH color at edges │
│ shape: "circle" │ "ellipse" (default: circle) │
│ position: Gradient center (default: "center") │
│ space: Interpolation space (default: oklab) │
│ │
│ OUTPUT FORMAT: │
│ "radial-gradient(in {space} {shape} at {position}, {center}, {edge})"│
│ │
│ VISUAL: │
│ ┌───────────┐ │
│ │ ... │ ... = edge color │
│ │ . . │ ### = center color │
│ │. ### . │ │
│ │ . . │ Color transitions smoothly │
│ │ ... │ from center to edge │
│ └───────────┘ │
│ │
└───────────────────────────────────────────────────────────────────────┘
function createRadialGradient(
centerColor: { l: number; c: number; h: number },
edgeColor: { l: number; c: number; h: number },
shape: "circle" | "ellipse" = "circle",
position: string = "center",
space: "oklab" | "oklch" = "oklab"
): string {
return `radial-gradient(in ${space} ${shape} at ${position}, ` +
`${toOklchCSS(centerColor)}, ` +
`${toOklchCSS(edgeColor)}` +
`)`;
}
// Focus ring effect
const focusRing = createRadialGradient(
{ l: 55, c: 0.15, h: 230 },
{ l: 0, c: 0, h: 0 },
"circle",
"center"
);
Conic Gradient Color Wheel
┌───────────────────────────────────────────────────────────────────────┐
│ createColorWheel() - Build Perceptually Uniform Color Wheel │
├───────────────────────────────────────────────────────────────────────┤
│ │
│ INPUTS: │
│ lightness: L value for all colors (default: 65%) │
│ chroma: C value for all colors (default: 0.15) │
│ steps: Number of color segments (default: 12) │
│ │
│ ALGORITHM: │
│ for i = 0 to steps: │
│ hue = (i / steps) × 360 │
│ colors.push("oklch({L}% {C} {hue})") │
│ │
│ EXAMPLE (steps=12): │
│ ┌────────────────────────────────────────────────────────────────┐ │
│ │ i=0: H = 0 (red) i=6: H = 180 (cyan) │ │
│ │ i=1: H = 30 (orange) i=7: H = 210 (blue-cyan) │ │
│ │ i=2: H = 60 (yellow) i=8: H = 240 (blue) │ │
│ │ i=3: H = 90 (yellow-grn) i=9: H = 270 (violet) │ │
│ │ i=4: H = 120 (green) i=10: H = 300 (magenta) │ │
│ │ i=5: H = 150 (cyan-grn) i=11: H = 330 (pink) │ │
│ │ i=12: H = 360 (red, closes loop) │ │
│ └────────────────────────────────────────────────────────────────┘ │
│ │
│ OUTPUT: "conic-gradient(in oklch from 0deg, {color1}, {color2},...)" │
│ │
└───────────────────────────────────────────────────────────────────────┘
function createColorWheel(
lightness: number = 65,
chroma: number = 0.15,
steps: number = 12
): string {
const colors: string[] = [];
for (let i = 0; i <= steps; i++) {
const hue = (i / steps) * 360;
colors.push(`oklch(${lightness}% ${chroma} ${hue.toFixed(1)})`);
}
return `conic-gradient(in oklch from 0deg, ${colors.join(', ')})`;
}
┌────────────────────────────────────────────────────────────────────────────────┐
│ CONIC GRADIENT COLOR WHEEL │
├────────────────────────────────────────────────────────────────────────────────┤
│ │
│ 0deg (Red) │
│ │ │
│ . ─ ─ ─ ┼ ─ ─ ─ . │
│ . ' 30 │ 330 ' . │
│ .' │ '. │
│ / 60 │ 300 \ │
│ / │ \ │
│ 90 ────────────────┼────────────────270 │
│ \ │ / │
│ \ 120 │ 240 / │
│ '. │ .' │
│ ' . 150 │ 210 . ' │
│ ' ─ ─ ─ ┼ ─ ─ ─ ' │
│ │ │
│ 180deg │
│ │
│ All segments have EQUAL LIGHTNESS and CHROMA │
│ This creates a perceptually uniform color wheel. │
│ │
└────────────────────────────────────────────────────────────────────────────────┘
Practical Examples
Agent Color Strip
┌───────────────────────────────────────────────────────────────────────┐
│ createAgentStrip() - Multi-Agent Color Gradient │
├───────────────────────────────────────────────────────────────────────┤
│ │
│ INPUTS: │
│ agentIds: Array of agent IDs (used for count, not values) │
│ isDark: Theme mode flag │
│ │
│ ALGORITHM: │
│ ┌────────────────────────────────────────────────────────────────┐ │
│ │ if empty → return "transparent" │ │
│ │ │ │
│ │ for each agent[i]: │ │
│ │ hue = (180 + (i+1) × 27.5) % 360 (golden angle) │ │
│ │ L = isDark ? 70 : 40 │ │
│ │ C = 0.10 (fixed) │ │
│ │ │ │
│ │ return createLinearGradient(colors, "to right", "oklab") │ │
│ └────────────────────────────────────────────────────────────────┘ │
│ │
│ EXAMPLE (4 agents, dark mode): │
│ Agent 0: H = 207.5 (blue-cyan) │
│ Agent 1: H = 235.0 (blue) │
│ Agent 2: H = 262.5 (blue-violet) │
│ Agent 3: H = 290.0 (violet) │
│ │
└───────────────────────────────────────────────────────────────────────┘
function createAgentStrip(agentIds: number[], isDark: boolean): string {
if (agentIds.length === 0) return "transparent";
const colors = agentIds.map((id, i) => {
const hue = (180 + (i + 1) * 27.5) % 360;
const lightness = isDark ? 70 : 40;
return { l: lightness, c: 0.10, h: hue };
});
return createLinearGradient(colors, "to right", "oklab");
}
// Usage
const activeAgents = [101, 102, 103, 107];
const isDark = document.body.classList.contains('theme-dark');
const gradient = createAgentStrip(activeAgents, isDark);
document.querySelector('.agent-strip').style.background = gradient;
File Type Distribution Bar
┌────────────────────────────────────────────────────────────────────────┐
│ createFileDistributionBar() - Proportional File Type Gradient │
├────────────────────────────────────────────────────────────────────────┤
│ │
│ INPUT: Array of { extension, count, hue } │
│ │
│ ALGORITHM: │
│ ┌────────────────────────────────────────────────────────────────┐ │
│ │ 1. total = sum of all counts │ │
│ │ 2. for each file type: │ │
│ │ percentage = (count / total) × 100 │ │
│ │ add stop at position% (color start) │ │
│ │ position += percentage │ │
│ │ add stop at position% (color end = hard edge) │ │
│ └────────────────────────────────────────────────────────────────┘ │
│ │
│ EXAMPLE (ts:45, js:20, css:15, json:10, md:10): │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │████████████████████│█████████│███████│█████│█████│ │ │
│ │ ts (45%) │ js(20%) │css(15)│json │ md │ │ │
│ │ blue │ yellow │purple │yel │green│ │ │
│ └──────────────────────────────────────────────────────────────┘ │
│ │
│ HARD EDGES: Same color at start and end of segment = no blending │
│ │
└────────────────────────────────────────────────────────────────────────┘
interface FileTypeCount {
extension: string;
count: number;
hue: number;
}
function createFileDistributionBar(files: FileTypeCount[]): string {
const total = files.reduce((sum, f) => sum + f.count, 0);
if (total === 0) return "transparent";
const stops: string[] = [];
let position = 0;
files.forEach(file => {
const percentage = (file.count / total) * 100;
const color = `oklch(55% 0.15 ${file.hue})`;
stops.push(`${color} ${position.toFixed(1)}%`);
position += percentage;
stops.push(`${color} ${position.toFixed(1)}%`);
});
return `linear-gradient(in oklab to right, ${stops.join(', ')})`;
}
// Usage
const files = [
{ extension: 'ts', count: 45, hue: 230 },
{ extension: 'js', count: 20, hue: 55 },
{ extension: 'css', count: 15, hue: 240 },
{ extension: 'json', count: 10, hue: 50 },
{ extension: 'md', count: 10, hue: 100 },
];
const bar = createFileDistributionBar(files);
Theme Integration
┌───────────────────────────────────────────────────────────────────────┐
│ THEME INTEGRATION - Auto-Update Gradients on Theme Change │
├───────────────────────────────────────────────────────────────────────┤
│ │
│ EVENT LISTENERS: │
│ ┌────────────────────────────────────────────────────────────────┐ │
│ │ "themechange" ──► updateGradients() │ │
│ │ "theme-changed" ──► updateGradients() │ │
│ │ MutationObserver (body class change) ──► updateGradients() │ │
│ └────────────────────────────────────────────────────────────────┘ │
│ │
│ updateGradients() FLOW: │
│ ┌────────────────────────────────────────────────────────────────┐ │
│ │ 1. Check isDark = body.classList.contains('theme-dark') │ │
│ │ 2. Adjust L/C values based on theme │ │
│ │ 3. Find all [data-gradient] elements │ │
│ │ 4. Regenerate each gradient with new theme values │ │
│ └────────────────────────────────────────────────────────────────┘ │
│ │
│ THEME VALUES: │
│ isDark = true → L = 65% (lighter colors on dark bg) │
│ isDark = false → L = 35% (darker colors on light bg) │
│ │
└───────────────────────────────────────────────────────────────────────┘
// Listen for theme changes
window.addEventListener("themechange", () => updateGradients());
window.addEventListener("theme-changed", () => updateGradients());
// Watch for body class changes
const observer = new MutationObserver(() => updateGradients());
observer.observe(document.body, {
attributes: true,
attributeFilter: ["class"],
});
function updateGradients() {
const isDark = document.body.classList.contains('theme-dark');
// Adjust L/C for dark vs light mode
const lightness = isDark ? 65 : 35;
const saturation = isDark ? 50 : 45;
// Regenerate all dynamic gradients
document.querySelectorAll('[data-gradient]').forEach(el => {
const gradientType = el.dataset.gradient;
el.style.background = generateGradient(gradientType, isDark);
});
}
THE CENTER
Dynamic Gradients as Data Visualization
Dynamic gradients bridge the gap between static design and responsive interfaces. When the number of agents changes, or when file types shift, the gradient updates to reflect the current state of the data.Connection to Core-Flow:
├── Core colors are computed at runtime (OKLCH)
├── Flow gradients interpolate between Cores (OKLAB)
├── Theme changes trigger regeneration
└── Performance optimizations keep it smooth
Core Colors
Return to Core Color definitions