A color interpolation tool that picks the right color space for you
This color interpolation tool generates mathematically smooth transitions between any two colors and lets you compare the result side-by-side in four different color spaces — sRGB, HSL, LAB, and OKLCH. Instead of guessing why your gradient turns gray in the middle, you can see exactly which interpolation method preserves chroma, lightness, and hue for your specific endpoints.
The default interpolation behavior in CSS used to be sRGB, which produces muddy midpoints because sRGB is neither linear-light nor perceptually uniform. Modern CSS now defaults to Oklab and lets you opt into other spaces with in oklch, in lab, or in hsl inside linear-gradient() and color-mix().
When to use each interpolation color space
- OKLCH — best default for UI scales and decorative gradients. It interpolates lightness, chroma, and hue independently, which keeps midpoints saturated and the perceived brightness even.
- OKLAB / LAB — perceptually uniform like OKLCH but takes the straight rectangular path, so it avoids hue shifts when your two endpoints are close in hue.
- HSL — useful when you specifically want the rainbow sweep through intermediate hues, or when matching legacy stylesheets.
- sRGB — keep for compatibility checks or when you need to match a device-specific blend.
Export-ready output
Every interpolation produces a copyable CSS gradient with the explicit interpolation hint, a color-mix() expression for any single midpoint, and a HEX array you can paste into JavaScript or design tokens. A typical export looks like this:
background: linear-gradient(in oklch to right, #de72c6, #2dcde4);
color: color-mix(in oklch, #de72c6 30%, #2dcde4);Where this fits in your workflow
Use the interpolated steps as the foundation for a tint and shade scale, then drop the endpoints into the gradient generator for multi-stop CSS or the animated gradient generator to drive a keyframed transition. If you plan to use the midpoints as UI tokens, run the pairs through the contrast checker first to make sure body text still meets WCAG AA on every step.
Designers building data-viz palettes get the most out of OKLCH interpolation: fix the hue and chroma, vary lightness in even numerical steps, and every swatch reads as the same visual weight — no per-hue hand-tuning required.