Modern AI and tech products often use vivid gradients as visual identifiers - but not all gradients are created equal.
The traditional RGB colour space can produce muddy, desaturated midpoints when interpolating between colours. OKLCH (a perceptually uniform colour space) maintains vibrancy throughout the gradient, producing the crisp, professional results you see in products like ChatGPT, Anthropic Claude, and other AI interfaces.
This tool lets you compare RGB and OKLCH gradients side-by-side, helping designers and developers choose the right approach for their brand identity.
Practical Applications
Brand Identity - Ensuring your AI product’s gradient looks professional
Web Design - Choosing between CSS gradient methods
Technical Understanding - Seeing the difference between colour interpolation methods
We originally built this tool for a client demonstration and found it so useful that we’ve integrated these principles into our own site design and custom Zendesk applications. You’ll see OKLCH gradients used throughout the Deltastring brand and in the solutions we deliver to clients.
50%
Blended Gradient
#eb7824 (orange) → #111d30 (dark blue)
Reference: each interpolation on its own
RGB Linear Gradient
#eb7824 (orange) → #111d30 (dark blue)
OKLab Gradient
#eb7824 (orange) → #111d30 (dark blue)
OKLCH Gradient (shorter hue)
#eb7824 (orange) → #111d30 (dark blue)
OKLCH Gradient (longer hue)
#eb7824 (orange) → #111d30 (dark blue)
Note: The RGB gradient is linear in each of R, G, B — a straight line through the RGB cube,
which usually crosses a muddy low-saturation midpoint.
The OKLab gradient is linear in L, a, b — a straight line through perceptual space; better steps,
but still passes near the neutral axis for hue-opposite pairs.
The OKLCH gradients are linear in L and chroma but rotate the hue around the wheel, so the path
arcs around the neutral axis and keeps the midtones vivid. "Shorter hue" takes the short way
round (the CSS default); "longer hue" takes the long way and runs through completely different
midtones. The blended bar stacks an OKLCH layer at alpha=weight over the RGB layer — CSS does
the weighted average per pixel. OKLab/OKLCH may not be supported in all browsers.
Made by Deltastring. We're a Zendesk platform-engineering studio, and we build Deltastring, a configuration-management platform for Zendesk. This tool started as a client demo we couldn't bring ourselves to delete. If Zendesk is part of your world, have a look at what we do.
