Skip to main content

Gradient Comparison Tool

Why This Tool Exists

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

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.