Color Gradients and Interpolation
A gradient looks simple: draw a line between two colors and fill the gap. But the gap has no single answer. The color space, transfer function, hue path, stop placement, bit depth, and dither strategy all decide what appears between the endpoints.
What a gradient really is
A gradient is a function of position that returns a color. Give it a fraction t from 0 to 1 and it answers: what color lives here? The obvious formula is a linear interpolation, but that formula only has meaning inside a specific coordinate system. Change the space and the midpoint changes.
The space decides everything
Pick two endpoint colors and watch the same blend computed six ways. Opposite saturated hues show the problem clearly: gamma sRGB cuts through dull low-chroma territory, while perceptual spaces preserve a more intentional path.
The same two colors, interpolated six ways
Try blue to yellow, red to green, and magenta to cyan. The midpoint is the diagnostic: dull, too dark, uneven, clipped, or perceptually steady.
Gamma vs linear blending
sRGB numbers are gamma encoded for storage and display. They are not proportional to physical light. If you average encoded numbers directly, bright mixtures come out too dark. The physical recipe is: decode to linear light, blend, encode back to sRGB.
Blend bright complements in gamma sRGB vs linear light
The top bar averages encoded sRGB values. The bottom bar averages linear-light values. Glows, compositing, blurs, and physically plausible lighting need the bottom behavior.
Hue paths in cylindrical spaces
HSL and OKLCH express hue as an angle. Angles wrap. From 20 degrees to 300 degrees you can go the short way backward or the long way forward. CSS now exposes this choice with shorter, longer, increasing, and decreasing hue interpolation.
Same endpoints, different journey through hue
Drag the endpoints and quantize the steps. The short route keeps a gradient restrained; the long route can deliberately create a broad spectrum sweep.
Easing, stops, and position
Linear interpolation moves t at a constant rate. Real gradients often need the transition to happen sooner, later, or through a deliberate intermediate stop. Easing changes where the blend accelerates. A stop changes what the gradient passes through. A color hint moves the midpoint without adding a new color.
Banding and dithering
A mathematically smooth ramp can still look striped. Long subtle gradients may need more distinct levels than an 8-bit target can store. Dithering adds tiny structured variation so the eye averages adjacent levels back into a smooth transition.
Crush the bit depth, then dither it away
Lower the bit depth to force visible steps. Turn dithering on to scatter the thresholds and reduce visible stripes at normal viewing distance.
Advanced interpolation workbench
Real production gradients combine every issue at once: space, hue route, stop model, quantization, dithering, alpha over a surface, and export syntax. This lab lets you tune those variables together and inspect the result.
Build, audit, quantize, and export a production gradient
The main canvas shows your selected interpolation, a gamma-sRGB reference, a quantized output row, sample markers, and stop positions. The meters flag muddy midpoint risk, banding pressure, gamut pressure, contrast loss, and perceptual smoothness.
Sample
Waiting for sample...
Audit
Waiting for audit...
CSS output
linear-gradient(...)
Choosing a space
| Space | Strength | Weakness | Use for |
|---|---|---|---|
| Gamma sRGB | Fast, legacy default | Gray and dark middles | Short blends between similar colors |
| Linear sRGB | Physical light mixing | Still desaturates across hue | Compositing, blur, glow, lighting |
| HSL | Intuitive hue sweeps | Uneven lightness | Quick hue ramps and decorative rainbows |
| CIELAB | Perceptual distance | Can leave display gamut | Scientific ramps and analysis |
| OKLab | Modern perceptual cartesian blend | No direct hue-route knob | Smooth UI and generative palettes |
| OKLCH | Even lightness, stable chroma, hue control | Needs fallback for older stacks | Best default for interface gradients |
From theory to code
Modern CSS can name the interpolation space and hue route directly. Canvas and WebGL require you to do the same conversion manually: decode, convert, interpolate, gamut-map, quantize, and write pixels.
Pitfalls and gotchas
Test your understanding
Six questions on interpolation spaces, linear light, hue routes, and banding.
Quick check
Continue your journey
Gradients connect perceptual spaces, gamma, bit depth, and design systems. These articles go deeper into each piece.