oklch Perceptual Gradient Builder
Gradients interpolated in sRGB often pass through muddy, desaturated midpoints. The
oklch color space interpolates perceptually, keeping transitions vivid and
even. Build, compare, and score gradients — then export CSS or PNG.
Tool interface
Preview & compare
Live (browser-rendered, in oklch)
Interpolated in oklch (Canvas)
Interpolated in sRGB (Canvas)
Generated CSS
Introduction
Modern CSS lets you choose the interpolation space with
linear-gradient(in oklch, …). This tool shows why that matters and gives
you a scored, exportable gradient.
How it works
- Stops are parsed (hex/rgb/hsl/oklch) and converted to OKLab/OKLCH.
- The gradient is interpolated in oklch and in sRGB, rendered side by side.
- A ΔE-variance score quantifies perceptual uniformity for each.
- CSS and PNG export use your chosen type, angle, and hue method.
Privacy
All color math and rendering is local. No upload, no account, no API key.
Limitations
- Browsers without
oklchfall back to rgb in the live preview (detected and reported). - Out-of-gamut oklch values are gamut-mapped to sRGB for Canvas/PNG.
FAQ
Why does my sRGB gradient look muddy?
sRGB interpolation passes through low-chroma midpoints. oklch preserves chroma, keeping the transition vivid.
Is my data uploaded?
No. Everything runs locally.