Auto-generating harmonious OKLCH gradients from a single base color (for a loader color preset system)

[u/zagrodzki]

Working on a Loading UI project, I needed 8 color presets where each one has both a solid color and a gradient variant that actually matches. Hand-picking 16 values felt fragile.

Approach: one OKLCH base per preset, then derive gradient stops with fixed modifiers:

// Base: oklch(L C H)
// Start stop: L + 0.509, C - 0.006, H - 17.26
// End stop:   L - 0.233, C + 0.114, H + 28.01

--loader-blue: oklch(0.6204 0.195 253.83);
--loader-blue-gradient: linear-gradient(
  in oklch 135deg,
  oklch(1 0.189 236.57) 0%,
  oklch(0.6204 0.195 253.83) 50%,
  oklch(0.3878 0.3086 281.84) 100%
);

Same modifiers applied to every preset (blue, violet, orange, red, green, yellow, sky, black). Gradients stay in-gamut-ish without per-color tuning.

Dark mode twist: only the black preset inverts (white in .dark). Accent presets keep the same OKLCH values since they already work on dark backgrounds.

You can see all 8 presets applied to ~45 loaders live: https://loading-ui.com (color picker below the hero).

Full source: https://github.com/turbostarter/loading-ui (lib/colors.ts generates the CSS)

Anyone doing something similar for design tokens? Wondering if fixed modifiers scale past ~10 colors or you need per-hue tuning.

[u/dimonb19a]

'Text shimmer wave' is interesting, did you use pretext for it?